关闭浏览器窗口并在安装PWA后打开PWA

Question

我已经在Android上安装了Chrome PWA - 一旦安装完成，我想自动关闭安装PWA的浏览器窗口，并打开PWA（以便用户不会继续在浏览器窗口中使用PWA）- 这可能吗？

- BruceM

---

也许自从这个问题发布以来，行为已经发生了变化，但这正是Chrome在我自己的电脑上所做的。安装完成后，浏览器标签页关闭，PWA就会打开。 - Brad

@Brad 为了澄清 - 你是指在Android上还是在桌面操作系统上？如果是Android，你能告诉我们你的操作系统和Chrome版本吗？（对我来说仍然不起作用！） - JoLoCo

Answer 1

我正在寻找类似的解决方案，但尚未找到方法。目前我能描述的是：

关闭浏览器窗口：如答案所述，window.close()只能在脚本自己打开的窗口/标签上调用。一些可能的解决方法正在讨论中。

安装后立即打开PWA：谷歌在他们的WebApk基础知识文章中描述了如下内容：

当在Android上安装渐进式Web应用程序时，它会为应用程序范围内的所有URL注册一组意图过滤器。当用户单击应用程序范围内的链接时，将打开应用程序，而不是在浏览器选项卡中打开。

我希望这也适用于从仍然打开的浏览器窗口安装/添加到主屏幕后。根据两个Android设备的测试结果，目前看来用户必须手动从主屏幕打开PWA一次，才能使chrome/android将Web应用程序manifest.json的范围解释为意图以独立方式打开页面。这对于iOS来说也很遗憾，因为它似乎处理方式不同。也许我在Google文章中忽略了什么？我也没有完全理解Android的意图API——所以也许还有一些方法可以实现这个（？）。

- gaugau

---

谢谢，希望随着时间的推移，我们可以获得更清晰和更好的功能！ - BruceM

到目前为止，我也在寻找解决方案，有没有解决方案？ - Ahmad

@Ahmad，直到今天还没有找到方法。但是我已经有一段时间没有测试了，最终放弃并继续前进。我是否正确理解了你的问题：问题仍然存在？那很遗憾，但这是有用的更新信息。 - gaugau

@gauguerilla，是的，谢谢。实际上，现在在 Windows 上（仅使用 Chrome），PWA 自动执行此功能，即当我们安装 PWA 时，它会自动关闭选项卡并在桌面应用程序中打开它，但在 Android 设备上不会，所以我现在正在询问 Android 设备。 - Ahmad

Answer 2

我在Android上使用Chrome时遇到了这个问题。解决方法是在链接中添加"target='_blank'"，具体代码如下：

window.addEventListener('appinstalled', function(event){
    setTimeout(function(){
        presentToUser("<a href='https://myhostname.com' target='_blank'>Go to App</a>")
    }, 10000)}
});

十秒的超时时间是为了让Android有足够的时间在主页上设置App。 我之前已经进行了调整，可能可以将其删除？ 但是设定目标是使这项工作得以完成。

该应用程序会覆盖Chrome，使其无法显示。 因此，关闭浏览器并非立即所需，但建议这样做。

- Brian Button

Answer 3

根据这篇博客文章：

PWA安装后，它将出现在主屏幕、应用程序启动器、设置和操作系统中的任何其他一级公民应用程序中，包括有关系统中使用的电池和空间的信息。

当用户从主屏幕打开应用程序时，会有一个跟踪事件。这意味着用户已经单击了应用程序的图标或在支持WebAPK的Android上也单击了指向PWA范围并需要关闭浏览器的链接。

start_url: '/?utm_source=standalone&utm_medium=pwa'

此外，下面的脚本会返回一个布尔值，该值说明用户当前是在浏览器(true)还是独立应用程序模式(false)中。

var isPWAinBrowser = true;
// replace standalone with fullscreen or minimal-ui according to your manifest
if (matchMedia('(display-mode: standalone)').matches) {
     // Android and iOS 11.3+
     isPWAinBrowser = false;
} else if ('standalone' in navigator) {
     // useful for iOS < 11.3
     isPWAinBrowser = !navigator.standalone;
}

- Jessica Rodriguez

---

谢谢，但不是我要找的。一旦用户将PWA安装到主屏幕上，他们会被发送回他们开始安装的浏览器窗口。他们可能会错误地认为他们现在处于应用程序中。我想关闭浏览器窗口，这样他们就必须从主屏幕找到并打开新安装的应用程序。 - BruceM

我不明白@jess想说什么。嗨，@BruceM，你觉得在函数中调用self.close();怎么样？如果你使用它，可能会关闭浏览器或页面，这样用户就必须搜索已安装的应用程序。你可以试试吗？ - Amit Gandole

我认为在关键字“standalone”或“pwa”中使用参数不是一个好主意...原因是如果用户点击三个点的设置，他可以按下“在Chrome中打开”菜单选项，这将在Chrome中打开一个新标签页，具有相同的链接和参数... - Flamur Beqiraj

我不理解这个答案与问题的关系。 - YAHsaves

Answer 4

在新版本的Chrome中，在Android上安装后，它将所有链接与PWA应用程序关联在“范围”内，如果您尝试在Chrome浏览器中打开链接，则会直接在应用程序中打开。 希望这能回答您的问题。

- Adel Benyahia

---

从我的测试来看，只有当从“范围外”的来源点击到您的“范围”链接时才有效。如果用户在您的范围内的网页上安装了PWA，并单击另一个范围内的链接，则不会发生任何事情。这根本不像是应用程序安装体验。更像是“添加到主屏幕”的快捷方式。 - YAHsaves