For a deeper discussion into service workers and scope, see the below:

Let’s close DevTools and run the Lighthouse audit again:

We’re making progress! We now have a registered service worker. Since we disabled the caching, we haven’t ticked the second box yet, but once we enable caches (when we go live) it will work!

Step 3: Add Progressive Enhancement

Progressive enhancement basically means your site will work without any JavaScript loading.

Right now, our index.html just renders an empty div (#root), which our React app then hooks into.

We want to instead display some basic HTML and CSS before the React app initializes.

The easiest way to do so is to move some of our basic HTML structure within that div#root. This HTML will be overwritten as soon as ReactDOM renders our App component, but will give the user something other than a blank page to stare at as the bundle.js loads.

Here’s our new index.html. Note both the styles in the head, and the HTML within div#root.

(As an aside, we can now delete duplicate styles in App.css and index.css — just to be clean.)

Does Lighthouse approve?

Yep!

Step 4: Add To Home Screen Capability

We can skip the requirements about https — that will be taken care of once we deploy.

Now, onto the feature that makes PWA’s particularly exciting: the ability for the user to save them to their home screen, and then open them like an app.

To do, we need to add a manifest.json file to our public directory (copy the uncommented version below this one).



// Short name is what appears on home screen

"short_name": "My First PWA",

// Name is what appears on splash screen

"name": "My First Progressive Web App",

// What appears on splash screen & home screen

"icons": [

{

"src":"icon.png",

"sizes": "192x192",

"type": "image/png"

}

],

// So your site can tell it was opened from home screen

"start_url": "/?utm_source=homescreen",

// Match our app header background

"background_color": "#222",

// What the URL bar will look like

"theme_color": "#222",

// How the app will appear when it launches (see link below)

"display": "standalone"

// Read more:

} // Short name is what appears on home screen"short_name": "My First PWA",// Name is what appears on splash screen"name": "My First Progressive Web App",// What appears on splash screen & home screen"icons": ["src":"icon.png","sizes": "192x192","type": "image/png"],// So your site can tell it was opened from home screen"start_url": "/?utm_source=homescreen",// Match our app header background"background_color": "#222",// What the URL bar will look like"theme_color": "#222",// How the app will appear when it launches (see link below)"display": "standalone"// Read more: https://developer.mozilla.org/en-US/docs/Web/Manifest

Here’s the file without comments:

Here’s the icon if you need one (courtesy of my company, MuseFind), or create your own (must be 192 by 192 pixels):

Add the icon.png and manifest.json into your public folder, and then add the following lines to your index.html:

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<!-- Add manifest -->

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

<!-- Tell the browser it's a PWA -->

<meta name="mobile-web-app-capable" content="yes">

<!-- Tell iOS it's a PWA -->

<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Make sure theme-color is defined -->

<meta name="theme-color" content="#536878">

<title>React App</title>

</head>

Alright, now how are we doing?