Progressive Web Apps allow us to build web experiences that previously required a native application.

Case Studies

PWA Stats is a collection of case studies, statistics and occasional news about Progressive Web Apps that you can use to convince stakeholders to build a PWA.

There are plenty more success stories that can be used as ammunition, such as Digiday's article on Forbes and Google’s showcase on Wego.

Benefits

The above-linked case studies reveal the following benefits from switching to a PWA:

  • increased revenue;
  • new revenue as a result of web push notifications;
  • increased audience size;
  • increased page impressions per session;
  • increased engagement (time-on-site);
  • increased re-engagement (people coming back, for example due to push notifications);
  • increased conversion rate;
  • decreased bounce rate;
  • improved performance (faster load times);

Definitions

Original Definition

The original definition (from the developers at Google) of a PWA is as follows:

Responsive
Fit any form factor.
Connectivity Independent
Offline features thanks to service workers.
App-like interactions
Feel like an app to the user through app-style interactions and navigation (they’re built on the app-shell model).
Fresh
Up-to-date thanks to service workers.
Safe
Served on HTTPS.
Discoverable
Manifest files identify them as apps; search engines can discover them.
Re-engageable
Push notifications bring people back to apps.
Installable
Can be installed to the home screen without app stores.
Linkable
Still part of the web – URLs still work.
Progressive
Use progressive enhancement for better experience

Technical Definition

The technical definition is that a PWA is a website that has been enhanced with:

  • https;
  • service worker; and
  • manifest

Frame PWAs in different ways for different audiences

  • For CEOs: describe the ROI;
  • For marketers: describe the Experiential Benefit;
  • For developers: talk in terms of HTTPS, service workers, and manifest.

FAO Developers: don’t worry about the hype

Some developers got turned off by the hype and asked: in what way are PWAs different from regular best practices plus Push Notifications and Manifest?

They’re missing the point:

The name isn’t for you and worrying about it is a distraction from just building things that work better for everyone. The name is for your boss, for your investor, for your marketeer.

— Frances Berriman, in ‘Naming Progressive Web Apps’, fberriman.com, 2017

Overcoming stakeholder fear, uncertainty and doubt

Question: We already have a native app, why do we need a PWA?

Use it to reach people who don’t have your native app installed or are on a different device.

Your website will likely be a person’s first experience of your company. A better web experience will likely mean more revenue and more native app installs.

Mobile web audiences are almost 3x the size of app audiences, and growing 2x as fast. (Source: comScore)

Being in the app store is no longer enough: the cost of acquisition is higher.

Native App-like things we can do on the web

Modifying the appearance using the manifest

The manifest is a simple JSON file. You use it to configure your app.

You can choose one of four display options: browser, minimal-ui, standalone or fullscreen.

You can have a startup screen with background colour.

You can choose a custom theme colour which will alter the colour of the browser chrome.

You can use media queries to target display-mode letting you set CSS rules for your PWA’s chosen display mode.

Note: be careful taking away the browser chrome’s standard features. You don't want to have to create custom back buttons etc.

Apply an app-like polish

Animate transitions.

Use Skeleton Pages for smooth pages, avoiding jumps and enhancing perceived performance.

Perceived performance matters most.

Use animations when providing immediate feedback (e.g. when filling in a heart icon).

You could go even further and use animated SVG to add personality. See Darin Senneff’s log-in form with animated monster avatar.

Other opportunities for app-like behaviour

Background Sync: Instagram's PWA uses this so that if you lose connectivity during an upload, it resumes the upload later.

The fingerprint sensor on a phone works for web, too.

You can get PhoneGap-style capabilities for Android by integrating your PWA and your Android app using Google’s Trusted Web Activity.

Installation and discovery

You “announce your PWA as a PWA” using the manifest.

PWAs don’t need an app store. (However, you can actively submit a PWA to the Microsoft Store. If you don’t, it should be passively ingested).

Make use of “Add to Home Screen” badges and banners, like Twitter do. But pick the right time (e.g. on Order Confirmation / Thank you) page) – and more people will do it.

Offline Mode

Note: service workers are key to providing an offline experience and push notifications.

By having access to the Cache API, you get i) enhanced performance; and ii) an offline fallback providing increased availability and resilience.

Workbox is a library that bakes in a set of best practices and removes the boilerplate every developer writes when working with service workers. It deals with caching and available-offline for the likes of Google Fonts, Google Analytics, CSS, JS and images.

Push Notifications

People want personalised, relevant push messages. The top three types are:

  • #1: a special offer based on my preferences;
  • #2: a breaking news alert;
  • #3: new content personalised to my preferences;
  • #3 (tied): a special offer based on my location.

Source: Localytics, 2015

Third-party services for Push Notifications:

  • Urban Airship;
  • OneSignal;
  • WebEngage;
  • Localytics;
  • CleverTap;
  • braze.

These services also provide analytics.

Ask permission at the right time

Many people are annoyed by notifications, so don’t immediately ask for permission to send them.

Twitter Lite handles asking permission to send push notifications well. They use a combination of custom prompts, browser prompts, and the ability to customise your notification settings.

Beyond PWAs

We can perform auto-login with the Credential Management API. This API lets us integrate with saved user details.

We can streamline payments by supporting Google Pay, Apple Pay, and touch using the Payment Request API. This integrates with the user’s saved cards. J Crew’s website does this.

Overall message

We can couch this in simple terms: Does your organisation have a website? If so, you would probably benefit from a PWA.

My next actions