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

问题描述

据我所知，Service Workers 有自己的缓存。并且 HTTP 流量有一个单独的缓存。

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

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

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

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

解决方法

根据您的用例，我认为您可以采用 "Network first" 方法。

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

在您的 fetch 事件处理程序中，我们正在做以下事情：-

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

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