离线更新缓存存储

Question

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

我的需求是，我需要能够更新浏览器为当前页面存储的缓存，而无需发生网络请求。理想情况下，它只会缓存页面的当前内容或 'state'。

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

所做的最新更改

这可能吗？目前我正在尝试下面的代码，它没有说没有互联网连接。似乎我不能使用缓存 API 因为它在设计上使用了 'fetch' 但是还有另一种更新缓存的方法吗？

    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()，returns 一个有效的 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',
  }}));  
}

离线更新缓存存储

Update Cache Storage while offline

javascript

google-chrome

browser-cache

service-worker