Create a PWA in Ionic 4 using Angular
Official post: https://ionictheme.com/create-a-pwa-in-ionic4-using-angular
PWA in Ionic 4 now is too much easy than never! you can start a new Ionic 4 app with (Angular by default) following the steps suggested by the Ionicframework beta documents:
$ ionic start ionicPWA tabs --type=angular
After this step, you can access your new project folder:
cd ionicPWA
and now we are use the Angular Service Worker, because, SW are not present by default in Ionic 4 applications; Angular provides a package and command line tooling that makes it extremely easy to add PWA support to your Ionic/Angular applications with service workers, and it also provides additional features like auto-creating required icons for you. It also handles “cache busting” functionality by default.
Setting up a service worker this way is pretty much as easy as running:
ng add @angular/pwa --project ionicPWA
The command automatically does the following:
- Creates the configurations the service worker
- Creates a default iconography for PWA standards
- Updates the angular.json file to enable service worker support
- Add @angular/pwa to your package.json
- Adds the required meta tags to the index.html
- Creates a ngsw-config.json file with your PWA configs
Now let's create a production build:
$ ionic build --prod
This will run the build process, and output the result to your www folder, now we can test it in localhost creating a local web server to serve the contents of the www directory:
Recommendations:
cd www
and then serve (using lite-server as sample) the contents of that folder:
$ lite-server
http://localhost:8080
Ta-da! an Ionic 4 + Angular 6 PWA running!! we get also an improvement over what we have had in previous versions of Ionic, to much easy and now you can setting up as you want to improve and optimize the way what you want.
This experience were applied on our first Ionic 4 Theme, in case you are interest to know more about, check it out: