Angular PWA 和缓存 API

Question

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

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

服务工作人员在 PWA 离线时为我做这件事很棒，但是，缓存中的这些数据是我希望其他组件使用的数据。考虑到它已在缓存中准备就绪，我不想再次调用 API。

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

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

Answer 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，您可以读取缓存数据。 service worker 实际上使用了那些相同的调用。要访问您保存的数据，您只需要缓存名称。

现在这是我正在努力的问题，名称不仅仅是您指定的名称。 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;
      });
    })
  });
}