Question

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

＆＃34;首次使用[my_app_name]，请连接到互联网＆＃34;

为什么还需要互联网连接？所有JS＆amp; 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中无效。试试

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () => print("Bottom"),
      child: new Container(
        color: Colors.redAccent,
        child: new Center(
          child: new GestureDetector(
            onTap: () => print("Top"),
            behavior: HitTestBehavior.translucent,
            child: new Container(
              width: 200.0,
              height: 200.0,
              color: Colors.blue.withOpacity(0.3),
            ),
          ),
        ),
      ),
    );
  }
}

而不是

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

您可以运行Chrome开发工具＆gt;审核 - ＆gt;自我的渐进式网络应用程序，以查看问题是否得到修复（将在正确提供起始网址时使用）

为什么PWA应用程序从＆＃34;添加到主屏幕＆＃34;没有互联网连接就无法加载？

2 个答案: