Javascript 具有pushstate和客户端路由的Service worker脱机支持

我正在使用服务人员为我的单页web应用引入脱机功能。这非常简单-可用时使用网络，如果不可用，则尝试从缓存中提取：

service-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请求并缓存它们以备将来使用，包括初始页面加载

在DevTools中切换到“脱机”并在应用程序的根目录下刷新，效果与预期一样

然而，我的应用程序使用HTML5 pushstate和客户端路由器。用户可以导航到一个新的路由，然后脱机，然后点击刷新，并将收到一条“没有internet”消息，因为服务人员从未被告知这个新URL

---

我想不出一个解决办法。与大多数SPA一样，我的服务器配置为为为多个“一网打尽”URL提供index.html。我需要为服务人员提供类似的行为。

在

获取

处理程序中，您需要检查

事件.request.mode

是否设置为

'navigate'

。如果是这样的话，这是一个导航，而不是使用与特定URL匹配的缓存响应进行响应，您可以使用

index.html

的缓存响应进行响应。（或

app shell.html

，或SPA通用html的任何URL。）

更新的

fetch

处理程序大致如下所示：

self.addEventListener('fetch', event => {
  if (event.request.method !== 'GET') {
    return;
  }

  if (event.request.mode === 'navigate') {
    event.respondWith(caches.match('index.html'));
    return;
  }

  // The rest of your fetch handler logic goes here.
});

这是服务人员的常见用例，如果您更喜欢使用预打包的解决方案，中的可以为您实现自动化。

这正是我要寻找的。有关类的当前功能URL和父模块，请参阅。