Angular 2 - 找不到服務工作者 - 錯誤的HTTP響應代碼（404）

Question

我使用sw-precache為Firebase托管的Angular 2應用程序生成服務工作者。

錯誤：

Service Worker registration failed:  TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

結構體

src-
  app--
     index.html    
service-worker.js
sw-precache-config.js

SW-預緩存-config.js

module.exports = {
  navigateFallback: '../index.html',
  stripPrefix: 'dist',
  root: 'dist/',
  staticFileGlobs: [
    'dist/index.html',
    'dist/**.js',
    'dist/**.css'
  ]
};

的index.html

<script>
    if ('serviceWorker' in navigator) {
      console.log(navigator.serviceWorker);

      navigator.serviceWorker.register('service-worker.js').then(function (registration) {
        console.log('Service Worker registered');
      }).catch(function (err) {
        console.log('Service Worker registration failed: ', err);
      });
    }
  </script>

Answer 1

您的服務工作者注冊碼對我來說似乎很好。問題可能出在項目結構中。因為您已經提到root作為dist文件夾，所以在運行ng build腳本后，您的service-worker.js文件必須位於dist文件夾中。 將"precache": "sw-precache --verbose --config=sw-precache-config.js"到你的package.json腳本對象中。然后運行： ng build --prod --aot ，然后npm run precache 。現在您的service-worker.js文件將出現在dist文件夾中。由於角度編譯器已將您的應用程序代碼編譯為js文件並將其存儲在dist文件夾中，現在您必須從dist文件夾中提供您的應用程序。但默認ng服務不支持它。我建議你使用http-server 。 npm install http-server -g 。然后http-server ./dist -o 。這會在默認瀏覽器上打開你的應用程序。