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

您的 Service Worker 注册代码对我来说似乎很好。问题可能出在项目结构中。由于您已将根目录提到为 dist 文件夹，因此运行脚本后，您的 service-worker.js 文件必须位于 dist 文件夹中ng build。添加"precache": "sw-precache --verbose --config=sw-precache-config.js"到您的package.json脚本对象。然后运行： ng build --prod --aot，然后npm run precache。现在您的 service-worker.js 文件将出现在 dist 文件夹中。由于 Angular 编译器已将您的应用程序代码编译为 js 文件并将其存储在 dist 文件夹中，现在您必须从 dist 文件夹为您的应用程序提供服务。但是默认的 ng 服务不支持它。我建议您使用http-server. npm install http-server -g.然后http-server ./dist -o.这将在默认浏览器上打开您的应用程序。