使服务工作者始终从服务器加载文件，除非处于脱机状态

Question

据我所知，服务人员有自己的缓存。HTTP流量有一个单独的缓存。

脱机时，浏览器拒绝从HTTP缓存向您显示网站，但很乐意从Service Worker缓存向您显示网站。

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

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

我应该为此类服务人员使用什么代码？我相信这里没有描述：https://web.dev/offline-cookbook

Answer 1

基于您的用例，我想说您可以使用“网络优先”方法。

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

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

• 使用fetch方法从服务器获取数据
• 添加catch处理程序以防网络故障，并从缓存中获取数据。（在<代码>脱机<代码>状态下，将显示此选项）

注意：-我们假设您正在service worker的安装事件中缓存数据。如果您没有，那么我们也可以在fetch事件中执行此操作。