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

【问题标题】：URLs like https://example.com/page.html?param=val in offline PWA离线 PWA 中的 https://example.com/page.html?param=val 等 URL
【发布时间】：2019-08-19 11:23:32
【问题描述】：

我没有过多考虑离线使用相当复杂的 PWA。但现在我想试试。但是我正在使用这样的链接（可以说是在 PWA 内部）：

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

当在 PWA 中单击离线链接时，我会收到“无法访问此站点”。但是，此链接可以正常工作：

https://example.com/page.html

所有参数都在 Web 浏览器中以 JavaScript 处理。我有什么选择来处理这个问题？最好将其重写为 # 链接？或者这会让我陷入其他麻烦吗？

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

【问题讨论】：

你能添加你的 manifest.json 文件和你用于缓存 GET 请求的代码吗？
@Francesko 谢谢，但我认为这并不重要。但也许我应该更清楚。在我的例子中，确切的 URL 被缓存了。而且我认为我可以在 service worker 中重写它以获得更通用的缓存。但是第二种方法可能要容易得多。但我有点担心隐含的滚动（到一个名为“#param”的标签）。
在我看来像一个 .htaccess 问题而不是 PWA
@none 我不这么认为，但请解释一下您为什么这么认为。

标签： url caching progressive-web-apps offlineapps

【解决方案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})

【讨论】：

啊，谢谢！我隐约记得一开始我做了类似的事情，但我重写了整个缓存，因为我很难知道我做错了什么，或者 Chrome 没有按我的预期运行。所以我猜搜索参数仍然给页面（即 location.href 等）？