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

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