Javascript Service Worker 在网络超时后使用缓存

Question

我有一个网络应用程序也应该可以离线使用。为此，我使用 javascript service workers 将必要的文件放入缓存中。如果连接正常，它会从网络加载所有资源。如果没有连接，则从缓存中加载资源。这工作正常。

现在的问题是，如果设备上有互联网连接但服务器已关闭。然后它永远不会回退到缓存，因为它有互联网连接。

这是我在服务中获取事件的代码-worker.js:

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

我的想法是实现一种超时，如果应用程序无法在假设 30 秒内获取内容，则始终使用缓存。有谁知道如何实现这个？我不太适合承诺...

Answer 1

我猜你的问题是你没有打开缓存实例，然后将请求与该缓存进行匹配。您使用缓存 API 不正确。

你需要这样的东西：

return caches.open('my-cache-name').然后...

强烈建议您通读以下内容： https://serviceworke.rs/strategy-network-or-cache.html

同一个站点有很多不同的 SW 策略！

Javascript Service Worker 在网络超时后使用缓存

Javascript Service Worker use cache after network timeout

javascript

caching

offline-caching

service-worker