使用 Angular Service Worker 预取 API 数据（dataGroups）

Question

我有一个需要离线工作的 Angular 网站。它需要的部分内容是来自 API 的一些数据。这可能是陈旧的数据，所以我的策略是尝试 API，如果失败，则从缓存中获取。

我使用dataGroups：

"dataGroups": [
    {
        "name": "offlineData",
        "urls": [ "/api/offline" ],
        "cacheConfig": {
            "maxSize": 1000,
            "maxAge": "100d",
            "timeout": "500u",
            "strategy": "freshness"
        }
    }
]

但是，如果用户安装应用程序（使用清单）并立即离线，则缓存中不存在 API 数据，因为 dataGroups 不会预取。

那么，我应该挂钩并获取数据的正确位置在哪里？我已经在 app.component 和 ServiceWorker 更新服务中进行了尝试（这实际上与从那里调用的 app.component 相同）。

无论哪种方式，这似乎是在处理服务工作者配置之前调用 API，因此它不会被添加到缓存中。

将其添加到哪个合适的生命周期钩子，以便它执行 prefetch，然后 ngsw 配置将知道？

Answer 1

在应用初始化时，您可以将数据添加到本地存储。 localstorage 以选项卡方式存储数据。这意味着每个选项卡都会在本地存储中拥有其特定的数据。

所以当 api 由于网络连接失败时。您可以使用存储在 localstorage 中的数据。