使用 Angular Service Worker 预取 API 数据(数据组)

Prefetch API data (dataGroups) using Angular Service Worker

我有一个 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 配置然后会知道的?

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

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

中的数据