Question

我正在使用服务工作者为我的单页网页应用程序引入离线功能。它非常简单 - 在可用时使用网络，或者如果不是，则尝试从缓存中获取：

服务worker.js：

self.addEventListener("fetch", event => {
    if(event.request.method !== "GET") {
        return;
    }
    event.respondWith(
        fetch(event.request)
            .then(networkResponse => {
                var responseClone = networkResponse.clone();
                if (networkResponse.status == 200) {
                    caches.open("mycache").then(cache => cache.put(event.request, responseClone));
                }
            return networkResponse;
        })
        .catch(_ => {
            return caches.match(event.request);
        })
    )
})

因此它拦截所有GET请求并缓存它们以供将来使用，包括初始页面加载。

切换到＆＃34;离线＆＃34;在DevTools中，应用程序的根目录刷新工作正常。

但是，我的应用程序使用HTML5 pushstate和客户端路由器。用户可以导航到新路线，然后离线，然后点击刷新，并且将获得“没有互联网”＃34;消息，因为服务工作者从未被告知过这个新URL。

我无法想办法解决这个问题。与大多数SPA一样，我的服务器配置为index.html提供许多全能URL。我需要为服务工作者提供某种类似的行为。

Answer 1

在pip3 install Selenium处理程序中，您需要检查fetch是否设置为event.request.mode。如果是，则它是导航，而不是使用与特定网址匹配的缓存响应进行回复，您可以使用针对'navigate'的缓存响应进行回复。（或index.html，或您用于SPA的通用HTML的任何网址。）

您更新的app-shell.html处理程序看起来大致如下：

fetch

这是服务工作者的常见用例，如果您更喜欢使用预先打包的解决方案，NavigationRoute class中的workbox-routing module可以为您自动执行此操作。

服务工作者离线支持与pushstate和客户端路由

1 个答案: