Question

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

一个内/前端/
second inside / backend /

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

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

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

此设置有什么问题？我需要更改该服务工作者的文件名，或者我只能通过此设置在同一个域中拥有两个角度应用程序

Answer 1

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

例如：

来自App 1的

ngws-config.json：

assetGroups

来自App 2的

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

因为：

{ "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并删除了所有ngsw：*条目，但不包含 sw-app （或 sw-app-two ）。

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

所以我在 sw-app 内容中留下manifest，其他assetGroups条目名称包含 sw-app-two 。当我打开两个应用程序（服务器关闭）时，总会有sw-app出现（没有错误，但它只是一个没有真实内容的应用程序）。这个混合适用于一个应用程序，也不知何故混淆。

更多细节，但仍然没有解决方案。很想检查角度代码并制作公关但......至少提出问题。我确信sw-app-two在同一来源的应用之间混淆了。

PS：当您设置ngsw:db:control时，请务必检查此github问题：#8515 #8516

编辑：我创建了issue #21388

修改（2）：

this stackoverflow question
提及
Cache Storage
我将为每个应用创建一个子域，并在本地不同的端口上运行多个http服务器来测试它。这应该工作，似乎是这种用例的唯一解决方案。希望这也是你的选择！如果没有，你可以写一个评论来提升issue的 freq标签; - ）

修改（3）：

我找到了似乎有效的解决方案，但您必须在构建过程后编辑sw-app-two。只需将Cache Storage替换为应用程序唯一的名称（例如：baseHref为Service Worker scripts must be hosted at the same origin (Protocol + Domain name + Port).，ngsw-worker.js为ngsw:db:

修改（4）：

可悲的是，解决方案无法正常工作，ngsw:db:sw-app-one:键的条目（例如：sw-app-one）将被其他应用的内容覆盖...我会在issue发表评论以获取更多详细信息......

Answer 2

我认为您的第3次修改@skydever使您有所收获。

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

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

一个域中的Angular 5多服务工作者

2 个答案: