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-precache-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 注册码似乎没问题 me.The 问题可能出在项目中 structure.Since 你提到根目录是 dist 文件夹，你的 service-worker.js 文件必须在运行 ng build 脚本之后的 dist 文件夹。将 "precache": "sw-precache --verbose --config=sw-precache-config.js" 添加到您的 package.json 脚本 object.Then 运行： ng build --prod --aot，然后 npm run precache。现在你的 service-worker.js 文件将出现在 dist folder.Since 中 angular 编译器已经将你的应用程序代码编译成 js 文件，并且将其存储在 dist 文件夹中，现在您必须从 dist folder.But 提供您的应用程序，默认 ng serve 不支持 it.I 建议您使用 http-server。 npm install http-server -g。然后 http-server ./dist -o。这会在默认浏览器上打开您的应用程序。

Angular 2 - 未找到服务工作者 - 错误的 HTTP 响应代码 (404)

Angular 2 - Service worker not found - A bad HTTP response code (404)

javascript

angular

firebase

sw-precache