reactjs - Which files to cache in service worker created in public folder of the react app

Question

I am trying to implement PWA with firebase cloud messaging push notifications (front-end only, for testing...). The problem is there are no specific instructions on how to implement it.

For push notifications to work, I can't use the default service worker provided by npx create-react-app ./my-app --template cra-template-pwa because we need to have firebase-messaging-sw.js in ./my-app/public. Since there can only be one service worker per app, all my coding for offline behavior must also go firebase-messaging-sw.js

In a talk by Jonathan Mills, he implemented PWA using service worker in public folder. Here is the code he used:

const CACHE_NAME = 'DevReach';
// Version 0.6.5
self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache
        .addAll(['/', '/index.html', '/json/data.json', 'static/js/bundle.js'])
        .then(() => self.skipWaiting());
    })
  );
});

The problem is when I build my app, there is no file at static/js/bundle.js. Caching only index.html doesn't do me any good since the body of index.html will be empty, and react will inject the code needed to show the content.

The application code can be viewed at GitHub repo for the project.

Answer 1

等待大神答复