How to Make Your App a PWA
It’s common that website should be accessible for mobile devices. Today we more often use our smartphones or tablets to explore Internet. Users demand from web applications to be mobile-friendly. That’s why following Responsive Web Design rules is a must if we want to encourage people to use our app.
Although RWD became a standard W3C (World Wide Web Consortium) tries to introduce new patterns or tools, which help adjust web apps for mobile devices. Google, promotes usage of modern web technologies in series of articles. Moreover, Google introduced it’s own solution to accelerate web apps for mobiles, the AMP (Accelerated Mobile Pages). But, in this post we will focus on another Google’s web application standard, the PWA.
Progressive Web Applications (PWA) are applications which use the latest web technologies to bring the quality of browser based applications to the next level. Progressive is a keyword here. It stands for enhanced application capabilities for browsers supporting modern web APIs. Google describes PWA as:
- reliable
- fast
- engaging
This post will show you how to embed PWA’s features in your web application step-by-step.
Add manifest.json to your project
To make browsers treat your app as a PWA you need to add Web Application Manifest. It’s a document which holds all basic information about your application, like application name or icon url (see example below).
Application’s manifest helps to customise Add to Homescreen experience. For example Android supports showing a splash screen when you launch application from Home Screen (it’s good to add 512x512 size icon). It’s worth to mention that adding the manifest enables showing installer banners - simple mechanism to prompt user to add your application to Home screen.
Setup Service Worker
The next step is Service Worker setup. It enables caches, push notifications and even background data synchronisation. In PWA one of Service Worker’s responsibilities is fast content delivery, which means nearly instant app loading. Our worker simply cache all application assets, so they can be fetched quickly. Every time browser requests asset, Service Worker intercepts it and serves a locally cached version.
In order to use Service Worker in our application we need to register it:
When the worker is registered successfully it can start caching our assets:
Now, all files provided in addAll method will be cached by Service Worker. It means that, when a user visits our app next time, the browser will server resources from cache. Caching assets decreases First Meaningful Paint and Time to Interactive, so the user can access the app quicker.
Service Worker setup seems to be pretty straightforward, but for handling more complex cases I recommend to use a dedicated library like sw-precache or offline-plugin (for Webpack). Please, keep in mind that Service Worker requires HTTPS protocol to work, but locally you can use it over localhost.
Moreover, resources caching allows to use our application without network connection. In other words, our the app can work offline.
Add offline support
With Service Worker our web app can be accessed instantly or even offline. If you want to provide the best experience for mobile devices’ users you need to make your application available under low network connection. Assets caching can be done using Service Worker, but what with your application’s state? Fortunately, modern browsers support client databases like IndexedDB and WebSQL (for Safari browser). It means that you can store any data in a database dedicated to your web app.
There are many libraries that enable the use of client-side databases, but one is worth considering - PouchDB. It’s a database library, which adds support for different client-side and server-side databases. It provides fallback for WebSQL database, when IndexedDB is not available. Moreover, using PouchDB is super simple:
Since PouchDB is compatible with CouchDB, you can synchronise your data with server’s CouchDB database using only one method. Overall, PouchDB seems to be widely-used and robust solution for offline data caching.
If you plan to build you application using React framework and Redux state manager, I suggest you to look at any library handling PouchDB communication in redux-way.
So far, so good. We can install our PWA and launch it instantly from Home Screen. It’s even working offline. Now, we can focus on engaging users.
Engage users by push notifications
Last step to make our Progressive Web Application complete is to add push notifications. Push notifications are simple messages that engage users in an effective way. Notifications are common for mobile applications and now are available in web apps thanks to Push API. That API can be used only in Service Worker.
Every time when application receives a Push Notification, Service Worker gets push event, which can be handled by event listener callback:
It’s also possible to respond to notification click action using proper event listener:
Additionally, your app’s API can send details, that will be shown in the notification. Unfortunately, it’s more complicated than just passing data object sent by back-end to showNotification method. There is a security requirement, according to which payload sent by API should be encrypted. It needs some extra work both on the front-end and on the back-end side. Happily, Google Developers provided a pretty straightforward tutorial how to do it.
Measure your PWA using Lighthouse
Once our Progressive Web App is set up, we can audit it using Lighthouse. You can use that tool either as a Chrome extension or as a command line, based on Node module.
It’s pretty simple to use. You just click the button, wait when tests are completed and get report with app’s results:
Lighthouse supports most of PWA features, like offline caching, push notifications and adding to Home Screen. I highly recommend to use it during your’s PWA development.
Further reading
I presented you a brief step-by-step instruction how to make your app a Progressive Web Application. If you seek more details about PWA, I suggest you to read these articles:
- Progressive Web Apps with React.js series by Addy Osmani
- Your First Progressive Web App by Pete LePage
- Progressive Web Apps by Google
- Housing Go — Behind the Screens by Ritesh Kumar
- A Beginner’s Guide To Progressive Web Apps by Kevin Farrugia
Tap the ❤ button if you found this article useful!
About the Author
Mirek is Front-end Developer at EL Passion. You can find him on Twitter.
Find EL Passion on Facebook, Twitter and Instagram.
