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

Question

我在同一个域中的两个应用程序中有两个服务工作者(两个Angular 5):

• 一个内/前端/
• 第二内/后/

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

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

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

这个设置有什么问题？我需要更改该服务工作者的文件名,或者只是我在这个设置的同一个域上不能有两个角度应用程序

Answer 1

我遇到了同样的问题（重新启动浏览器后，服务器关闭 - 只是按预期从 ServiceWorker 获取数据，但混淆了）。然后，我遇到了这个问题，计算器，改变了names的assetGroups（在我的情况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/**"]
      }
    }
  ]
}

来自 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-2个条目和一个名为ngsw:db:controlleft 的条目。本条目仅包含assetGroups了的sw-app-two's ngsw-conig.json（下manifest）。再次打开sw-app后，manifestfor中的内容assetGroups变成了sw-app，sw-app-two内容不见了。

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

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

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

编辑：我创建了问题 #21388

编辑（2）：

Service Worker scripts must be hosted at the same origin (Protocol + Domain name + Port).在这个 stackoverflow 问题中提到

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

编辑（3）：

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

编辑（4）：

可悲的是解决方案并不能工作，对于项control键（如：ngsw:db:sw-app-one:control）将被覆盖在其他应用程式的内容...我会在评论问题作进一步的详细信息...