Service Worker 创建的 Cache Storage 在下线刷新页面后消失

Cache Storage created by service worker disappears after going offline and refreshing page

我正在尝试为我的网络应用程序实现离线功能,但我在离线时遇到了一些奇怪的行为,这可能是我遗漏的东西,因为它在 Chrome 和 Firefox 中都可以重现。

我将在下面描述我创建的 sample app 的作用:

重现步骤

  1. 打开一个新的 Chrome 选项卡并打开控制台视图。
  2. 导航到 sample app(托管在 Netlify 上)。
  3. 观察确认服务工作者安装和激活的日志消息,以及应用缓存存储的创建和填充。
  4. 转到开发人员工具中的应用程序选项卡并确认缓存已创建并填充
  5. 在“Service Worker”下启用“离线”以使网络不可用。
    • 或者只是关闭您的 wifi/network。
  6. 刷新页面。

观察到的行为

预期行为

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Vanishing cache storage test</title>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then((registration) => {
                        console.log('Service worker registered sucessfully:', registration);
                    })
                    .catch((error) => {
                        console.error('Failed to register service worker:', error.stack);
                    });
            });
        }
  </script>
</head>
<body>
  <h1>Hi!</h1>
</body>
</html>

服务人员

const CACHE_NAME = 'MyCache';

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        return cache.add('/');
      })
      .then(() => {
        console.debug(CACHE_NAME, 'created and populated');
      })
  );
});

self.addEventListener('activate', (event) => {
  console.debug('SW activated');
});

OS + 浏览器版本

Google Chrome 版本: 87.0.4280.141 (正式版) (x86_64) Firefox 版本:85.0b5(64 位,开发版) OS: macOS v11.1 (大苏尔)

问题

这是预期的行为吗?如果是这样,为什么?

备注

before going offline: cache is A-OK after refreshing while offline: cache is gone!

不会,缓存不会在离线后消失。 您遇到此行为的原因是您的网站目前未在离线模式下运行。

在您的服务工作者中添加以下获取事件处理程序,您的网站也可以在离线模式下正常工作。

self.addEventListener("fetch", function (event) {
  event.respondWith(
    caches.match(event.request).then(function (response) {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

缓存内容还在。如果您上网并刷新页面,您可以再次看到它(它不会被重新下载)。

我已提交 https://bugs.chromium.org/p/chromium/issues/detail?id=1164309,因为存储应该在 devtools 中可见,即使页面未加载也是如此。