In this guide, I'll cover how to get started with Progressive Web App (PWA) development, including how to set up your app, use Lighthouse audits, register a service worker, add home screen compatibility and include push notification features.
Progressive Web Applications (PWAs) are performance-based websites that have been streamlined to provide a superior mobile-experience, similar to that of an app.Â
They’re responsive, use less storage space and data, support push notifications and can be saved to the home screen on mobile devices.
Having recently developed a PWA in one of our app development projects, I wanted to write a step-by-step guide that would give beginners everything they needed to know to get started:
First up, you need to create your project or find an existing project that you want to make PWA compliant. If this is your first PWA, I’d recommend keeping it simple for now so that you can focus on the PWA side of things. Your project can be built in any framework of your choice, I built mine using Vue.js as it is a lightweight framework and the CLI comes with a lot of PWA support straight out of the box.
Google Lighthouse is a free, open-source software which is available in the ‘Audits’ section of Chrome Dev Tools. There are several different audit categories that you can run against your website, including whether it meets the standards for a progressive web app. The audit lets you evaluate your app based on their PWA criteria and provides a checklist of improvements that need to be made. You may find that a lot of the recommendations are best practice when building websites such as using https, however there will be a few additional things that you need to consider and add to your project. I will detail some of these in the steps below.
One of the criteria for making your app PWA compliant is registering a service worker. This is the technology that enables your app to use progressive web app features that would normally require native mobile app development, such as offline functionality, push notifications and the ability to add shortcuts to the home screen.
Service workers are a script that your browser runs in the background (separate from your webpage), which have the ability to intercept and handle network requests, including managing a cache of responses.
Source: Developing a PWA with Service Workers.
In the image above, you can see that the service worker acts like a proxy between your app and the network. The service worker can check if a user is connected to the Internet and grab the latest data from the backend, or if they aren’t, it will display the most recent cached version of the website instead meaning that your PWA can still work offline.
Progressive enhancement is a development strategy that makes sure that your website/app is accessible to as many users as possible, ideally by building the core of the website using widely adopted technologies such as plain HTML and then layering enhancements on top such as styling and interactivity using JavaScript. The image below shows this quite nicely, the core structure and content of the site is the sponge part of the cake, and whilst this is fine and still a delicious cake, it can be made better with icing and decorations (the CSS and JavaScript).
Source: What is Progressive Web App Enhancement.
However, this isn’t always so easy to put into practice, especially for many modern, large-scale applications. One of the criteria for making your app PWA compliant is ‘Your app should display some content when JavaScript is disabled, even if it’s just a warning to the user that JavaScript is required to use the app’. As long as your app doesn’t render a blank page when JavaScript is enabled, you will be able to tick off this part of the criteria.
The whole point of PWA’s. This functionality is what allows users to save websites to their home screen and access them in the same way they would a native app. In order for the browser to display this add to home screen prompt on your app, you need to make sure that you have met the following criteria:
1. Includes a web app manifest that includes:
2. Served over HTTPS (required for service workers)
3. Has registered a service worker with a fetch event handler.
To use push notifications on your app, you will need to make use of two APIs: The Notifications API and the Push API.
The Notifications API lets the app display system notifications to the user, just like a native app does. The Push API allows a service worker to handle Push Messages from a server (I’d recommend using Firebase Cloud Messaging (FCM) if you want to quickly get up and running with your own project as it creates unique tokens to for each device and session). Below are the steps you need to take to get started with this functionality:
You can configure what information comes through in the notification, such as the title, body text, icon, link and even the vibration pattern the phone should make when receiving the notification.
Again, browser support is key here. At the time of writing, both the Push API & Web Notifications are not supported by Safari. I’d recommend keeping an eye on out for updates as there are rumours that it is on Apple’s roadmap.
Pros:
Cons:
If you think a PWA could help solve the problems your organisation is facing, or you’re trying to develop your own progressive web app and need some help or advice, get in touch with the team!
Published on November 15, 2018, last updated on May 22, 2019