部署React应用程序时，服务工作者未缓存文件

Question

我的github回购的链接如下：https://github.com/noumanmalik960/quiz-app-pwa

这里是Service Worker文件代码：

const CACHE_NAME = "cache-v1"
const urlsToCache = [
  '/',
  '/index.html',
  '/static/js/bundle.js',
  '/static/js/0.chunk.js',
  '/static/js/main.chunk.js',
  '/manifest.json',
  '/static/media/bg.759ecf3a.jpg',
  '/images/logo.png'
]


self.addEventListener('install', function (event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function (event) {
  if (!navigator.onLine) {

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


})

Answer 1

缓存列表为空的原因是缓存列表中提到的文件不存在。检查下面的屏幕截图。如果您在缓存列表（服务人员中）中提到的任何文件丢失或浏览器无法找到，则它将创建缓存条目，但无法缓存任何文件。

修复您上面提到的文件url，然后您的服务人员将按预期工作。