ReactJS ServiceWorker 在多个缓存文件中存储相同的代码

Question

我正在尝试将 serviceworker 添加到具有此文件系统布局的现有 React 应用程序： Filesystem

基本上一些初始化代码存储在public文件夹中，所有重要代码都在src文件夹中。在 serviceWorker.js 文件中，我制作了一个文件名数组来缓存并在 'install' 事件侦听器中调用该数组，如果我检查 DevTools，我可以看到文件名存在于缓存中：当我在 Chrome DevTools 中预览数据但是，我看到缓存文件中的代码全部来自 index.html。事实上，我可以将任何我想要的内容添加到文件名数组中，我会在缓存存储中找到它，却发现它正在存储 index.html 代码。似乎无论我尝试将什么文件添加到缓存中，都只会加载 index.html。

ServiceWorker.js:

let CACHE_NAME = "MG-cache-v2";

const urlsToCache = [
'/',
'/index.html',
'/src/App.js',
'/monkey'
 ];

self.addEventListener('install', function (event) {
//perform install steps
event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
        console.log('Opened MG_Cache');
        return cache.addAll(urlsToCache);
    }).catch(function (error) {
        console.error("Error loading cache files: ", error);
    })
);
self.skipWaiting();
});

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

    return fetch(event.request);
})
);
});

self.addEventListener('activate', (event) => {
event.waitUntil(async function () {
    const cacheNames = await caches.keys();
    await Promise.all(
        cacheNames.filter((cacheName) => {
            //Return true if you want to remove this cache,
            //but remember that caches are shared across the whole origin
            return;
        }).map(cacheName => caches.delete(cacheName))
    );
})
})

index.html的部分：

 <script>
  if ('serviceWorker' in navigator)
   {
      window.addEventListener('load', function () {
          navigator.serviceWorker.register('serviceWorker.js').then(function (registration) {
              // Registration was successful
              console.log("ServiceWorker registration successful with scope: ", registration.scope);
          }, function (err) {
                  // registration failed :
                    (console.log('ServiceWorker registration failed: ', err));
      });
      });
  }
  </script>

Google 开发者工具预览： All files are the same

我在文件名数组中尝试了多种命名策略，但都以相同的结果结束。在这一点上，我完全不知所措。

编辑：虽然这不能解决我的问题，但我发现另一个问题可以提供一些指导。似乎服务器从未找到我请求的文件，因此 returns index.html。我尝试将 serviceWorker.js 文件放在 src 文件夹中，并将服务工作者注册移动到 App.js，但出现错误：

`DOMException: Failed to register a ServiceWorker for scope ('http://localhost:3000/src/') with script ('http://localhost:3000/src/serviceWorker.js'): The script has an unsupported MIME type ('text/html'). `

这表明服务器无法访问 src 文件夹，只能访问 public。知道为什么会这样吗？

Answer 1

我遗漏了一条我正在使用的重要信息 Create-React-App。由于文件系统的强制布局，serviceWorker必须放在public文件夹中：同时，service worker的作用域默认是它们所在的文件夹。根据this 回答，将服务工作人员的范围更改为高于其所在文件夹的级别需要添加到服务工作人员的 HTTP header 响应（不完全确定那是什么意思），并执行类似的操作假设您设置了某种形式的本地服务器。 las，到目前为止，我一直在使用 npm start 来测试我的应用程序并推送到 nsmp 以使网站上线，因此我忽略了自己做任何形式的服务器实现（我知道，我不是很聪明）。

我的修补程序是使用 npx create-react-app my-app --template cra-template-pwa 命令创建一个新的临时应用程序，从该应用程序复制与服务工作者相关的所有文件（serviceWorkerRegistration.js、service-worker.js、index.js，可能 setupTests.js)，并将它们粘贴到我的应用程序中。然后我可以简单地遵循 this 教程。现在我的网站可以离线使用了。

ReactJS ServiceWorker 在多个缓存文件中存储相同的代码

ReactJS ServiceWorker storing the same code in multiple cache files

javascript

offline-caching

reactjs

service-worker

progressive-web-apps