Progressive Web Apps, let your users know you care about them

Progressive Web what? 🤔

Progressive Web Apps (PWAs) is a term to describe the process of creating experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no installation required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful.

Another great thing is that it loads quickly, even on flaky networks (not everyone always has a good 3G/4G connection all the time), sends relevant push notifications, has an app icon on the home screen, and loads as a top-level full-screen experience. Just like a native app would if you download it from the store and install it on the device.

Note: Progressive Web Apps are best experienced in Google Chrome on an Android device. Unfortunately, iOS devices cannot offer the real Progressive Web App experience yet, but with this philosophy in mind, we still can get some benefits over other web apps.

What defines a Progressive Web App 📱

A Progressive Web App is a good choice if you compare it to a native app in terms of conversion, discoverability, development cost, and responsiveness. As Google states, a Progressive Web App has to be:

• Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
• Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
• Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
• App-like - Feels like an app, because the app shell model separates the application functionality from application content.
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
• Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
• Re-engageable - Makes re-engagement easy through features like push notifications.
• Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
• Linkable - Easily share the application via URL, does not require complex installation.

How to create a Progressive Web App 🔨

If you want to build a new Progressive Web App from scratch, you have a few ways to get started. You can use your favorite JavaScript framework (e.g. React, Preact, Angular, Vue), the newly released Google Web Starter Kit, or a component library like Polymer. You could also just go with plain old HTML, CSS & JavaScript — throw in a service worker and a manifest file, and you should be ready to go.

To show of the process of building one form scratch we will use Create React App. Be sure to open your terminal as an administrator (and of course have Node.js installed).

npm install -g create-react-app

Install the create-react-app command line tool:

create-react-app my-pwa
cd my-pwa/
npm start

Start a new project called "my-pwa". It should fire up localhost on port 3000.

By default, a new create-react-app project will have an offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.

To explore other ways to create a Progressive Web App, Addy Osmani from Google has created HNPWA, where you will find a lot of examples and code bases.

How to measure a Progressive Web App 🔎

You can measure your application by hand, for example, to check load times, change connectivity, check paint-times in Google Chrome Developer tools. Or use tools as Google Lighthouse to do the measurements for you automagically ✨

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page (public or requiring authentication.) It has audits for performance, accessibility, progressive web apps, and more.

Install the Lighthouse extension for Google Chrome, and run it on the page that serves your newly created Progressive Web App. In our case, it's the my-pwa React application.

You'll get the following scores (of course the outcomes may differ):

• Progressive Web App 82
• Performance 66
• Accessibility 91
• Best Practices 85

For every score, the report will contain ways to improve your application to convert it towards the Progressive Web App standard.

Case studies 🎓

Since coining the term Progressive Web Apps, Google has done a lot of collaborations with big companies to discover the real power of the philosophy and practices that come with it.

They worked with Forbes, The Washington Post, The Guardian, and a lot of other companies.

Twitter, for example, saw good results with their Twitter Lite PWA (nowadays their standard web app).

• 65% increase in pages per session
• 75% increase in Tweets sent
• 20% decrease in bounce rate
• Increased engagement with “Add to Homescreen” prompt and web push notifications
• Lowered data consumption
• Nearly instant loading with service worker scripts

You can read the other case studies here.