Angular PWA 在没有 WorkBox 的情况下添加后台同步答案

【问题标题】：Angular PWA adding background sync without WorkBoxAngular PWA 在没有 WorkBox 的情况下添加后台同步
【发布时间】：2020-05-19 06:24:39
【问题描述】：

所以我的问题很简单：

使用 Angular PWA 时是否有后台同步。由于某些原因，我无法使用 WorkBox。

我找到的唯一信息是：https://github.com/angular/angular/issues/22145

目前仍在营业。有其他选择吗？

我觉得如果没有后台同步，制作“离线应用”是不可能的。我发现了这个https://golb.hplar.ch/2018/12/background-sync-ng.html，它告诉我有一种方法，不幸的是我对 PWA 没有太多经验，我不明白上面的链接是如何工作的/可以帮助我。

欢迎任何指南或解决方案！

【问题讨论】：

标签： angular service-worker progressive-web-apps angular-service-worker angular-pwa

【解决方案1】：

首先，将Angular从这个问题中分离出来，它与Service Worker无关。完全不同的动物。

Workbox 只是一个库，它将许多 Service Worker 缓存模式抽象为更易于管理的 API，并在浏览器支持时添加后台同步。

您可以在没有 Workbox 的情况下使用后台同步 API。我会警告你，它是一个非常复杂的 API，就像 IndexedDB 一样。

您不需要后台同步来使 PWA 脱机工作。它是完全可选的。事实上，因为只有 Chrome 和 Edge 支持后台同步，我什至不关心 API。相反，如果我需要离线同步功能，我会根据应用程序需求构建解决方案。我结合使用 IndexedDB 和 Service Worker 缓存来持久化数据。

后台同步 API 为您提供的优势是它会在用户未在应用程序甚至设备中处于活动状态的情况下启动 service worker。就在设备感觉网络再次可用时。

【讨论】：

应用程序的重点是用户没有注意到 API 调用没有进行，并且感觉他们是一个平滑的过渡。为了实现这个目标，我觉得后台同步是必须的。我也不同意 Angular 与服务人员无关的事实。我目前拥有 service-worker 的方式是将 PWA 添加到现有的 Angular 项目中。这也意味着我很难编辑 service-worker，因为它是由 Angular 在生产环境中创建的。
我要重申，UI 和 Service Worker 之间存在明显的分离。使用角脚手架或手写都没有关系。 Angular 在您的服务工作者中没有任何代码。您可以跨边界来回传递消息，我经常在我的应用程序中这样做以触发活动。您可以在后台更新。但是对于单页面应用程序，如果更新了应用程序外壳，则需要刷新页面才能加载。您可以静默获取其他资产。
老实说，我不明白这无关紧要。在此之后：angular.io/api/service-worker 似乎很明显，角度确实在创建服务工作者。是的，当然我可以手动创建它，但目前我正在使用 Angular service-worker 包。为此添加背景同步似乎很麻烦，有很多不可读的内容。完全切换到 workbox 似乎更有意义，因为您确实“从头开始”创建了 service-worker。
Angular 不会创建、编码或控制 service worker。您使用的步骤是脚手架。它只是创建了一个 starter service worker 文件。它基本上是一个空 opp shell，供您实际创建应用程序。

【解决方案2】：

@angular/service-worker 不支持后台同步 API。

功能请求被跟踪here

Angular PWA 库基于 ngsw-config.json 文件重新构建服务工作者。不建议修改这个生成的 service worker，因为它会在构建时重新构建，因此您只能任由库供应商摆布，它还不支持后台同步 API。

【讨论】：