PWA with Ionic Framework

First Published: 6 April 2017
Updated on: 18 June 2019

Last week I sent an email to my subscribers asking them if they had any questions about PWA (Progressive Web Apps) with Ionic Framework. My idea was to answer most of them in my book but seeing how so many people had the same questions. I decided to share them as a blog post.

First, let’s start by defining what a PWA is, Google describes them as:

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
  • Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging - Feel like a natural app on the device, with an immersive user experience.

This new level of quality allows Progressive Web Apps to earn a place on the user’s home screen.

A web app that behaves like a top quality native app.

Now that we got that out of the way, let’s see the questions:

How can I reuse my app’s code to build my PWA?

I got about five different variations of this questions. People were concerned about the changes they’d need to make, or if they had to write it from scratch.

Fortunately, Ionic loves PWAs, so the team started to integrate them into the application, all you need to do is uncomment some code, and you’ll get the basic functionality ready: (i.e., assets available offline, prompt the user to save to home screen, etc.)

All you need to do is go to your index.html file, find this block of code:

<!-- uncomment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(() => console.log('service worker installed'))
    .catch(err => console.log('Error', err));
}
</script>-->

And uncomment it, it will enable the service worker. Then check out the web manifest to see if there are any changes needed for your app, again, the Ionic team already added it for you, if you see index.html you’ll find this line before the </head> tag:

<link rel="manifest" href="manifest.json" />

And if you look inside src/manifest.json you’ll find it ready to use.

What do I deploy to Firebase Hosting?

This was one of the top questions, people were asking if they should just upload the www/ folder or the app/ folder, or what should they be doing.

ionic build --prod, that’s the magic comand, you build your app and then that autogenerated folder is the one you’ll deploy to Firebase hosting.

And that’s it, now your www/ folder is your PWA, and that’s what you’ll deploy to Firebase Hosting.

I will work on some examples in the future, but for now the official docs should be more than enough to get started.

WTF if a Service Worker?

Service workers are scripts the browser runs in the background, separate from a web page, allowing us to use features that don’t need a web page or user interaction.

Right now there’s support for push notifications, background sync, and hell, the Twitter PWA even lets you use the phone’s camera to take and upload pictures.

There’s support for a bunch of other stuff coming, in the mean time, you can check out:

A couple of things to note about Service Workers:

  • They’re JavaScript Workers, so they can’t access the DOM directly. Instead, a service worker can communicate with the pages it controls by responding to messages sent via the postMessage interface, and those pages can manipulate the DOM if needed.
  • It’s terminated when not in use, and restarted when it’s next needed, so you cannot rely on global state within a service worker’s onfetch and onmessage handlers. If there is information that you need to persist and reuse across restarts, service workers do have access to the IndexedDB API.
  • Service workers make extensive use of promises, so if you’re new to promises, then you should try to understand them first.
  • They only run in HTTPS connections, during development you’ll be able to use service worker through localhost, but to deploy it on a site you’ll need to have HTTPS setup on your server.

This is because using a service worker you can hijack connections, fabricate, and filter responses. Powerful stuff. So you might use that stuff to better your app, but a man-in-the-middle attack might not.

How does the “Make the PWA offline Available” work?

This is achieved using a service worker, what it does is it caches the page assets (CSS, js, etc.), it mainly “downloads” your site for offline use.

I will get into that in later tutorials, going to try to get Service Workers to provide offline functionality for the Firebase database in PWA (A fun couple of weeks ahead)