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

您的服务人员注册代码对我来说看起来很好。问题可能出现在项目结构中。由于您提到根目录为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。这会在默认浏览器中打开您的应用程序。