一个域中的 Angular 5 多个服务 worker

Question

我在同一个域的两个应用程序中有两个服务 worker (都是 Angular 5):

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

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

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

当我首先进入 http://my.domain/frontend/我不能去 http://my.domain/backend/因为服务人员加载文件并将我重定向到 http://my.domain/frontend/

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

Answer 1

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

例如:

来自 App 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/**"]
      }
    }
  ]
}

来自应用 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/**"]
      }
    }
  ]
}

因为:

Cache Storage API(和其他存储机制，如 IndexedDB)在整个源中共享，默认情况下没有“分片”或命名空间隔离。

我的猜测是，这两个应用程序的 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 后，assetGroups 的 manifest 中的内容更改为 sw-app 并且sw-app-two 内容不见了。

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

一些更详细的信息，但仍然没有解决方案。很想检查 Angular 代码并进行 PR，但是......至少提出一个问题。我很确定 Cache Storage 会在同一来源的应用程序之间混淆。

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

编辑:我创建了issue #21388

编辑(2):

Service Worker 脚本必须同源托管(协议(protocol) + 域名 + 端口)。 在 this stackoverflow question 中提及

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

编辑(3):

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

编辑(4):

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