We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

App Center

Introduction to progressive web apps

This article provides an introduction to Progressive Web Apps (PWAs), discussing what they are, and the advantages they bring over regular web apps.

What is a Progressive Web App?

PWAs are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.

For example, web apps are more discoverable — it's a lot easier and faster to visit a website than install an application, and you can also share web apps via a link.

On the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. You can install a native app so that it works offline, and users love tapping their homescreen icons to easily access their favourite apps, rather than to navigate to it using a browser.

PWAs give us the ability to create web apps that can enjoy these same advantages..

It's not a brand new concept — such ideas have been revisited many times on the web platform with various approaches in the past. Progressive Enhancement and responsive design already allow us to build mobile friendly websites. Working offline and installing apps was possible in the Firefox OS ecosystem a few years ago.

PWAs however provide all this and more, without getting rid of any of the existing features that make the web great.

What makes an app a PWA?

As we hinted at above, PWAs are not a single technology. They are more like a new philosophy for building web apps involving some specific patterns, APIs, and other features. It's not that obvious if a web app is progressive or not from first glance. An app could be considered a PWA when it meets certain requirements, or implements a set of given features: works offline, is installable, is easy to synchronize, can send push notifications, etc.

In addition, there are tools to measure the completeness of an app in percentages (Lighthouse is currently the most popular one). By implementing various technological advantages we can make an app more progressive, thus ending up with a higher Lighthouse score. But this is only a rough indicator.

There are some key principles a web app should try to observe to be identified as a PWA. It should be:

  • Discoverable, so the contents can be found through search engines.
  • Installable, so it's available on the device's home screen.
  • Linkable, so you can share it by simply sending round a URL.
  • Network Independent, so it will work offline or with a poor network connection.
  • Progressive, so still usable on a basic level on older browsers, but fully-functional on the latest ones.
  • Re-engageable, so able to send notifications whenever there's new content available.
  • Responsive, so usable on any device with a screen and a browser — mobiles, tablets, laptops, TVs, fridges, etc.
  • Safe, so the connection between you and the app is secured against any third parties trying to get access to your sensitive data.

Is it worth doing all that?

Absolutely! With a relatively small amount of effort required to implement the core PWA features, the benefits are huge. For example:

  • A decrease in loading times after the app has been installed, thanks to caching with Service Workers, along with saving precious bandwidth and time
  • The ability to only update content that has changed when an app update is available (with a native app, even the slightest modification can force the user to download the entire application again).
  • A look and feel that feels more integrated with the native platform — app icons on the homescreen, apps that run fullscreen, etc.
  • Re-engaging with users via system notifications and push messages, leading to more engaged users and better conversion rates.

There are many success stories of companies giving the PWA route a go, ditching native apps in favor of an enhanced website experience, and seeing significant measurable benefits as a result.

The best known success story is probably Flipkart Lite — India's largest e-commerce site rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. The AliExpress PWA has also seen much better results than the web or native app, with a 104% increase in conversion rates for new users. Given their profit increase, and the relatively low amount of work required for the conversion to PWAs, the advantage is clear.

You can check the list at pwa.rocks for more examples. Particularly worth mentioning is the hnpwa.com page — this lists an example implementation of the Hacker News website (instead of the usual TodoMVC app), in which you can see the use of various front-end frameworks.

You can even generate PWAs online using the PWABuilder website.

For service worker- and push- specific information, be sure to check The Service Worker Cookbook, a collection of recipes using service workers in modern sites.

It's well worth trying out a PWA approach, so you can see for yourself if it works for your app.

Browser support

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

The key ingredient for even starting to think about having a PWA is service worker support, which is good enough on desktop: both Firefox and Chrome fully support it, basic functionality is present in Opera, and both Edge and Safari will have it soon as it's being worked on. Service worker on mobile is supported almost the same: Firefox and Chrome for Android fully implement it, Opera Mobile only partially, and Edge and Safari Mobile support are work-in-progress.

Other features such as Web app manifest, Push, Notifications or Add to Home Screen functionality have very similar support — they work in Firefox and Chrome, Opera is catching up, and Edge with Safari are going to get there soon.

Some of those APIs are experimental, the documentation is still a draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

An example application

In this series of articles we will examine the source code of a super simple website that lists information about games submitted in the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,