离线 PWA 中像 https ://example. com/page.html?param=val 这样的 URL

Question

对于离线使用相当复杂的 PWA，我没有考虑太多。但现在我想尝试一下。但是我正在使用这样的链接(在 PWA 内部可以这么说):

https://example.com/page.html?param=val

在 PWA 中单击类似的离线链接时，我收到“无法访问此站点”。但是，此链接工作正常:

https://example.com/page.html

这些参数都是在 Web 浏览器中用 JavaScript 处理的。我有什么选择来处理这个问题？也许最好将其重写为#links？或者这会让我陷入其他麻烦吗？

https://example.com/page.html#param=val

Answer 1

问题来自缓存。在您的 sw.js 中，您提供了要缓存的文件列表，但您提供了不带参数的文件名。这是合乎逻辑的，因为在许多情况下您无法知道参数的完整值。

因此，在您的情况下，您缓存了“https://example.com/page.html ”，但是当您调用“https://example.com/page.html?param=val ”时，比较失败并且您收到错误消息。

解决这个问题的方法是告诉 sw.js 文件中的 retreivng 函数忽略参数。
而不是

    caches.match(event.request)

只是使用

    caches.match(event.request, {ignoreSearch: true})