Did you know that 53% of users will abandon a site if it takes longer than 3 seconds to load? Progressive web apps, or PWAs for short, solve this issue by creating faster and more reliable interfaces. This helps to grow engagement and increase conversions. Even big-time corporations like Twitter and Starbucks have created mobile progressive web apps (check out twitter.com on your Safari app!). Here’s the rundown on how you can make your own:

Let’s begin by creating a new Ionic app in the CLI. Make sure that you’re working in Ionic 4!

$ ionic start newPWA blank --type=angular 

🐊 Alligator.io recommends ⤵

Ionic 4 Crash Course with Heartstone API & Angular

Next, add whatever HTML or SCSS you want to see on your blank app. While this is not necessary, it demonstrates how progressive web apps look no different than regular native apps. The only prominent variation is that you can load PWAs online as a website.

The following step is to produce your web folder, a.k.a. the www directory.

$ ionic build --prod 

Run this command at least once before adding the @angular/PWA package.

The two things a PWA requires are a service worker and a web manifest. It’s viable to add both manually, but you’ve got to admit that’s more time-consuming.

Lucky for us, our friends at Angular have a package that will automatically add a service worker and a web manifest to the app.

$ npm install @angular/pwa 

Rebuild your Ionic app so that your www build directory contains the new package.

$ ionic build --prod 

That was easy enough! You’ve finished converting your app into a PWA. That’s great! Now, we’ll continue by hosting our progressive web app with the free and reliable Google Firebase hosting service.

$ npm install -g firebase-tools $ firebase init 

Running firebase init generates a firebase.json file that will help configure your app for deployment. Note that the command will also prompt a series of questions such as "Configure as a single-page app (rewrite all urls to /index.html)?" It's not important if you answer yes or no, because we will rewrite all of the generated firebase.json anyways.

For our final step, we must rewrite our firebase.json. Copy and paste the following code exactly as is given:

firebase.json

{ "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": "sw.js", "headers": [ { "key": "Cache-Control", "value": "no-cache" } ] } ] } } 

This will ensure that the service worker file itself doesn’t get cached.

Finally, type the following command into your CLI.

$ firebase deploy 

Click on the link that the command returns and bathe in the glory of your successful PWA.