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

Question

对于离线使用一个相当复杂的PWA，我并没有想太多。但现在我想试试。但是我正在使用这样的 links（可以说在 PWA 内部）：

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

当在 PWA 中离线点击 link 时，我得到 "This site can't be reached"。这个 link 然而工作正常：

https://example.com/page.html

参数全部在网络浏览器JavaScript中处理。我有什么选择来处理这个？也许最好将其重写为#links？还是这会让我陷入其他麻烦？

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

Answer 1

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

因此，在您的情况下，您缓存了“https://example.com/page.html" but when you call "https://example.com/page.html?param=val”，比较失败并收到错误消息。

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

    caches.match(event.request)

只需使用

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

URLs like https://example.com/page.html?param=val in offline PWA