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文件夹，所以在运行{之后，您的service-worker.js文件必须位于dist文件夹中{1}}脚本。将ng build添加到"precache": "sw-precache --verbose --config=sw-precache-config.js"脚本对象中。然后运行： package.json，然后ng build --prod --aot。现在你的service-worker.js文件将存在于dist文件夹中。由于角度编译器已将你的应用程序代码编译成js文件并将其存储在dist文件夹中，现在你必须从dist文件夹中提供你的应用程序。但默认的ng服务不支持它。我建议你使用npm run precache。 http-server。然后npm install http-server -g。这会在默认浏览器上打开您的应用。

Angular 2 - 找不到服务工作者 - 错误的HTTP响应代码（404）

1 个答案: