Service Worker 创建的缓存存储在下线刷新页面后消失答案

【问题标题】：Cache Storage created by service worker disappears after going offline and refreshing pageService Worker 创建的缓存存储在下线刷新页面后消失
【发布时间】：2021-04-13 17:24:45
【问题描述】：

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

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

重现步骤

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

观察到的行为

之前由 Service Worker 创建的缓存存储 MyCache 消失。

预期行为

页面无法按预期加载，但缓存存储在刷新后应保持可用，以便应用可以在离线时使用它来提供内容。

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

操作系统+浏览器版本

谷歌浏览器版本：87.0.4280.141（官方版本）（x86_64） Firefox 版本：85.0b5（64 位，开发者版）操作系统：macOS v11.1 (Big Sur)

问题

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

注意事项

我无法在 Safari 上进行测试，因为我没有可视化缓存存储内容的可见方法（哎呀！）。
在 Firefox 上刷新后，您可能需要关闭并重新打开 devtools 才能让“存储”选项卡自行刷新。

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

【问题讨论】：

标签： google-chrome firefox service-worker cachestorage

【解决方案1】：

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

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

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

【讨论】：

您实际上是对的，添加 fetch 处理程序会使错误因某种原因消失。谢谢。
SW 充当浏览器和服务器请求之间的代理。当您添加 fetch 事件处理程序时，如果可用，您的资源将从缓存中提供。由于您已经在缓存索引页面，因此您的应用程序将正常工作，如果您没有缓存中的任何内容，那么它将无法正常工作。如果这解决了您的问题，请将答案标记为已接受。

【解决方案2】：

缓存内容仍然存在。如果你上网刷新页面，你可以再次看到它（它没有被重新下载）。

我已经提交了https://bugs.chromium.org/p/chromium/issues/detail?id=1164309，因为即使页面没有加载，存储也应该在 devtools 中可见。

【讨论】：

你是对的，存储配额仍然存在。由于某种原因，还有一个 SW fetch 处理程序可以防止该错误。感谢您的观看??
如果我是对的，请将我的答案标记为已接受