9.2 Creating a PWA with React

Create React App

If you are using Create React App 4 (released October 2020), creating a PWA with React just go a little easier. One of the biggest changes is that you can use the Workbox InjectManifest plugin for Webpack to automatically inject your Webpack managed assets into the service-worker's precache.

It also provides a starter service-worker.js module and the registration functions.

To get all of this well thought out, automated goodness, you need to use the --template flag with CRA.

npx create-react-app my-app --template cra-template-pwa

Enable the service worker

And then in the project's main index.js module, look for this comment block ...

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.unregister()

Notice that the service worker is not enabled by default. Update to opt-in to using the service worker.

serviceWorkerRegistration.register()

Update the PWA Manifest

A default progressive web app manifest is provided at public/manifest.json. You will need to customize it with your correct app meta data: name, icons, theme colour, etc. See Google's Web App Manifest Guide for details on all of the options.

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

CRA Official Docs

Making a Progressive Web App

Practice Exercises

Basic setup

1. Create a new React project using create-react-app and the PWA template.
2. Update the manifest file to change the Name to be your name and the Short name to be your Algonquin user id.
3. Enable to service worker
4. Create a production build of the project with yarn build
5. cd into the build folder and run a node web server: npx serve
6. Open the app in a new Incognito browser window.
7. Open the Network tab in Chrome DevTools. Disable the cache and simulate offline status. Now try to reload the browser - it should still work.
8. Run the lighthouse report in Chrome DevTools. Inspect the report.
9. Open the Application tab in Chrome DevTools. Review the Manifest and Service Worker information.
10. Take a screenshot of the Manifest details in DevTools showing the Identity section and post that to our class Slack channel.

Add routing

11. Add react-router to your project.
12. Create a simple navigation with three pages.
13. Add a CSS file for each page to apply some unique styling for each of the three pages.
14. Build and test your application in offline mode.

Customize the service worker

15. Add an image file (jpeg or png) to each of the three pages. Store the images in the public/img folder.
16. Build and test your application in offline mode. Do you see the images?
17. Modify service-worker.js to add Workbox modules to cache the image assets.
18. Build and test your application in offline mode. Do you see the images?

BONUS

19. Research how you can use React.lazy and React.Suspense to trigger code-splitting.
20. Test to see if it still works in offline mode.