You may have heard of Accelerated Mobile Pages but what about Progressive Web Apps (PWAs)?

If you need a primer, this should help.

What are PWAs?

Simply put, they are websites that feel more like an app.

They load quickly (no App Store involved), can be added to your smartphone home screen, function offline and can send push notifications - making them much more convenient than a traditional web app.

Unsurprisingly, Google came up with the term, and PWAs are seen alongside Accelerated Mobile Pages as a weapon in the fight for slick mobile UX (fundamentally, quick and reliable loading).

PWAs were made possible by advances in JavaScript and web browsers which now support more HTML5.

How do they work?

App shell

PWA's use an app shell, which is the minimal HTML, CSS, and JavaScript required to power the user interface.

The first time you load the app, the app shell is cached on your phone.

On subsequent visits, this app shell is loaded very quickly from the local device cache, reducing the volume of data that needs to be freshly downloaded.

Service worker

The work of caching the app shell is done by a service worker.

Service workers are JavaScript files that can control a particular website by modifying navigation and resource requests. These workers decide what is cached and when.

Service workers are not exclusive to PWAs; they already enable features like push notifications.

App manifest

The manifest is a JavaScript file that controls how your website (PWA) appears to the user (for example on the device home screen), and directs what functionality can be launched and how.

Chrome on Android allows PWAs to display a banner to the user, asking them if they would like to add the app to their home screen (similar to a native app download prompt).

What are the benefits?

The benefits of Progressive Web Apps are as follows:

  • Fast & reliable: They respond quickly and can work offline
  • Engaging: The app-like UX is more enjoyable to use. 
  • Progressive: The whole point of PWAs, they are designed to work on any browser (and don't involve an app store).
  • Responsive: They are responsive websites, so can run on phone, tablet or desktop.
  • Fresh: The service worker allows the app data to be updated 'behind the scenes'.
  • Safe: Served via HTTPS.
  • Discoverable: Search engines can find PWAs.
  • Re-engageable: Push notifications.
  • Installable: Can be added to the home screen.
  • Linkable: Sharable via URL.

Do they have any downsides?

Safari has not yet implemented support for service workers, the Push API or web app manifests. That means functionality is severely reduced.

Social media apps may have their own in-app browser which doesn't support PWAs, and so sharing via social can be troublesome.

Fairly obviously, PWAs are not listed in app stores, meaning people looking there may not find your company.

Give us an example then!

Airberlin has developed a PWA allowing passengers to view their boarding pass and details about their destination.

pwa

The Washington Post also released a PWA back in May. It will roll out fully by the end of the year, aiming to be the fastest news site on the web. Check it out.

Finally, Flipkart is one of Google's most impressive case studies. India's biggest ecommerce player developed a PWA that resulted in a 70% increase in conversions.

The retailer also saw a 40% higher re-engagement rate and 3x lower data usage.

flipkart

Ben Davis

Published 6 December, 2016 by Ben Davis @ Econsultancy

Ben Davis is Deputy Editor at Econsultancy. He lives in Manchester, England. You can contact him at ben.davis@econsultancy.com, follow at @herrhuld or connect via LinkedIn.

1109 more posts from this author

You might be interested in

Comments (1)

Joe Pendlebury

Joe Pendlebury, Senior Mobile UX Architect at Next plc

Lancôme USA are another fine example of a well-designed and executed Progressive Web App. I believe their PWA was built in partnership with Mobify - http://www.lancome-usa.com/

11 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.