google-chrome - 为什么从“添加到主屏幕”启动的 PWA 应用在没有 Internet 连接的情况下无法加载？

Question

我们已经使我们的网站 ( https://www.hijup.com ) PWA 准备好添加到 HomeScreen 功能。该应用程序可以通过 Internet 连接从 HomeScreen 启动。但是当连接关闭时，会出现如下对话框：

“第一次使用[my_app_name]，请连接到互联网”

为什么它仍然需要互联网连接？所有的 JS & CSS 已经被预缓存（使用workbox.precaching）并且start_url已经被networkFirst策略缓存了。此外，这不是我第一次启动该应用程序（正如对话消息所暗示的那样）。

score 2 · Accepted Answer

这可以通过修复路由匹配器来解决：

以前是：

 workbox.routing.registerRoute(new RegExp('www\\.hijup\\.com/id/$'), pagesHandler);

正则表达式与我的不匹配start_url："/en?utm_source=a2hs"

解决方法是允许 Regex 匹配后缀?utm_source=a2hs

workbox.routing.registerRoute(new RegExp('www\\.hijup\\.com/id/?(?:\\?.+)?$'), pagesHandler);

score -1 · Accepted Answer

在使您的网站符合 PWA 方面做得很好......几乎。根据 Chrome Lighthouse PWA 审计报告，还有一件小事导致了这个问题。start_url 在 manifest.json 中无效。试着放

"start_url": "https://www.hijup.com/",

代替

"start_url": "/en?utm_source=a2hs",

您可以为自己运行 Chrome 开发工具 > 审核 -> 渐进式网络应用程序，以查看问题是否得到解决（它会在正确提供起始 URL 时）

2 回答 2