时间戳

首页 > 解决方案 > 使用 Angular Service Worker 预取 API 数据（dataGroups）

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

问题描述

我有一个需要离线工作的 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 ，因此它不会被添加到缓存中。

什么是适当的生命周期钩子来添加它，以便它执行prefetchngsw 配置将知道的？

标签： angularservice-workerangular-service-worker

解决方案

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

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

推荐阅读