时间戳

首页 > 解决方案 > 离线 PWA 中的 https://example.com/page.html?param=val 等 URL

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

问题描述

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

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

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

https://example.com/page.html

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

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

标签： urlcachingprogressive-web-appsofflineapps

解决方案

问题来自缓存。在您的 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})

推荐阅读