Progressive Web Apps

"Progressive Web App" is a term first coined by designer Frances Berriman and Google Chrome engineer Alex Russell back in 2015 to describe web apps that narrow the gap between web and native apps. Progressive Web Apps take advantage of modern web technologies such as service workers and web app manifests to provide a user experience nearer to native apps without the chore of an app store download and install.

PWAs are exciting for us as web developers and web designers as it has the potential to bring greater demand for our skills and a broader canvas for our work to be consumed. For brands large and small it presents a fantastic opportunity to potentially reduce the costly development and maintenance of mobile apps across multiple platforms, along with managing the legacy of older versions of an application still being in existence. Instead brands can continue to invest in their web apps and take advantage of PWAs to deliver a rich native-like user experience from the "web platform", which is constantly up-to-date.

But what's the difference between a web app and a progressive web app? Progressive Web Apps have the following characteristics:

• Progressive - Work for every user, regardless of browser choice because they're built with progressive enhancement as a core tenet.
• Responsive - Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
• Connectivity independent - Service workers allow work offline, or on low quality networks.
• App-like - Feel like an app to the user with app-style interactions and navigation.
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and ensure content hasn't been tampered with.
• Discoverable - Are identifiable as "applications" thanks to W3C manifests and service worker registration scope allowing search engines to find them.
• Re-engageable - Make re-engagement easy through features like push notifications.
• Installable - Allow users to "keep" apps they find most useful on their home screen without the hassle of an app store.
• Linkable - Easily shared via a URL and do not require complex installation.

Browser support for Progressive Web Apps is excellent in Google Chrome and Opera, followed by good support in Firefox and Samsung Internet with Microsoft Edge improving fast. Safari on the other hand is notably lacking, perhaps because of their reliance on apps and the app store and PWAs could be seen as a threat to that business.

Whilst most demos of PWAs focus on the mobile experience PWAs are also set to make an impact on desktop devices by being built into Chrome OS and Windows, launching what feels far more like a desktop application rather than a web experience. This makes PWAs even more exciting as they have the potential to not only consolidate development effort across mobile devices but desktops and beyond, using the universal support of web standards and the advances in the web that PWAs are forging.

Microsoft is taking an interesting approach in Windows, where they speak about the "web platform", meaning the triad of cornerstone technologies for the web (HTML, CSS and JS) with Edge being one application built upon that web platform. Their implementation of PWAs in Windows is not taking the approach of another manifestation of Edge but rather a secure and sandboxed environment for a real application to exist with its own identity, ratings and comments on the Windows store. Which can then be installed and pinned to the start menu and taskbar like any native Windows application.

Microsoft has also indicated plans to crawl the web for PWAs and automatically present quality examples in the Windows Store (source), if the idea takes hold I imagine it wouldn't be long until the Google Play Store follows suit.

Some notable examples of PWAs already out in the wild include the Financial Times, Forbes, Twitter Mobile, Paper Planes and more examples can be found at PWA.rocks.

Whilst the concept of PWAs may seem new it's actually been quite a long journey to get here. The first seeds of PWAs were sown as far back as 1999 when HTML Applications, with .hta file extensions were first introduced into Windows. More recently we’ve seen the Electron, Ionic and Cordova platforms package up applications developed in web-based technologies into forms that mimic native applications.

If you are itching to get started and develop a PWA, there are some good places to start, first off Google has a great tutorial on building your first PWA. The "Hello World!" of PWAs is a Hacker News Reader app and so HNPWA is a great resource to discover common approaches and architectures for PWAs that serve the same purpose as a Hacker News Reader. Many of the JavaScript frameworks of the moment provide tooling to scaffold out the groundwork of a PWA, take a look at Preact CLI and Vue.js. But that's not to say a PWA requires a JavaScript framework, Google have released a JavaScript library called Workbox, which helps to build some of the more complex aspects of PWAs such as Service Worker caching strategies.

It will be interesting to follow the story of PWAs over the coming months and years. With the likes of Google and Microsoft throwing their weight behind PWAs it's likely we'll see more and more brands turning to PWAs as a viable alternative to native apps and reaping the benefits.