Angular Service Worker 更新多个域

Posted 2023-02-25

【中文标题】Angular Service Worker 更新多个域

【英文标题】：Angular Service Worker update on multiple domains

【发布时间】：2020-06-20 21:26:37

【问题描述】：

上下文

我们目前正在使用 Angular 构建我们的应用程序。这个应用程序由多个域提供服务，并根据用户所在的域提供不同的颜色和内容。但它是同一个 Angular 应用程序。

为了提供速度和一些离线体验，我们设置了运行良好的服务工作者。我们使用以下代码在应用更新时向我们的用户显示一个对话框，然后自动重新加载页面：

export class ApplicationService 
  constructor(private dialog: DialogService, private worker: SwUpdate) 
    this.worker.available.subscribe(event => 
      this.dialog.updateApplication();
    );
  

问题

由于应用在多个域上提供服务，这也意味着每个域都在管理自己的基于域的缓存。

例如，当用户导航到domain-a.com 并且有新版本可用时，将显示对话框并刷新页面，这没关系。

但是，如果同一个用户现在导航到domain-b.com，他会遇到同样的事情，这不是我们想要的。由于这是同一个应用程序，我们理想情况下希望所有域都与新版本保持同步。

所以问题是：这甚至可能吗？如果是，我们可以实施哪些策略来解决这个问题？

编辑

这是我的清单的部分内容以及我的 service worker 配置：

ma​​nifest.webmanifest

  "name": "my-project",
  "short_name": "my-project",
  "theme_color": "#277f31",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [...]

ngsw-config.json

  "index": "/index.html",
  "assetGroups": [
    
      "name": "app",
      "installMode": "prefetch",
      "resources": 
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      
    , 
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": 
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      
    
  ]

【问题讨论】：

如何在清单文件中定义根目录以及如何定义要在 service worker 中缓存的 URL？

@Francesco 感谢您的回复。我编辑了我的问题以包含我的文件配置的内容。如果您需要更多信息，请告诉我

【参考方案1】：

您使用不同的域，PWA 必须遵守 Same Origin Policy 限制。 Service Worker 脚本 URL 的来源必须与调用 register() 方法的页面的来源相同。同源策略也会影响 Cache 或 IndexedDB 的范围。

在您的情况下，您可以有一个根域，您可以在其中注册服务工作者，并在其下注册一系列子域/路径。 喜欢：domain.com/domain-a 和 domain.com/domain-b。这样，您仍然应该能够根据选择的最终路径提供不同的用户体验，并且您可以在所有子域之间使用集中式软件和缓存。

我还建议您阅读this article，他们建议不要将网站划分为不同的来源。