Let’s do a quick recap of what we have learnt so far. For an app to be progressive, it needs to have the following requirements:

a manifest file — manifest.json

service worker with at least a fetch event — serviceworker.js

icon — icon.jpeg

served over HTTPS — https://www.myawesomesite.com

In this tutorial, I will be talking about requirements 1 and 2 — creating a manifest file and registering a service worker.

Objective

For this example, we are going to create a simple progressive web app. The complexity is kept intentionally simple so that we can focus on the concepts of a progressive web app. You should be able to take these concepts and apply them in your own Angular, React, Vue or vanilla JavaScript app.

We are going to create a meme engine. We will pull the latest trending memes from giphy.com and display them in our app. A user should be able to view the images even if the connection is down. Hence, we are providing a seamless offline experience.

Let’s make it progressive

Step 1: Manifest file

As you may recall from part 1, the manifest file is a json file. It has meta information about the app like icon name, background color, the name of the app, etc. Here is a manifest.json file with these parameters:

You can also use a tool to generate this. Here is a tool that I found useful:

Web App manifest generator

Adding it to our app is simple. Add the following line to index.html :

<link rel="manifest" href="/manifest.json">

Step 2: Service Worker

Let’s create the file serviceworker.js . First, we are going to register the service worker on install. Then we will cache some static assets such as styles.css and app.js. Next, we need to provide offline capability using fetch . Here is what the serviceWorker.js looks like:

Let’s break this down. A service worker will help us cache data and fetch resources. If we have data in our cache, we return the data from cache or else fetch it from the network. For your own app, think of what functionality you will need to provide for offline access. Then, cache resources accordingly. For my case, I want to show previously cached images when the network is down.

We will need to add this to our index.html. To add it, we will register the service worker by leveraging the browser’s navigator library:

Let’s verify that it actually has been registered. Click on the network tab in the browser and go to application settings. This tab is really helpful when developing a progressive web app. Reload the page, and you will be able to see a service worker in this tab.

Service Worker has been registered

Now let’s refresh the browser. In the first load, data will be cached by the service worker. Try turning the connection off. We will still be able to view images.

Our app is now available even offline! If you have enabled HTTPS and uploaded an icon, congratulations you now have a Progressive Web App!

Next Steps

If you are interested in developing your own progressive web app, I would highly recommend checking out this codelabs by Google Developers.

Our mission: to help people learn to code for free. We accomplish this by creating thousands of
videos, articles, and interactive coding lessons - all freely available to the public. We also have
thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services,
and staff.