How To Make A Progressive Web App (PWA)

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:

1. Setting up your app
2. Using Lighthouse audits
3. Registering a service worker
4. Enhancing progressive nature
5. Adding home screen capability
6. Including push notifications

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.

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).

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:

• Short name or name
• icons must include a 192px and a 512px sized icons
• start_url
• display must be one of: fullscreen, standalone, or minimal-ui

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:

1. Your app must ask the user if they would like to subscribe to notifications – you can do this using the Notifications API
2. Handle the notification subscriptions using the service workers. Eg, inform your service such as FCM, that the user would like to subscribe to a particular topic, eg ‘hurricanes’ or ‘puppies’
3. The service worker listens and is ready to receive any message coming in from the server. E.g. if a notification is sent to all users who have subscribed to the topic of ‘puppies’, then the service worker will take that content and display it on the user’s device.

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:

• Don’t have to deal with app store approvals etc – though this could be a downside as it could lead to a slip in quality
• Easier to install – don’t have the friction of users having to find your app in the app store, download it, etc
• Search engines can crawl them so they will appear in Google searches
• Linkable – just like a normal website which makes it easy to share content with people
• Uses web technologies – for those with web dev backgrounds this is great as you don’t have to learn another coding language to get some great native app-like functionality
• App like experience with offline functionality and push notifications.

Cons:

• PWAs don’t have all the same features of native apps such as access to contacts, Bluetooth or advanced camera controls
• For obvious reasons, they’ll also miss out on traffic and exposure from the App Store
• There will always be some degree of browser inconsistency
• Progressive Web Apps consume a lot more battery-life than native apps
• Cross app login is also unavailable with other apps like Facebook and Twitter.

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!