5

我曾经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'
  ]
};

索引.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>
4

1 回答 1

1

您的服务工作者注册代码对我来说似乎很好。问题可能出在项目结构中。由于您提到根目录为 dist 文件夹，因此您的 service-worker.js 文件必须在您运行ng build脚本后位于 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 serve 不支持它。我建议您使用http-server. npm install http-server -g.然后 .http-server ./dist -o这会在默认浏览器上打开您的应用程序。

于 2017-08-27T17:34:25.127 回答