A Progressive Web App (PWA) is a website or application which takes full advantage of modern web capabilities to deliver an app-like experience to its users. They are built using web technologies and can be indexed in search engines, are hosted on servers much like a website and are accessible via URL. They can leverage mobile OS usability features and act more like a native app.
Confused? You’re not alone. Perhaps the easiest way of making sense of PWA is to think of it as a new standard for website usability, building on the trend for better mobile usability, rather than being an entirely new and separate thing. To be considered a PWA, a website therefore just needs to meet a certain set of requirements.
Google Developers loosely defined PWAs by stating that, in a nutshell, they should meet these minimum requirements:
- Reliability: Loads fast and works offline.
- Usability: Pages should load instantly, scrolling should be smooth and navigation between pages should be seamless, even on slow data networks.
- Accessibility: a PWA should be launchable from a device’s home screen and should also be able to receive Push notifications.
The actual list of attributes that most people accept as the foundations of the PWA philosophy is a bit more involved. We’ll get into that in a moment.
The attributes of a PWA
The term “progesssive web application” was actually coined by a Google software engineer called Alex Russel, back in 2015. Russell is one of the lead engineers for Google’s Chrome browser amongst other things, so he knows a thing or two about web usability standards.
He specified a set of rules to meet the PWA standard for usability as follows [verbatim]:
- Responsive: to fit any form factor.
- Connectivity independent: Progressively-enhanced with Service Workers to let them work offline.
- App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions.
- Fresh: Transparently always up-to-date thanks to the Service Worker update process.
- Safe: Served via TLS (a Service Worker requirement) to prevent snooping.
- Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them.
- Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications.
- Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store.
- Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.
You may or may not understand all of the jargon, but the important thing is that there is much more talk of usability than there is around specific technologies. And the only technologies specified are to facilitate the usability standards.
PWA technologies explained
There are three technologies underpinning PWA usability. They are ‘Service Worker”, “Manifest JSON” and “HTTPS”. We’ll look at these in turn.
- Service Worker: In simple terms, this is all about caching pages and/or data. The most obvious benefit of this is allowing users to access the PWA on their device even if they are not connected to the internet, just so long as they have accessed it once before while on the web. The second benefit here is speeding up load times even when the user is connected to the web, because loading local files is much faster than downloading them.
- Manifest JSON: This is simply a file which contains information about what a home screen icon should look like. If it is present, mobile operating systems will ask the user if they want to ”Add to Home Screen”. If they hit ‘Yes’ then the icon, short name and app theme/colours are all available in the Manifest file.
- HTTPS: You should definitely already know what this is, but in case you don’t, HTTPS allows for secure delivery of data over the web through encryption. This is especially important because a PWA should be able to accept Push data, updating any stored/cached files while connected to the web in readiness for the next time the user needs it. With this kind of ‘background refresh’ happening, security is crucial. In fact, Service Workers won’t even run without good security in place.
So, while PWA technology might sound a bit overwhelming at first, it’s really not that complex! These are simple technical solutions to create vastly improved user experiences.
Ok, I think I get it. But what does this all mean for me?
How important is mobile usability to your business? If the percentage of traffic and conversions on your site from mobile is very low (and you don’t think it should be any higher) then PWA is probably going a step too far. By all means invest in making your site secure, fast and mobile responsive, because those are all important factors for SEO and for conversion rate optimisation. But you probably don’t need to worry about Service Workers, Manifest files or ‘appy’ usability features.
However, if mobile is important to you then PWA could be a worthwhile investment, especially if you’re considering developing a separate mobile app, which would create additional content management and support requirements as well as your website.
Please don’t misunderstand us – mobile apps do still have their place, especially where the content and features used on your app would be vastly different from your website. To give an example, if you were a travel company then a PWA could be a way of allowing users to browse packages, build itineraries and research future holidays whether they were online or offline, just like they would on your website.
By contrast, a manufacturer may prefer to have their website focussed on B2B sales, but to offer a separate mobile app for consumers with how-to guides and product information.
If you think PWA might be worth exploring for your business, get in touch and speak to us. It’s worth remembering that there is a sliding scale here. While you may not need everything required for your website to be truly considered a PWA, you might still benefit from certain elements of this new way of thinking. We can help you to find the right balance.