嘗試注冊 serviceWorker 時出現 404 錯誤

Question

嘗試注冊 Service Worker 時出現此錯誤：

注冊 ServiceWorker 失敗：獲取腳本時收到錯誤的 HTTP 響應代碼 (404)。

我正在使用 ionic，這就是我在 app.js 中的內容：

   if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      //registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  }else {
    console.log('No service-worker on this browser');
  }

在目錄中，我在同一個文件夾中的 app.js 旁邊有 service-worker.js 文件。

在 ubuntu 桌面上使用最新的 chrome 版本。

Answer 1

您提到service-worker.js與app.js位於同一目錄中，但傳遞給.register()的 URL 是相對於 HTML 文檔路徑的。 您需要確保您的service-worker.js文件與您所在頁面對應的.html文件位於同一目錄中。

Answer 2

嘗試注冊 Service Worker 和 SW.js 的 HTML 文檔應該在同一目錄中。

Answer 3

這些都是很好的回復，它幫助我解決了困惑。 我只是想添加另一件事，以防其他人遇到這個問題並且像我一樣感到困惑。

如果您使用的是 Webpack 之類的打包器，則路徑需要相對於編譯版本。

如果您的 sw.js 位於/src文件夾中，但您的 html 的編譯版本位於./dist文件夾中，並且您注冊 sw.js 的路徑是"./sw.js" ，則 service worker 將進行搜索在 sw.js 文件的 dist 文件夾中。

我對上述 Webpack 問題的解決方案是使用copy-webpack-plugin並將文件從 src 文件夾發送到 dist 文件夾。

Answer 4

您只需要將正確的路徑傳遞給 navigator.serviceWorker.register 並且它不一定需要與 html 文件相同。

例如，我的 service-worker.js 在我的應用程序的 Scripts 文件夾中，因此我需要在 navigator.serviceWorker.register 上傳遞路徑“/Scripts/service-worker.js”，例如：

navigator.serviceWorker.register('/Scripts/service-worker.js')

Answer 5

service workers 和 index.html 文件應該在一個公共目錄中。

Answer 6

嘗試使用 ~ 將源設置為在根目錄中查找
像這樣：

 navigator.serviceWorker.register('~service-worker.js')