Deploying app as PWA
Learn how to deploy your app as PWA on a free Firebase hosting
Prepare Firebase project for PWA
To deploy the app as PWA , we will demonstrate using Firebase hosting.
First create a project on Firebase.
Now, in your project directory, run
$ npm install -g firebase-tools
This will install Firebase tools in your project. Now login into Firebase using
$ firebase login
It will redirect you to browser, and authenticate using your google account. Once you are logged in, you can run this command to attach the code to your project.
$ firebase init
It will take you through a list of options for project setup.
This will create a firebase.json
file which should look like the following
{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Convert the app into a PWA
The two main requirements of a PWA are a Service Worker and a Web Manifest. It's possible to add both of these to an app manually.
To add this package to the app run:
$ ng add @angular/pwa
Finally, build your project into production using
$ ionic build --prod
This will create a production build of your ionic app for PWA deployment. Use Firebase to deploy the app using
$ firebase deploy --only hosting
This will deploy your app on a Firebase url such as https://ionic4fullapp.firebaseapp.com/ where you will see your app running perfectly.
The Firebase console will show the deployment like this

For a more detailed step-by-step guide on PWA deployment, check this blog
For more information on PWA related option in firebase.json
, check here
Last updated
Was this helpful?