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 。这会在默认浏览器上打开你的应用程序。