Android PWA 主屏幕快捷方式答案

【问题标题】：Android PWA home screen shortcutAndroid PWA 主屏幕快捷方式
【发布时间】：2017-10-28 14:04:30
【问题描述】：

我已将网站设置为 PWA。使用 Android Chrome 浏览时，系统会提示我在主屏幕上添加快捷方式。当我从快捷方式启动时，我看到一个带有 X 和站点信息的屏幕，以及一个 Chrome 选项菜单：

从快捷方式启动 PWA 后查看

当我点击十字时，会显示一个空白的白色屏幕，如下所示：

点击十字后黑屏

manifest.json 包括：

    "start_url": "/default.aspx",
    "display": "standalone", 
    "orientation": "portrait",
    "theme_color": "#428BCA",
    "background_color": "#428BCA"

如果我删除了快捷方式，请清除浏览器缓存并在再次出现提示时重新安装，行为是不可预测的。有时会发生我上面描述的情况，但在其他情况下会创建一个独立启动且没有 X 和站点信息栏的快捷方式。

我有 3 个问题。

1) 为什么点击 X 会导致显示空白屏幕？

2) 为什么添加一个快捷方式（到同一个 PWA）有时会导致一个独立的启动器，有时会导致一个在 PWA 屏幕上方添加 X 和站点信息的启动器？

3) 是否可以看到主屏幕上的快捷方式正在使用的 url？当 PWA 使用 X 和站点信息栏启动时，据我所知，无法获取 url。

谢谢

布赖恩

【问题讨论】：

按照Web App Install Banners and Add to Homescreen for Chrome on Android中提到的正确添加到主屏幕的正确方法
第一张图片通常是您在 example.com 的 PWA 让用户单击 otherexample.com 的链接时看到的内容。您的网站是否进行任何类型的初始导航或打开弹出窗口？也许是为了认证？如果没有看到更多代码和您的实时站点，我们不太可能诊断出真正的问题。

标签： progressive-web-apps workbox

【解决方案1】：

我会回答你的问题 3：

您可以通过访问 document.location 属性以编程方式从 JavaScript 检查 url。出于调试目的，您可以例如。将其写入屏幕或将其记录到您的服务器或诸如此类。此外，如果您能够访问 Web 服务器的日志，只需从主屏幕打开您的 Web 应用程序并同时查看日志。

【讨论】：

【解决方案2】：

3) Is it possible to see the url which the shortcut on the home screen is using? When the PWA launches with the X and site information bar it is not possible to grab the url as far as I can tell.

你可以尝试使用这个："start_url": "/default.aspx?utm_source=homescreen"

【讨论】：