How to build Progressive Web Apps

Last week at we talked about Progressive Web Apps. Here is the list of videos:

What are PWAs

If you have heard about Progressive Web Apps, you know how they are interesting, and the things they can bring to us. For those who don't know what it is, let's take a look at some definitions, and try to understand it more.

According to the Google Developers definition:

Progressive Web Apps have experience combining the best of the web and the best of apps. With a PWA, the user doesn't need to install anything, it's usable via the browser.

There are some characteristics a PWA has, some of them are:

Progressive: It will work for every user, not depending on the browser choice.

Responsive: It doesn't matter if you're using the PWA in a desktop, tablet or mobile. It will work regardless of the device

Safe: It should use HTTPS, content will not be tampered with

Installable: Users can add it to their home screens without using an Application Store.

Linkable: It's easy to share via a URL, does not require any complex installation

Who is using PWAs

Here is a list of some PWAs. Some big companies are using Progressive Web Apps.

The Washington Post is one example of PWA, and also Twitter Mobile. There is an article saying how they built Twitter PWA, it increased 65% pages per session.

Flipboard, Telegram, Uber, Lyft and other companies are already using PWAs in production.


Sw-precache was made by Google. It is easy because we can cache URLs, and we can cache static files by using just a path. So, we don't need to specify every path for each file. Furthermore, we don't need to worry about corner cases, they handle everything for us. It just works! In the episodes, we used sw-precache for caching static files, and we also used it at runtime.


What is a manifest? The manifest is a JSON file, we can set icons, name and the start URL from our PWA. Using a PWA we can set the app to our Home Screen. Here is the place where we choose our icon and the splash screen.

For example:

  "name": "Hello World PWA",
  "short_name": "Hello World",
  "icons": [],
  "start_url": "/index.html?utm_source=homescreen",
  "display": "standalone",
  "background_color": "white",
  "theme_color": "blue"

Gatsby and Grommet

We will also check Gatsby and Grommet to make our PWA.

Gatsby is a static site generator for React. It means we do our code in React, and it generates everything for us in HTML and JS files. A bunch of websites have been made using Gatsby, websites like Fabric, Formidable, ReasonML docs, and others.

Gatsby has a good number of plugins. For example, they have a plugin for Offline support and for helping managing the manifest.

Grommet is a design system made for ReactJS. It has some components ready for us to use. Components like Buttons, Menu, DateTime, Lists, Table and others!

We will use Gatsby and Grommet together to build our PWA.

We will build a PWA to get the DailyDrip daily video, we will cache its content and make everything available offline. It will also be possible to install the PWA in Android phones.

The Web is the biggest platform humanity has ever seen. Progressive Web Apps help build an engageable, safer and faster web. Take a look at the episodes, and let's make a better web.