使Service Worker始终从服务器加载文件，除非离线

Question

据我了解，Service Workers 有自己的缓存。而 HTTP 流量有一个单独的缓存。

当您处于离线状态时，浏览器会拒绝从 HTTP 缓存中显示网站，但它很乐意从 Service Worker 缓存中显示网站。

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

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

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

- Ivan Kuckir

---

https://dev59.com/jlYO5IYBdhLWcg3wTfxv - Kaiido

Answer 1

根据您的使用情况，我建议您采用“网络优先”方法。

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

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

• 使用fetch方法从服务器获取数据。
• 添加一个catch处理程序以防网络故障，并从缓存存储中获取数据。（这将在离线状态下发生）。

注意：- 我们假设您正在服务工作者的install事件中缓存数据。 如果没有，则我们也可以在fetch事件中进行缓存。

- Vimal Patel

---

嗨，我在这里制作了一个演示用的服务工作者：https://www.photopea.com/sw_new.js ，它能够实现我的目标吗？由于有成千上万个不同的文件，我想只缓存“列表”中的文件，该怎么做呢？ - Ivan Kuckir

当您打开一个网站时，会加载八个文件。如果您按下特定按钮，则会加载另外八个文件。只有20%的用户需要所有16个文件，因此我不想让每个人在打开网站时都下载所有16个文件（因此我不能使用“安装”事件）。 - Ivan Kuckir

Service Worker 的整个目的是通过使用缓存来加快应用程序的加载速度，从而减少服务器负载。 - Vimal Patel

我希望每个人都使用最新版本（即无缓存），并且加载速度快（8个基本文件，其他8个文件仅在用户需要时加载）。但是，我希望为0.0001％的用户提供离线功能（在这种情况下，应向他们显示最后打开的版本，至少包括8个基本文件）。 - Ivan Kuckir

为了快速加载，您必须从缓存中提供服务，而且它们仍然可以使用最新版本。服务器上的数据更改频率有多高？ - Vimal Patel