Not sure what PWAs are? Check out The Complete Guide To Progressive Web Apps with Ionic 4 for more info.
Ionic 4 is a step forward for Progressive Web Apps, that's why we are building this new ionic template with 100% support for PWA.
You will be able to use this Ionic 4 starter as an iOS app, an Android app, a web app or as a PWA! Too many options, right?
For a web app to be considered a PWA, it needs to comply with 10 principles.
The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an @angular/pwa
package that can be used to automate this.
The @angular/pwa
package will automatically add a service worker and a app manifest to the app. To add this package to the app run:
$ ng add @angular/pwa
Once this package has been added run ionic build --prod
and the www
directory will be ready to deploy as a PWA.
Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware they HTTPS will be required to take full advantage of Service Workers.
Get your iPhone and open Safari.
Currently PWA on iOS only work on Safari browser.
Navigate to https://ion4fullpwa.firebaseapp.com or to https://pro-ion4fullpwa.firebaseapp.com for the PRO version.
Tap the Share button
From the bottom slider, tap the "Add to Home Screen" option
Set the name you want
The app will now be available as a PWA from your home screen. Enjoy 😀
Get your Android phone and open Chrome.
Navigate to https://ion4fullpwa.firebaseapp.com or to https://pro-ion4fullpwa.firebaseapp.com for the PRO version.
The following prompt will be displayed. Click it.
Click ADD.
Click "ADD AUTOMATICALLY"
The app will now be available as a PWA from your home screen. Enjoy 😀
One of the requirements of a PWA is to be served over https so it is secure.
There are many hosting providers that offer HTTPS support, among them I find the Firebase Hosting product super easy to work with besides it’s free and provides many benefits for Progressive Web Apps, including fast response times thanks to CDN's, HTTPS enabled by default, and support for HTTP2 push. Follow me while I show you how to deploy your Ionic PWA to Firebase.
If you want to learn more about using Firebase with Ionic Apps, check our series of posts covering Authentication with Firebase, Ionic CRUD with Firebase, Firebase Storage, Firebase Database.
Let’s start by installing the Firebase CLI:
$ npm install -g firebase-tools
With the Firebase CLI installed, run $ firebase init
from within your project’s folder. This will generate a firebase.json
config file for you to adjust the deployment details.
Lastly, make sure caching headers are being set correctly. Ensure your firebase.json
file looks like this:
{"hosting": {"public": "www","ignore": ["firebase.json","**/.*","**/node_modules/**"],"headers": [{"source": "/build/app/**","headers": [{"key": "Cache-Control","value": "public, max-age=31536000"}]},{"source": "sw.js","headers": [{"key": "Cache-Control","value": "no-cache"}]}]}}
Now each time you make a change on your Ionic app run the following:
$ ionic build --prod
That’s it! Now simply deploy the app by running:
$ firebase deploy
​