Build Progressive Web App with Ionic 5

How to build a progressive web app with ionic 5? 

How to build an ionic PWA for sub-directory?

We are going to solve both the above problems. 

So, Let’s dive into it.

Build a Progressive Web app

If you want to learn and know more about the PWA concept first then  you can check ionic official docs.

Or, we have also written on progressive web apps here.

Because we are using angular with ionic, So, we can use the following angular package to build our PWA. Run the command to install the package.

ng add @angular/pwa 

After installing this package, we just need to run the following command.

ionic build --prod

And our www directory will be ready to use as progressive web app. We will simply deploy this directory on our server.

How to deploy ionic progressive web app to a sub-directory?

Building an ionic progressive web app is quite an easy task as shown above. But I was stuck when I tried to deploy this application in a subdirectory on the server.

After some digging, I found the solution. We need to run the following command to build progressive web app for a sub-directory.

ng build --prod --base-href=/sub-directory/

For example, you want to deploy your fitness PWA in a subdirectory /ionic/6/fitness, then run the following command.

ng build --prod --base-href=/ionic/6/fitness/

Go to manifest.webmanifest and replace the following urls.

scope : “./” to scope : “/”

start_url : “./”  to start_url : “/”

Now you can deploy your ionic 5 progressive web app on your server subdirectory.

Hope you enjoy the article.

See you in the next learning journey.