Angular PWA 和缓存 API答案

【问题标题】：Angular PWA and caching APIAngular PWA 和缓存 API
【发布时间】：2020-05-01 23:39:02
【问题描述】：

我使用 Angular 制作了一个 PWA。 PWA 工作正常，缓存工作。离线时，所有需要的 API 调用都会保存到缓存中，并由 service worker 访问。

我的问题很简单，如何通过命令访问这些数据。

当 PWA 离线时服务人员为我执行此操作非常棒，但是缓存中的这些数据是我希望其他组件使用的数据。考虑到它已经在缓存中，我不想再次调用 API。

我正在研究不同的选项，但我真的找不到任何结论性的东西。缓存 API 看起来很有趣，但我不知道 Angular PWA 是否就是这样保存数据的。

那么，有人知道如何访问 service-worker 使用的缓存数据吗？

【问题讨论】：

你的问题看起来很有趣，即使我也在寻找相同的答案，请看看这个developers.google.com/web/fundamentals/instant-and-offline/…它可能会有所帮助
所以从这个来源我假设一般来说是服务工作者或 PWA。使用缓存 API？
@AkhilNaidu 那么你知道服务工作者创建的缓存名称吗？这是一致的吗？我们可以选择吗？

标签： angular typescript caching progressive-web-apps browser-cache

【解决方案1】：

在我的 ngsw-config.json 文件中，我在其中删除了我的数据组。我给小组起了一个名字，在本例中是“mission-api”。

"dataGroups": [
  {
  "name": "mission-api",
  "urls": ["https://12goappapi.azurewebsites.net/api"],
  "cacheConfig": {
    "strategy": "freshness",
    "maxSize": 20,
    "maxAge": "1h",
    "timeout": "5s"
    }
  }
]

使用兑现 API，您可以读取缓存的数据。服务工作者实际上使用这些相同的调用。要访问您保存的数据，您只需要缓存名称。

现在这是我在苦苦挣扎的时候，名称不仅仅是您指定的名称。 ngsw-worker.js 在名称前添加了一堆前缀，以确保名称是唯一的。

就我个人而言，我必须打开浏览器并查看名称。

当您找到相应的名称时，您可以使用缓存 API 来检索您的数据。我觉得他们应该是查找/确定此名称的更好方法。如果有人发现可以随时更新我的答案或提供您自己的答案！

例如：

if ('caches' in window) {
  console.log('CACH API ENABLED IN BROWSER');
  caches.open('ngsw:/:1:data:dynamic:mission-api:cache').then(cache => {
    cache.match('https://12goappapi.azurewebsites.net/api/missions').then(res => {
      res.json().then(result => {
        console.log(result);
        this.missions = result;
      });
    })
  });
}

【讨论】：