# Progressive Web Applications

## Summary


A Progressive Web App (PWA) is a web app that uses the latest advances in web technologies and browser support to deliver users an app-like experience. Like any traditional mobile app, a PWA can be launched from an icon installed on the mobile home screen, data can be cached for offline use and can receive push notifications even when the browser is closed. PWAs don't have a navigation bar or URL bar usually seen in web browsers. Thus, they can deliver the same fullscreen experience as mobile apps. 

Compared to mobile web, PWAs have better performance and thereby improve user retention and engagement. At the same time, unlike native apps, they don't need long downloads and installs. They're also easier to deploy and maintain since developers don't have to worry about different versions of the app out there.

## Discussion

### Why do we need PWA?

The next billion users to come online will be from the developing world and they are likely to do so from their smartphones rather than desktops. They are likely to consume rich multimedia and do voice-based searches. They're also likely to use low-end devices with limited memory, storage and processing. 

53% of users leave a page that takes longer than 3 seconds. An average mobile web page takes 19 seconds to load on a 3G connection. Among Indian mobile users, 33% run out of storage every day. 79% of shoppers won't return to slow sites. 20% users are lost at every step of native app installation process. 

Hybrid apps tried to bring app-like experience by wrapping web apps into installable mobile apps but this approach may give way to PWA. Many others tried to deliver app-like experiences but sacrificed web linkability in the process. What we need is a way to improve user experience even on low-end devices with limited memory and slow or no connections. PWA aims to deliver this.


### What's so "progressive" about PWA?

PWA are web apps that "progressively change with use and user consent to give the user a more native-app-like experience." Unlike native apps, PWA don't ask users upfront permissions to install the app or access private data. PWA involves minimum friction for users. If the user is happy with the website, she can choose to add it to the homescreen. The site earns the right to become an app. It becomes progressively an app. 

If new features are introduced into web standards (example, Payment Request API, Credential Management API or WebVR), and when browsers support them, and when apps start using them, the entire experience becomes richer and more progressive for users. The experience is seamless. It doesn't involve new installs. Users can continue using older versions of browsers until they are ready. We call this *progressive enhancement*. This means that even on browsers that don't support service workers, progressive enhancement allows those browsers to display content. It's been said that progressive enhancement is the opposite of graceful degradation. 

Let's also note that publishers can deploy a PWA without the approval process that native apps go through to get listed on an app store. 


### What are the key enablers of PWA?

We can identify three key enablers of PWA:

    + **Service Workers**: These cache data, serve data from cache in offline mode or when downloading fresh content in the background, and enable push notifications. While service workers do caching for offline mode, they also bring reliability in the face of varying network conditions. We can view service workers as proxies implemented in JavaScript. These are proxies listening for network activity, intercepting them and handling them programmatically.
    + **Application Shell Architecture**: The app's layout is already with the service worker and hence this can be shown to user while content is being downloaded in the background. Thus, the "app shell" is almost instantly shown to the user without any waiting time. We can think of this shell as minimal HTML, CSS and JS without the dynamic content. App shell is not a Web API but really a design approach that works nicely with the capabilities of service workers.
    + **Application Manifest**: This tells the browser that the mobile website can be installed as an app.

### What are the characteristics of a good PWA?

In general, Google states that a delightful web experience needs to be fast, integrated, reliable and engaging. To quality as PWA, an app should have the following characteristics: 

    + **Progressive**: Works across browsers and enabled with progressive enhancement.
    + **Responsive**: Works on a variety of devices of different form factors.
    + **Connectivity-independent**: Service workers make this possible by serving from cache.
    + **App-like**: Browser tabs and navigation are replaced with app shell architecture and app style navigation.
    + **Fresh**: Service workers keep dynamic content up to date.
    + **Safe**: All communication is over HTTPS.
    + **Discoverable**: Manifest file allows them to be identified as PWA. Search engines can find them.
    + **Re-engageable**: Push notifications keep user engagement and retention high.
    + **Installable**: Add to homescreen without requiring download and install via an app store.
    + **Linkable**: Deep link to specific pages within the app. Power of web linking is not sacrificed.

### Is PWA a new web standard?

No. Making a PWA is simply using existing web standards and adopting certain best practices to improve user experience. PWAs combine the best of the web and native apps. 

Having said that, browsers and platforms can recognize an app as PWA and give it special handling. For example, they may make it easier to add a PWA to homescreen, list it among installed native apps or even add it to their app stores. 


### What tools and techniques are available for building a PWA?

Since PWA uses an app shell, it's important to keep the shell minimal. The app infrastructure and UI should be separated from the data. The former can be cached and only data needs to be fetched when changes occur. 

The use of PRPL pattern is common when building a PWA. Polymer templates can be used for this. HTTP/2 server push and/or the use of `<link rel="preload">` can improve performance. Code splitting and lazy loading have been suggested. Feature detection and CSS fallbacks can help in delivering progressive enhancements. Consider using Knockout for small projects. 

The Application tab of Chrome Developer Tools is useful during development. It also comes with Lighthouse, which can give a PWA conformance score for your app. HN PWA is a useful reference that has Lighthouse scores of different frameworks. The Service Worker Cookbook, PWABuilder, Workbox, sw-precache and sw-toolbox are useful resources. In Chrome or Opera, `chrome://serviceworker-internals` can be useful. Osmani and Gaunt mention other useful tips and tricks. 


### Can I use PWA along with Accelerated Mobile Pages (AMP)?

PWA loads an app shell first while service workers download and cache the dynamic content in the background. Cache helps when users revisit the page but PWA does not cut down on load time for the first access. This is the problem that Accelerated Mobile Pages (AMP) aims to solve. 

AMP gives the experience of "instant" loading of content at first access. They achieve this by statically laying out content and avoiding JS execution. In addition, AMP caches content for subsequent requests. AMP is suitable for static content but when dynamic functionality is required (push notifications, web payments, etc.) PWA is more suitable. 

In fact, AMP can work nicely with PWA. Different models have been proposed: **AMP as PWA**, **AMP to PWA**, **AMP in PWA**. Thus, AMP and PWA should be seen as complementary technologies. As an example, AMP HTML can be the canonical data format that's downloaded and cached by PWA service workers. Alex Russell says of AMP and PWA, 

> AMP gets content in front of users fast. PWA deliver reliable performance for re-visits.


### How does PWA relate to Single Page Applications (SPAs)?

SPAs are heavy on JavaScript and regardless of the framework of choice they use the App Shell Architecture. Shell is served first to the user while JavaScript downloads and displays dynamic content to complete the view. SPAs can now benefit by adopting PWA to precache content, sync to dynamic content in the background and reuse content from cache. This means that SPAs are fundamentally unchanged but they are powered by PWA best practices to give better user experience.

In fact, SPAs usually load only data and render them on the client side. With PWA, server-side rendering is preferred. Client-side rendering should be kept minimal to improve user experience. 

Some claim that you need an SPA to build a PWA. In other words, a site that already has an app-like interface will be easy to transition to PWA. However, Condé Nast makes the point that it's perfectly possible to build a PWA without it being an SPA. 


### How is browser and platform support for PWA?

Since PWA is based on web standards, developers need to consider support for those standards. This would include parsing a manifest file, adding to homescreen, supporting service workers and so on. As of November 2017, Google Chrome and Mozilla Firefox support it but Safari doesn't. Jake Archibald maintains current support for service workers in browsers.

There's no consensus on menu items such as "Add to Homescreen", which may be phrased differently in each browser. 

Where cross-browser support is lacking, a native mobile app may be better than a PWA. It's also been suggested that having an app as PWA plus native or hybrid variants may give users more choice. 

React, Preact, Angular and Vue.js are some examples of platforms that have support for service workers and app manifest file generation. 


### Are there good examples of PWA?

A curated list of ten PWA apps includes Ali Express, Flipkart Lite, Wego, Trivago, Flipboard and Telegram. Flipkart Lite is an e-commerce app from India. Air Berlin that allows for online check-in and displays cached boarding cards in offline mode. Twitter, Lyft, Uber and Starbucks are some big names that have taken the PWA route. Other PWA examples include Wired, The Washington Post, The Guardian, The Weather Company, Forbes and Financial Times. AirHorner showcases PWA capabilities well. 


### Has PWA proven itself in the real world against web apps and native mobile apps?

Here are some success stories:

    + Twitter Lite, built as PWA with React and Node.js, has achieved 75% increase in tweets and reduced data usage by as much as 70%.
    + Google PWA install banners have 5-6x more conversions than native install banners.
    + The Weather Channel achieved 80% faster loading with PWA.
    + Lancôme's PWA version of its e-commerce site gave 84% decrease in time to interaction and 17% increase in conversion.
    + India's MakeMyTrip saw conversion rate triple and a 160% increase in shopper sessions.
    + Alibaba's PWA has brought 76% rise in conversions and four times higher interaction rate.
    + Forbes has seen a 100% increase in session duration and more 43% more sessions per user.

### Is PWA only for the mobile world?

No. PWA can be used to enhance desktop experience as well. Samsung DeX is an example of this. While Chrome for Android supports PWA, desktop version of Chrome will also start supporting PWA in 2018. If we consider VR experiences within a browser using WebVR, PWA can enable these on mobile as well as desktop. 

## Milestones

2011

It becomes possible to bookmark web apps to the homescreen. 

Oct  
2014

Web app manifest is now a JSON file allowing us to specify app name, icon and how the app should be launched. The implies that we no longer need to give configuration in the `head` part of the HTML page. 

Dec  
2014

Chrome starts supporting service workers. 

Jun  
2015

Google engineer Alex Russell explains PWA. 

May  
2016

Google announces PWA. 

Oct  
2017

Mozilla announces that will embrace PWA, starting first with Android. Firefox has supported service workers and push notifications since 2016.