Better user experiences with Progressive Web Apps

This post was originally written for Green Chameleon.

The term "progressive web app" (PWA) doesn't necessarily describe an app at all - it's really a label that can be applied to any website that implements a particular set of technologies. Making your site a PWA has a lot of benefits, and can even be a better choice than building a dedicated mobile app for Android or iOS.

Why build a progressive web app?

PWA techniques enable websites and apps to offer many of the benefits of a mobile (or "native") app, without the drawbacks. They can be installed on a user's device so that they have an icon on the home screen that a user can tap to launch them, they can load pages faster than non-PWA sites using a local cache, and they can even provide some of their functionality offline when a user doesn't have an internet connection at all.

Drawbacks of native apps include a high "barrier to entry" (a user has to go to an app store and install it first to use it, and many people simply don't do that very often), and the high cost of developing and maintaining apps for more than one platform (having an iOS version and an Android version, for example).

PWAs, however, are built once using web technologies rather than platform-specific code, and they work anywhere - on an iPhone, an Android device, a desktop or laptop web browser, any device that can browse the internet and supports the technologies that define a progressive web app.

Thanks to recent advances in browser technology, PWAs have access to powerful features that were previously only available to native apps - things like sending notifications, background syncing of data, and location awareness. All this while maintaining the core strengths of the web - websites work on any platform, and any page can have a unique, permanent URL that can be linked to.

What makes something a progressive web app?

For a site or app to be considered a PWA, it must:

• Be served securely (e.g. over HTTPS)
• Include a manifest file
• Register a service worker

1. Be secure

Progressive web apps must be served over a secure connection to users - that is, your site or app must have a valid certificate and be served over HTTPS. HTTPS is required to get access to powerful browser functions like geolocation (working out where a user is by using their device's GPS or network connection). Another reason for the security requirement is that one of the other major components of PWAs, the service worker, is incredibly powerful and there are security and privacy implications if the connection between your site and the user's device isn't encrypted.

2. Include a manifest

A manifest file tells the browser several things about your site or app - its name, description, what colour you'd like associated with it for things like loading screens, where to find an icon to use on the home screens of devices, and more.

Once a correctly-formatted manifest file is available, any user visiting your site will be presented with the option to add it to their home screen. If the user agrees to the prompt your site or app will install itself on their device, without sending them to an app store and making them wait for a download and installation to complete. It's all done in a few seconds from a single prompt on arrival at any page of your site. This is the lowered "barrier to entry" referred to earlier - the whole process is much less disjointed than when a user taps one of those nagging "install our app" banners we've all seen at the top of some websites.

3. Register a service worker

A PWA must also register what's called a service worker, and this is where the real power of PWAs comes in to play. A service worker is a script that can do any number of things once set up. Common uses include providing a custom fallback page for users who are offline (a much better user experience than the dreaded "no connection" error screen from the browser), significantly speeding up page load times by managing a cache of pages and assets, and storing data that is computationally expensive to calculate (like location data) for enhanced performance.

What can progressive web apps do?

We've already touched on one of the main benefits of progressive web apps - being installed to the user's device with an icon on the home screen for increased convenience and accessibility.

We're only beginning to explore the potential uses for service workers in PWAs as the technology is relatively new, but some of the more popular uses for them are:

• Enabling users to view content they've accessed before when they no longer have a network connection. For example, consider a scenario where a user plans an itinerary for a trip on a site, and then that user temporarily loses signal while they're out and about. If the site was a PWA and it stored that itinerary in a cache on the user's device, they could look it up again while on the road by revisiting the site even without a network connection.
• Completing processes that the user wasn't able to while temporarily offline - filling out a contact form on a website perhaps, or even a checkout processes on an e-commerce site. If a user tries to complete a purchase or submit a form while offline, a PWA's service worker could store the contents of their basket, or the data they entered in to the form, and complete those processes once it detects the user is back online.
• Significantly speeding up page load times by caching pages and assets like images, styling, and scripts, so that they don't get fetched again every time a user navigates from one page to another. A variety of "caching strategies" can be used to set up scenarios like caching pages as they're accessed for faster retrieval next time, and offline usage.

Summary

Progressive web apps are an exciting new innovation, allowing websites and web apps to offer native app-like capabilities and user experiences while maintaining the core strengths of the web - independence from any one platform, interoperability, and page linking.

All major mobile browsers now support the technology in some form, so why not begin exploring the ways you can use it to improve the experiences of your users?