Service Worker and Manifest

This guide explains how to configure a service worker and web app manifest for your PWA

Service Worker

React Storefront automatically builds a service worker for you using Google's Workbox Webpack Plugin. It supports prefetching and caching of static assets like JavaScript bundles and images, as well as runtime caching of API responses and server side rendered content via React Storefront's router. You can further configure your service worker by editing config/webpack/workbox.config.js, but in most cases this is not needed. The service worker is automatically built when deploying to production.

Web App Manifest

The presence of a manifest.json file lets Android know that your app is a PWA that can be installed to the user's home screen. This file is located at public/manifest.json and is automatically deployed as part of the build process. Before deploying your app, you should edit this file so that it has the correct:

  • name and short name
  • icons (these can be placed in public/icons and must be listed in your manifest.json)
  • theme colors

Debugging

By default, the service worker is not built and loaded during development. Doing so slows down the client build and makes it harder to test your changes due to the increased caching. If you want to enable the service worker in development, run npm run start:sw to start your project instead of npm start.