React PWA Service Worker 在本地工作，但在 Netlify 上托管时不能答案

【问题标题】：React PWA Service Worker works locally, but not when hosted on NetlifyReact PWA Service Worker 在本地工作，但在 Netlify 上托管时不能
【发布时间】：2021-04-17 21:09:31
【问题描述】：

我正在尝试了解有关 PWA Service Workers 的更多信息，并希望在我正在开发的这个个人项目网站上实现该功能。当我在 Localhost 上运行 Google 的 Lighthouse 时，start_url passes and responds with a 200 offline and registers a service worker.

但是，当我将更改推送到我在 Netlify 上托管的 Github 并运行相同的 Lighthouse 测试时，我得到：start_url does not respond with a 200 when offline. Timed out waiting for start_url to respond. Does not register a service worker that controls page.

这是我在 index.html 中的脚本：

 <!-- PWA SERVICE WORKER SCRIPT -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('worker.js').then(function(registration) {
          console.log('Worker registration successful', registration.scope);
        }, function(err) {
          console.log('Worker registration failed', err);
        }).catch(function(err) {
          console.log(err);
        });
      });
    } else {
      console.log('Service Worker is not supported by browser.');
    }
  </script>

这是我的 manifest.json：

{
  "short_name": "Arc-teryx",
  "name": "Arc-teryx using Contentful/Graphql",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

这是我在公共文件夹中的 worker.js 文件：

let CACHE_NAME = "Arc-teryx";
let urlsToCache = ["/", "/completed"];

// Install a service worker
self.addEventListener("install", (event) => {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME).then(function (cache) {
      console.log("Opened cache");
      return cache.addAll(urlsToCache);
    })
  );
});

// Cache and return requests
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      // Cache hit - return response
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

// Update a service worker
self.addEventListener("activate", (event) => {
  let cacheWhitelist = ["Arc-teryx"];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

任何人都可以看到我可能做错了什么并指出我正确的方向以进行修复吗？

链接到Repo

Netlify 链接：Project

谢谢！

【问题讨论】：

标签： reactjs progressive-web-apps service-worker netlify

【解决方案1】：

令人惊讶的是，我一直在尝试解决这个问题，而我一发布它，30 分钟后就解决了。

无论如何，如果这对可能遇到类似问题的其他人有所帮助，这就是我的解决方案。

我在 worker.js 文件中将 let urlsToCache = ["/", "/completed"]; 更改为 let urlsToCache = ["/"] 以及 manifest.json 中的 "start_url": "." 到 "start_url": "/"

【讨论】：