我们是否可以通过服务人员将页面新呈现在两者之间

Question

在我的web应用程序中，我创建了一个脱机html页面，并编写了一个服务人员，就像如果网络关闭，它应该返回所有请求的脱机页面一样。若在脱机状态下触发任何请求，服务工作者将返回脱机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

我不认为ServiceWorker可以这样做，因为它在一个单独的线程中一起运行，甚至不像主线程那样有权访问窗口/文档对象。您可以做的是，检测应用程序中的用户是否在线/离线，然后可以呈现离线HTML。所有主要浏览器现在都支持导航器。联机boolean，或者您甚至可以附加事件侦听器来检测更改，并编写逻辑来显示脱机HTML。

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

有关浏览器支持的详细信息：https://caniuse.com/online-status