如何获取添加到主屏幕在网站上弹出在移动浏览器中打开

如何在移动浏览器中弹出"添加到家"将在手机主屏幕上创建Chrome图标,并在手机上显示网站链接.

请建议解决方案.

官方要求是:

当您的应用符合以下条件时,Chrome会自动显示横幅广告:

有一个Web应用程序清单文件:

short_name(在主屏幕上使用)

名称(在横幅中使用)

一个144x144 png图标(图标声明必须包含mime类型的图像/ png)

加载的start_url

是否在您的站点上注册了服务工作者.

通过HTTPS提供(使用服务工作者的要求).

至少访问两次,访问时间至少为五分钟.

来源:https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

您可以通过启用chrome标记来跳过这些要求以进行测试或调试:

铬://标志/#旁路应用横幅接合的检查

您需要具有以下内容才能显示清单文件.

您应该有一个Web应用程序清单文件:

short_name - 在图标下方的主屏幕上使用.

name - 应用的全名

icon - 至少192x192 png图标的徽标/图标(图标声明必须包含mime类型的图像/ png)

start_url - 应用程序打开时应加载的页面

您应该在您的站点上注册服务工作者.

确保您的站点通过HTTPS提供(使用服务工作者的要求).

它应该符合浏览器网站参与启发式.

现在您可以捕获此弹出窗口并确定何时显示它

window.addEventListener("beforeinstallprompt", ev => { 
  // Stop Chrome from asking _now_
  ev.preventDefault();

  // Create your custom "add to home screen" button here if needed.
  // Keep in mind that this event may be called multiple times, 
  // so avoid creating multiple buttons!
  myCustomButton.onclick = () => ev.prompt();
});

看看 beforeinstallprompt事件,您可以拦截和搁置.

此事件有一个名为的方法.prompt(),允许您随意显示弹出窗口.

我在Medium上找到了这篇详细的文章。如何在网络应用中添加“添加到主屏幕”弹出窗口

步骤1：在根文件夹中创建一个空白的service-worker.js文件。并在关闭标记之前将以下代码放入您的html页面中。

self.addEventListener('fetch', function(event) {});