如何在Angular 5+；服务人员？

在Angular service worker实现的早期版本中，配置选项之一是“路由”。这可以在这里看到，在这里被引用，剩下的最好的文档似乎是（Angular团队的）以及Alex Rickabaugh（谷歌的）的

在Angular 5中，

ServiceWorkerModule

已经构建得很好，现在可以使用

ngsw config.json

文件处理大部分配置。但是，在中的任何位置或中，都不再提及如何处理路由重定向。因此，我最终遇到了以下问题：当我访问我的应用程序并离线时，我仍然可以直接访问该应用程序：。然而，在加载时，应用程序会重定向到

搜索路径，大多数用户会尝试从URL加载，比如（为了简单起见，我现在只说Chrome desktop&mobile，如果可能的话，请改名为Chrome desktop&mobile）

当您尝试在脱机状态下访问该URL时，会立即得到504-网关超时。这是因为服务工作者只缓存了索引，而不知道其他路由应该重定向到该索引以便它可以加载。我相信Angular service worker实现的先前迭代可以通过为给定路由设置指向索引的重定向来处理这种情况在当前的Angular 5+
ngsw config.json
文件或生成的
ngsw.json
文件中，是否有办法处理此重定向？除此之外，如何在单独的service worker JS文件中处理变通方法；DR:我发现至少有两个问题导致我的箱子破损；您现在可以使用来尝试我的修复，并看到应用程序脱机工作。需要进一步的测试和拉取请求


虽然我无法找到一个有文档记录的答案，但以下是我到目前为止所能找到的，通过逐步浏览
ngsw worker.js
文件，以及阅读
@angular/service worker
提交历史记录

“路由”的新
ServiceWorkerModule
方法是接受任何“导航”请求（即同一域上的非索引路由），然后重新运行
handleFetch
方法，但现在指向
index.html
请求（）。这应该可以正常工作，因为SPA应该能够在检索到索引的缓存文件后重定向到URL

因此，导致我上面的站点脱机时失败的问题一定与路由没有直接关系，到目前为止，我发现了2个。通过一种变通方法纠正这些问题，我的应用程序基本上可以按预期工作。使用原始问题中的复制步骤，现在正在运行，而我在上复制了原始的失败站点

问题：

Angular应用程序的托管版本（其中从CLI设置了
--base href
标志）列出了其服务工作者资源的绝对URL。将请求与这些资源进行比较时，
ngsw worker.js
需要相对URL



我很有信心这个问题需要解决，我将处理一个请求来解决它。发生这种情况是因为在生成
ngsw.json
时，
baseHref
被包括在资源URL中（）

根据我的经验，
ngsw worker.js
可能存在的3个可用“状态”中，
现有的客户机似乎设置不正确


,
我对这种变化不太有信心，因为我无法始终看到是什么导致了这种状态。但是，如果&当服务工作者进入此状态时，
ngsw-worker.js
将不再尝试检索缓存的资源（），并且在我在似乎“正确”的情况下进行的测试中，即使唯一的更改是删除internet连接，应用程序仍会进入此状态

我为问题1准备了一份PR，并等待理解问题2的帮助，但我正在使用一个变通构建脚本在生成后修改
ngsw-worker.js
。警告：这很难看&肯定会修改设置
现有\u客户端\u的预期“安全”行为。但是，对于我的应用程序，它确实允许在本地运行（
http服务器
）和部署到实时URL（在我的例子中是GitHub页面）时获得正确的脱机性能

使用解决方法：
（角度5，根据角度5.2.1进行试验）

npm在文件中安装替换--保存开发人员
包括在您的应用程序中，例如在
build/fix sw.js
在您的
包.json中：

在本地运行
npm运行软件构建
cd区
http服务器-p8080

以及在发送到服务器之前为您的实时URL准备构建（例如，使用）
npm运行sw build live
我不得不处理这件事好几天，虽然我没有使用路由，只是一个非根用户href。我将分享为我工作的配置，它至少有机会为路由应用工作，因为每当我尝试使用
route/ngsw/state
进行调试时，我都会得到我的应用

这是一个脱离主站点的“子应用程序”，直接链接到
http:///route/index.html
webmanifest只是提供服务，所以不知道或关心angular对事物做了什么，所以它明确地包括了子路由。
“范围”：“/route/”，
“开始url”：“/route/index.html”，

angular.json设置了baseHref，因为整个应用程序都是在这一模式下运行的，而这正是base href的用途：
“baseHref”：“/route/”，

ngsw-config.json是一个棘手的问题，因为它使用自己的模式在部署文件夹中查找要添加到ngsw.json的文件，所以在其中添加baseHref或使用相对路径之类的操作会中断
"scripts": {
   ...
   "sw-build": "ng build --prod && node build/fix-sw",
   "sw-build-live": ng build --prod --base-href https://your-url.com/ && node build/fix-sw"
   ...
}

npm run sw-build
cd dist
http-server -p 8080
npm run sw-build-live