使 Service Worker 始终从服务器加载文件，除非脱机答案

【问题标题】：Making Service Worker always load files from server, unless Offline使 Service Worker 始终从服务器加载文件，除非脱机
【发布时间】：2021-06-24 06:55:27
【问题描述】：

据我了解，Service Worker 有自己的缓存。而且 HTTP 流量有单独的缓存。

当您离线时，浏览器拒绝向您显示来自 HTTP 缓存的网站，但它很乐意向您显示来自 Service Worker 缓存的网站。

我每天更新我的网站很多次（只有文件的内容、URL 保持不变）。我的 HTTP 缓存设置为一小时。

我想提供离线模式。但在线时，网站应始终从服务器（或 1 小时 HTTP 缓存）加载。

我应该为这样的 Service Worker 使用什么代码？我相信这里没有描述：https://web.dev/offline-cookbook

【问题讨论】：

stackoverflow.com/questions/46036897/…

标签： javascript service-worker offline-caching

【解决方案1】：

根据您的用例，我会说您可以使用"Network first" 方法。

self.addEventListener(’fetch’, function (event) {
    event.respondWith(
        fetch(event.request).catch(function() {
            return caches.match(event.request)
        })
    )
})

在您的 fetch 事件处理程序中，我们正在执行以下操作：-

使用fetch方法从服务器获取数据。
添加catch 处理程序以防网络故障并从缓存存储中获取数据。（这将在offline 状态的情况下）。

注意：- 我们假设您在服务工作者的 install 事件中缓存数据。如果你不是，那么我们也可以在fetch 活动中这样做。

【讨论】：

太好了，谢谢！我可以在“获取”而不是“安装”中缓存文件吗？昨天我在“安装”中缓存了一个小时，现在有几千人被我的旧版本的 webapp 卡住了，谁知道多长时间:(github.com/photopea/photopea/issues/3450
请分享您的service-worker 代码您如何在install 事件中缓存响应。
嗨，我在这里做了一个演示服务工作者：photopea.com/sw_new.js，它会做我想要的吗？由于有数千个不同的文件，我想只缓存“列表”中的那些，我该怎么做？
如果您有预定义的文件列表，请在 install 事件中捕获这些文件。
当您打开一个网站时，会加载八个文件。如果您按下特定按钮，则会加载另外八个文件。只有 20% 的用户需要全部 16 个文件，所以我不想让每个人在打开网站时都下载全部 16 个（所以我不能使用“安装”事件）。