Quickstart: PWAs with Ionic v1 and Firebase

You have heard of PWAs and service workers but don’t know where to start then this article is for you. Already familiar with PWAs and looking something to create production grade service worker then just skip to sw-precache section.

Setup Firebase and Ionic v1 project

Let’s setup Ionic v1 project.

$ionic start mypwa blank

PWAs need to be hosted somewhere. We will use firebase as our hosting provider. Login to your firebase account and create new project.

We also need firebase tools to deploy Ionic project on Firebase

$npm install -g firebase-tools

Lets deploy our Ionic project to firebase

$firebase login

$firebase init

This will ask you a series of questions to setup project.

What Firebase CLI features do you want to setup for this folder? [select hosting]

What Firebase project do you want to associate as default?[select project name you just created]

What do you want to use as your public directory?[www]

Configure as a single-page app (rewrite all urls to /index.html)? [y]

File www/index.html already exists. Overwrite? (y/N) [N]

You have just configured your firebase hosting project. In the process you will see that there are few files being added firebase.json, .firebaserc and database.rules.json. We will need to customize firebase.json but will do that later. Lets deploy our site.

$firebase deploy

You will see URL of hosting site in the output, this is where we are going to have our PWA.

Things to make your Ionic project PWA

To make our website PWA we need service worker and manifest. Ionic already provides you both but we need to enable service workers explicitly.

Uncomment code block which contains service worker registration part.

Open index.html and remove line which includes cordova.js we don’t need it anymore.

$firebase deploy

Open hosting site. In Chrome Dev Tools you should see service worker.

If you look at service-worker.js it doesn’t really do anything. So lets make it do something cool.

Creating service workers using sw-precache

sw-precache is handy npm module to create production grade service worker without you having to know nitty gritty details of how service worker works. Once you know what service workers do you can customize your PWA with sw-precache. Yes, there are plenty of options that sw-precache provides. So lets get started

$npm install sw-precache — save-dev

Add following gulp task to gulpfile.js

$gulp generate-service-worker

Look at service-worker.js now, you will see sw-precache is generating most of the things that production grade service worker will need.

You can deploy again and check if you have got new service worker

$firebase deploy

Depending upon cache settings you might end up seeing that its still the old service worker. Lets fix the cache settings. Open firebase.json and add Cache-Control settings for service-worker.js. We are going to set it to max-age=0 to ensure that service-worker.js updates are picked up by browser.

Deploy again, if all goes well then we should have our first Ionic v1 PWA.

But wait, to make PWA we needed manifest.json as well. Ionic now provides manifest.json in the starter project. What is missing is icons. We need to add icons which should be at least 144x144. Lets add icon of 512x512 resolution in www directory. Also lets make things little colorful by adding background and theme color. Your manifest.json will look something like following

You first PWA is ready.