Progressive Web Apps allow us to build web experiences that previously required a native application.
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.
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);
The original definition (from the developers at Google) of a PWA is as follows:
- 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).
- Up-to-date thanks to service workers.
- Served on HTTPS.
- Manifest files identify them as apps; search engines can discover them.
- Push notifications bring people back to apps.
- Can be installed to the home screen without app stores.
- Still part of the web – URLs still work.
- Use progressive enhancement for better experience
The technical definition is that a PWA is a website that has been enhanced with:
- service worker; and
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.
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
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.
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.
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;
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.
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.
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
- Greenhill is already a PWA: however let’s introduce Push Notifications for the journal section.
- Read Cloud Four’s article on good Push Notification permissions UX
- Check CSS Tricks’s article on native-like animations
- Try out Workbox for typical service worker best practices and tools.
- Try out pwabuilder.com for quick-start PWA creation.
- Let’s go further with Greenhill’s PWA. Let’s define our “ideal PWA” including more advanced APIs. Let’s benchmark what we currently have, then measure the effect of the changes.