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

  • Note: Progressive Web Apps are best experienced in Google Chrome on an Android device.
  • As Google states, a Progressive Web App has to be:

    If you want to build a new Progressive Web App from scratch, you have a few ways to get started.

  • 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.
  • Install the Lighthouse extension for Google Chrome, and run it on the page that serves your newly created Progressive Web App.
  • 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.

What are progressive web apps? Why should I use them?

@JavaScriptKicks: Progressive Web Apps, let your users know you care about them by @0x1ad2 #javascript #reactjs via @JavaScriptKicks

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.

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:

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).

Install the create-react-app command line tool:

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.

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):

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

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).

You can read the other case studies here.

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