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

Question

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

我使用 dataGroups:

进行设置

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

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

那么我应该挂钩并获取数据的正确位置在哪里？我已经在 app.component 和 ServiceWorker Update Service 中尝试过（它实际上与从那里调用的 app.component 相同）。

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

将此添加到什么适当的生命周期挂钩，以便它执行一个 prefetch ngsw 配置然后会知道的？

Answer 1

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

因此，当 api 由于网络连接而失败时。您可以使用存储在 localstorage.

中的数据

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

Prefetch API data (dataGroups) using Angular Service Worker

angular

service-worker

angular-service-worker