离线时更新缓存存储

Question

我目前正在通过 Service Worker API 创建一个具有离线功能的应用程序。它会在用户第一次加载页面时缓存请求，如果他们失去连接，它会使用缓存来显示他们的数据。

我的需要是，我需要能够在不发生网络请求的情况下更新浏览器为当前页面存储的缓存。理想情况下，它只会缓存页面的当前内容或“状态”。

这样做的原因是用户需要能够与应用程序进行交互，这将在离线时修改 UI。如果用户不小心点击了刷新或关闭了他们的浏览器应用并返回，则从 service worker 加载的内容需要反映用户对 UI 所做的最新更改。

这可能吗？目前我正在尝试下面的代码，但它失败了，说没有互联网连接。似乎我无法使用缓存 API，因为它在设计上使用“获取”，但是否有另一种方法来更新缓存？

    async function updateCache(){
      console.log('updating Cache...');
      const cache = await caches.open('offline');//retrieve our cache for the page    
      await cache.add('/pagetocache/', { cache: 'reload' });        
    }

Answer 1

cache.add() 隐式发出网络请求以获取响应正文。您可以使用cache.put() 将您自己构建的Response 添加到缓存中。

假设您有一些方法generateResponseBody()，它返回一个有效的BodyInit（很可能是一个字符串），您可以执行以下操作：

async function updateCache() {
  const cache = await caches.open('offline');
  const body = await generateResponseBody();
  await cache.put('/pagetocache/', new Response(body, {headers: {
    // Set any headers here as needed.
    'content-type': 'text/html',
  }}));  
}