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

Question

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

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

为什么还需要互联网连接？所有的JS和CSS都已预先缓存（使用workbox.precaching），start_url已经使用networkFirst策略缓存。而且，这不是我第一次启动应用程序（正如对话框消息所示）。

Answer 1

通过修复路径匹配器解决了这个问题：

以前是：

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

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

修复是允许正则表达式匹配后缀?utm_source=a2hs

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

Answer 2

很好地使您的网站符合PWA ...几乎。根据Chrome Lighthouse PWA审核报告，还有一件小问题导致了这个问题。 start_url在manifest.json中无效。试试看

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

代替

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

您可以为自己运行Chrome开发工具>审核 - >渐进式网络应用，以查看问题是否得到修复（正确提供初始网址时）