小编mar*_*zen的帖子

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

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

我将在下面描述我创建的示例应用程序的功能：

重现步骤

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

观察到的行为

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

预期行为

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

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

Run Code Online (Sandbox Code Playgroud)

firefox google-chrome service-worker cachestorage

mar*_*zen

lucky-day

6
推荐指数

1
解决办法

3164
查看次数