Publishing a Progressive Web App
Because Ionic Apps are built with web technologies, they can run just as well as a Progressive Web App as they can a native app. Not sure what PWAs are? Check out Ionic's PWA Overview for more info.
Making an App a PWA
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 an 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.
By default, the
@angular/pwa
package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.
If an app is being deployed to other channels such as Cordova or Electron, you can remove the
"serviceWorker": true
flag from the angular.json
file.
The service worker can be generated by running:
$ ionic build --prod --service-worker
Note: 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 that HTTPS will be required to take full advantage of Service Workers.
Deploying
Firebase
Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for HTTP2 push.
First, if not already available, create the project in Firebase.
Next, in a Terminal, install the Firebase CLI:
$ npm install -g firebase-tools
With the Firebase CLI installed, run
firebase init
within your Ionic project. The CLI prompts:
"Which Firebase CLI features do you want to set up for this folder?" Choose "Hosting: Configure and deploy Firebase Hosting sites."
"Select a default Firebase project for this directory:" Choose the project you created on the Firebase website.
"What do you want to use as your public directory?" Enter "www".
Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
Configure as a single-page app (rewrite all urls to /index.html)?" Enter "Yes".
"File www/index.html already exists. Overwrite?" Enter "No".
A firebase.json
config file is generated, configuring the app for deployment.
The last thing needed is to make sure caching headers are being set correctly. To do this, add a
headers
snippet to the firebase.json
file. The complete
firebase.json
looks like:
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "/build/app/**",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000"
}
]
},
{
"source": "ngsw-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
}
For more information about the
firebase.json
properties, see the
Firebase documentation.
Next, build an optimized version of the app by running:
$ ionic build --prod
Last, deploy the app by running:
$ firebase deploy
After this completes, the app will be live.