Как кешировать приложение React в сервисном работнике

Question

Я пытаюсь создать React PWA с нуля.Пока мой проект выводит минимизированные файлы в папку dist/js.

В моем файле рабочего сервиса я использую Workbox для предварительного кэширования приложения.Пока это мой параметр:

importScripts("./node_modules/workbox-sw/build/workbox-sw.js");

const staticAssets = [
    "./",
    "./images/favicon.png",
]

workbox.precaching.precacheAndRoute(staticAssets);

В настоящее время, если я включаю offline из dev tools> Service Workers, он выдает эти ошибки и приложение не может загрузить:

3localhost/:18 GET http://localhost:8080/js/app.min.js net::ERR_INTERNET_DISCONNECTED
localhost/:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
3:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED
logger.mjs:44 workbox Precaching 0 files. 2 files are already cached.
5:8080/manifest.json:1 GET http://localhost:8080/manifest.json net::ERR_INTERNET_DISCONNECTED

Как я могу это исправить?

Answer 1

это означает, что ваши ресурсы не кэшируются должным образом, вам нужно добавить их в кеш, прежде чем обращаться к ним, рабочая среда по умолчанию сделает это за вас.он показывает 2 кэшированных файла, так как они присутствуют в вашем массиве, ожидаемый результат такой же, как и для всех остальных.

const staticAssets = [
    "./",
    "./images/favicon.png",
    "./js/app.min.js",
    "./manifest.json",
    { url: '/index.html', revision: '383676' }
]

вы можете попробовать добавить EventListener,

self.addEventListener('install', event => {
  console.log('Attempting to install service worker and cache static assets');
  event.waitUntil(
    caches.open("staticCacheName")
    .then(cache => {
      return cache.addAll(staticAssets);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request)
  .then(function(response) {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});