我们可以在服务工作者之间重新渲染页面吗

Question

在我的网络应用程序中，我创建了一个离线 html 页面，并编写了一个服务工作者，比如如果网络中断，它应该为所有请求返回离线页面。这样，如果在离线状态下触发任何请求，Service Worker 将返回离线 html 页面作为响应。但离线 html 未显示在页面中。如果我刷新页面离线 html 页面。这是因为在刷新页面时获取原始 html 页面时，sw 发现 notwork 不存在，因此它正在返回离线页面。

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        try {
            const networkResponse = await fetch(event.request);
            return networkResponse;
        } catch (error) {
            console.log('Fetch failed; returning offline page instead.', error);

            const cache = await caches.open(CACHE_NAME);
            const cachedResponse = await cache.match(OFFLINE_URL);
            return cachedResponse;
        }
    })());
})

有什么方法可以在不刷新页面的情况下显示离线页面。也就是说，一旦我离线并触发任何请求，我想删除旧的 html 页面并显示离线页面。

Answer 1

我不认为 service worker 可以这样做，因为它一起在一个单独的线程中运行，并且甚至没有像主线程那样访问窗口/文档对象。您可以做的是，检测用户在您的应用程序中是否在线/离线，然后可以呈现离线 HTML。 现在所有主流浏览器都支持 navigator.onLine 布尔值，或者您甚至可以附加事件监听器来检测更改，并编写逻辑来显示您的离线 HTML。

window.addEventListener('online', () => {...})
window.addEventListener('offline', () => {...})

浏览器支持详情：https://caniuse.com/online-status