Progressive Web Apps — An application for applications
Over the course of my last few articles I have touched on the rising technology of Progressive Web Apps, and how the shifting market is allowing this new and powerful technology to begin to take hold. I believe Progressive Web Apps will impact the technological world, in particular the web, in a very dramatic way, even if most of its impact happens under the hood and is not ‘visible’ to the general public.
In this article I would like to explore how we can utilise some of the core methodologies, strategies, and technologies to improve the way we think about and build websites.
A Quick Recap
Firstly, let’s remind ourselves of what a Progressive Web App is, and why they have been created.
Google describe a Progressive Web App as ‘A new way to deliver amazing user experiences on the web’ and also as ‘user experiences that have the reach of the web’. You can find out much more about Progressive Web Apps here, but ultimately a Progressive Web App is a clever buzzword that describes a set of design principles and small pieces of technology that can ‘earn a place on the user’s home screen’.
For reference, a Progressive Web App should be:
- Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging — Feel like a natural app on the device, with an immersive user experience.
What Makes An App Progressive?
One of the core concepts behind a Progressive Web App is progressive enhancement. This is by no means a new concept, but rather one that has been brought back to life. Progressive enhancement is a strategy that ensures all users are able to access the most important thing, content, first. Optional features such as styling, media, animation are then applied as the device and/or network allows. Basically, give the user the best experience they can get, but make niceties optional.
There are a number of tests that a Progressive Web App must pass in order to be accepted as a Progressive Web App. Google have created a tool, Lighthouse, to help check how well a Progressive Web App is performing. Lighthouse runs a range of tests that cover the following:
- Performance
- Progressive Web App
- Accessibility
- Best Practices
- SEO
Let’s quickly explore these in a bit more detail.
Performance
These tests cover a range of performance metrics such as load times, asset optimisation, and minification. Speed wins.
Progressive Web App
There is a checklist of minimum requirements for a Progressive Web App, these include: ensuring the right metadata is present, works offline, is delivered over HTTPS, registers a service worker, and loads in under 5 seconds.
Accessibility
An often overlooked practice in web development, especially compared to app development is accessibility. Here, checks are run against aria labels, alt text, and titles to name a few.
Best Practices
The best practices tests cover some more advanced metrics. Scoring well here means using up-to-date technologies and avoiding some key user experience issues such as asking a user for their location on page load, something I have told Homebase about a few times but they are still yet to fix.
SEO
Search Engine Optimisation is key for any website, but isn’t achieved with a native app (so we build product pages to describe the app instead). Progressive Web Apps are indexable; these checks ensure that the right meta, title, and document setup are used, as well as things like the use of legible fonts and appropriate plugins.
Now we have a good understanding of what a Progressive Web App is, and what key concepts and technologies are required, let’s think about how we can use some of these ideas more generally for a standard website, and what impact they can have.
What Does This Mean For The Web?
Progressive Web Apps have been created to bring together the reach of the web and the user experience and functionality of an app (a native app). This functionality includes: offline access, an app icon on the home screen, standalone or full screen mode, push notifications, and mobile payments.
These features are all aimed at developing the new breed of apps. But what if an app isn’t suitable? What if were looking to build a website or improve an existing one? We don’t really want to have to rethink how we do things, but we can learn a lot from Progressive Web Apps, and even use some of the design principles and technology. All of this is great for the web, developers, businesses, and end users.
HTTPS
A Progressive Web App requires the use of HTTPS, and more generally across the web we’re seeing a move to this protocol thanks to tools such as Let’s Encrypt and with Google giving greater weight to websites using HTTPS. This is all good news, a more secure web is better for everybody, but there’s still a long way to go, hopefully Progressive Web Apps can help spread the awareness and adoption of HTTPS.
ARIA
Accessibility is often overlooked, but with Progressive Web Apps having accessibility as a core part of their scoring, this should hopefully inspire some change in the usage of accessibility practices such as aria roles and labels. It might not be a consideration for our main user base or target audience, but that’s not really an excuse anymore, not in the highly connected modern world.
Image Compression
Although many bask in the luxury of 3G and 4G, not everyone always experiences a fast and stable connection. We can leverage some of the technologies around imagery utilised in Progressive Web Apps for our websites. Load times can be significantly reduced based on device and network speeds using responsive imagery and art direction.
Caching Strategies
At the heart of a Progressive Web App is the service worker. This little script can work magic for a Progressive Web App and a website, a key feature of a service worker is caching. There are a number of caching strategies that can be implemented, all of which can dramatically improve the performance of a Progressive Web App or website. At Lunar Works, we have implemented PWA technology into our own website. To give you an idea of what caching through a service worker can do; our first visit load time is around 2–3 seconds, whereas our second visit load time is around 0.8 seconds, yikes! Also, once you’ve visited and browsed a page it will then work completely offline — no more poor experiences caused by train tunnels or the Cornish coast.
What Else?
There’s a lot more that Progressive Web Apps can offer both as a web app, and a website, that I haven’t covered here. If you’re interested in finding out more about Progressive Web Apps, either for the purposes of an app, website, or just to learn more, then feel free to get in touch. To quote Jake Archibald — “Service worker is here. Get busy with it.”
