链接以将外部PWA添加到主页

Question

我们希望将自己的应用商店创建为一个网站，其中所有“应用”均为PWA。由于人们还不习惯PWA的“添加到主屏幕”功能，因此我们希望使应用商店中的所有应用立即启动PWA的“添加到主屏幕”功能。

例如，https://pwa.rocks/是一个不错的“应用商店”。但是要将其添加到主屏幕，用户必须先导航到该页面，然后提示他们将其添加到主屏幕。我们要完全跳过第一步。

Answer 1

您的用例似乎容易被滥用，并且有可能对您的品牌以及客户对PWA的一般认识造成严重损害。

但是，要回答您的问题，您可以尝试使用框架或 iframe 来实现。以下是显示“添加到主屏幕”横幅的条件：

• 该网络应用必须尚未安装
• 必须满足用户参与启发式的要求（当前，用户与域进行互动至少30秒）
• 必须有一个包含以下内容的网络应用清单：
  • 简称或名称
  • 图标必须包含192px和512px大小的图标
  • start_url
  • 显示必须是全屏，独立或最小用户界面之一
• 必须通过HTTPS提供服务（服务工作者需要）
• 必须已经使用获取事件处理程序注册了服务工作者

满足这些条件时，Chrome会触发beforeinstallprompt事件，您可以使用该事件来提示用户安装Progressive Web App。

其他浏览器具有不同的安装条件，或触发beforeinstallprompt事件。

来源：

https://developers.google.com/web/fundamentals/app-install-banners/