Angular PWA 和缓存 API

Question

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

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

当 PWA 离线时，service-worker 为我做这件事很棒，但是，缓存中的数据是我希望其他组件使用的数据。考虑到它已在缓存中准备就绪，我不想再次调用 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 来检索您的数据。我觉得他们应该是 find/determine 这个名字的更好方式。如果有人发现可以随时更新我的答案或提供您自己的答案！

例如：

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;
      });
    })
  });
}

Angular PWA 和缓存 API

Angular PWA and caching API

caching

browser-cache

typescript

progressive-web-apps

angular