一个域中的 Angular 5 多个 Service Worker答案

【问题标题】：Angular 5 Multiple Service Worker in one domain一个域中的 Angular 5 多个 Service Worker
【发布时间】：2018-06-04 05:36:38
【问题描述】：

我在同一个域的两个应用程序中有两个服务人员（都是 Angular 5）：

在 /frontend/ 里面一个
/backend/ 中的第二个

我正在使用 @angular/service-worker 包来管理 service worker。

当我构建 prod 版本并部署我的应用程序时，会发生一些奇怪的事情。

当我首先进入http://my.domain/frontend/ 时，我无法转到http://my.domain/backend/，因为服务人员正在加载文件并将我重定向到http://my.domain/frontend/

这个设置有什么问题？我需要更改该服务人员的文件名，或者我不能使用此设置在同一域上拥有两个 Angular 应用程序

【问题讨论】：

这不应该有任何技术原因。很可能是配置中的错误或其他问题。您能否将您的配置和生成的软件代码添加到您的问题中？这会有所帮助:)

标签： angular service-worker

【解决方案1】：

我遇到了同样的问题（重新启动浏览器后，服务器关闭 - 刚刚按预期从 ServiceWorker 获取数据，但混淆了）。然后我遇到了this stackoverflow question 并将assetGroups 的names 更改为所有应用程序之间的不同名称（我现在是2 个）。

例如：

来自应用程序 1 的 ngws-config.json：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "sw-app-app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html"],
        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
      }
    },
    {
      "name": "sw-app-assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**"]
      }
    }
  ]
}

来自 App 2 的 ngws-config.json：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "sw-app-two-app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html"],
        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
      }
    },
    {
      "name": "sw-app-two-assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**"]
      }
    }
  ]
}

因为：

The Cache Storage API (and other storage mechanisms, like IndexedDB) are shared throughout the entire origin, and by default there's no "sharding" or namespace segregation.

我的猜测是 Cache Storage 这两个应用程序都使用了这个默认名称（但还有一个哈希，这仍然让我感到困惑）。我还检查了Cache Storage 并删除了所有不包含 sw-app（或 sw-app-two）的 ngsw:* 条目。

在这些更改之后，一切似乎都运行得更好，但是在重新加载（使用活动服务器）之后，我意识到我的 sw-app 来自Cache Storage 的条目在打开sw-app-two 后消失了。只有 sw-app-two 条目和一个名为 ngsw:db:control 的条目。此条目仅包含 sw-app-two's ngsw-conig.json 的 assetGroups（在 manifest 下）。再次打开sw-app后，manifest中assetGroups的内容变为sw-app，sw-app-two的内容消失了。

所以我留下了带有 sw-app 内容的 ngsw:db:control，而其他 Cache Storage 条目名称包含 sw-app-two。当我打开两个应用程序（服务器关闭）时，总会出现sw-app-two（没有错误，但它只是一个没有真实内容的应用程序）。这种混淆适用于一个应用程序，也不知何故令人困惑。

更多细节，但仍然没有解决方案。很想检查角度代码并进行公关，但....至少提出问题。我很确定Cache Storage 会在同一来源下的应用程序之间混淆。

PS：当你设置baseHref时，一定要检查这个github问题：#8515 #8516

编辑：我创建了issue #21388

编辑(2)：

Service Worker scripts must be hosted at the same origin (Protocol + Domain name + Port). 提到this stackoverflow question

我将为每个应用程序创建一个子域，并在本地不同端口上运行多个 http 服务器以对其进行测试。这应该可行，并且似乎是此类用例的唯一解决方案。希望这也是您的选择！如果没有，您可以在issue 上写一条评论以提高频率标签 ;-)

编辑(3)：

我找到了一个似乎可行的解决方案，但您必须在构建过程之后编辑ngsw-worker.js。只需将 ngsw:db: 替换为应用唯一的名称（例如：ngsw:db:sw-app-one: 代表 sw-app-one，ngsw:db:sw-app-two: 代表 sw-app-two）

编辑(4)：

遗憾的是，该解决方案不起作用，control 键的条目（例如：ngsw:db:sw-app-one:control）将被另一个应用程序的内容覆盖...我将在 @ 处发表评论987654327@了解更多详情...

【讨论】：

非常感谢您对这种情况的调查！

【解决方案2】：

我认为您的第三次编辑@skydever 有所收获。

但是，如果您查看ngsw-worker.js 的deleteAllCahces 方法，您会发现它会删除以ngsw: 前缀开头的所有内容。因此，不要在 ngsw: 之后添加唯一的应用 ID，而是将 ngsw: 替换为 ngsw-appone:（其中 appone 是您应用的唯一应用 ID）。

因此，您在构建后编辑ngsw-worker.js 的建议似乎可行，您必须将ngsw: 替换为ngsw-your_unique_app_id:

【讨论】：