Question

如何在移动浏览器中弹出此功能 “添加到家”将在手机主屏幕上创建Chrome图标，并在手机上显示网站链接。

请建议解决方案。

Answer 1

官方要求是：

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


有一个web app manifest文件：

一个short_name（在主屏幕上使用）

一个名字（在横幅中使用）

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

加载
的start_url


您的网站上已注册service worker。

服务于HTTPS（使用服务工作者的要求）。

至少访问过两次，访问时间至少为五分钟。

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

您可以通过启用chrome标记来跳过这些测试或调试目的的要求：

<强>铬：//标志/＃旁路-APP-横幅与卡合检查

Answer 2

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

您应该拥有一个包含以下内容的网络应用清单文件：
1. short_name - 在图标下方的主屏幕上使用。
2. 名称 - 应用的全名
3. 图标 - 至少192x192 png图标的徽标/图标（图标声明必须包含mime类型的图像/ png）
4. 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 event，您可以拦截并暂停。

此事件有一个名为.prompt()的方法，可让您随意显示弹出窗口。

Answer 3

我在Medium上发现了这篇详细的文章。 How to add “Add to Homescreen” popup in web app

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

＆＃13;

<script>
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

＆＃13;

第2步：创建清单文件在根文件夹中创建manifest.json文件。在html页面标题部分添加以下标记。

＆＃13;

<link rel="manifest" href="/manifest.json">

＆＃13;

步骤3：在清单文件中添加配置这是配置示例。

＆＃13;

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/icons/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

＆＃13;

在上面的代码中，您可以替换自己的值。

short_name ：此名称在主屏幕上以app图标显示。

图标：为不同的屏幕尺寸设置不同尺寸的图标

theme_color ：此颜色代码将更改镶边中的发件人颜色。

background_color ：设置初始屏幕的背景颜色。

名称：应用程序的全名。

您可以在https://manifest-validator.appspot.com

验证您的清单

Answer 4

在您的服务工作者js文件中有这一行。

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

Answer 5

我努力添加A2HS选项达数小时之久，而靠着上帝的恩典，这就是我的做法：

基于this criteria，您必须确保：

该网络应用尚未安装
满足用户参与启发式
通过HTTPS提供服务
包含一个Web App清单，其中包括：
- 简称或名称
- 图标-必须包含192px和512px图标
- start_url
- 显示-必须是全屏，独立或最小用户界面之一
- 向服务工作者注册功能正常的获取处理程序

网络应用清单：

创建一个manifest.webmanifest文件并添加类似于以下内容的文件：

{
    "short_name":"AskGod",
    "name":"AskGod",
    "start_url":"/askgod/",
    "display":"standalone",
    "theme_color":"#007bff",
    "background_color":"#ffffff",
    "icons": [
      {
       "src": "/icons/android-icon-36x36.png",
       "sizes": "36x36",
       "type": "image/png",
       "density": "0.75"
      },
      {
       "src": "/icons/android-icon-48x48.png",
       "sizes": "48x48",
       "type": "image/png",
       "density": "1.0"
      },
      {
       "src": "/icons/android-icon-72x72.png",
       "sizes": "72x72",
       "type": "image/png",
       "density": "1.5"
      },
      {
       "src": "/icons/android-icon-96x96.png",
       "sizes": "96x96",
       "type": "image/png",
       "density": "2.0"
      },
      {
       "src": "/icons/android-icon-144x144.png",
       "sizes": "144x144",
       "type": "image/png",
       "density": "3.0"
      },
      {
       "src": "/icons/android-icon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "density": "4.0"
      },
      {
        "src": "/icons/android-icon-512x512.png",
        "sizes": "512x512",
        "type": "image/png",
        "density": "4.0"
       }
     ]
 }

为了生成图标，我使用了favicon-generator，它没有给出512x512的图像，所以我使用了另外一个site来获得512x512的图像

start_url取决于您的基本URL，例如，如果您的网站URL是fawazahmed0.github.io/，则您的start_url将是：

"start_url":"/

如果您的网址是fawazahmed0.github.io/askgod，那么您的start_url将是：

"start_url":"/askgod/

在您的HTML代码中链接您的Web清单文件：

<link rel="manifest" href="/manifest.webmanifest" />

服务人员：

创建一个名为service-worker.js的文件并添加以下代码：

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

在您的JavaScript代码中添加以下代码：

// Register Service worker for Add to Home Screen option to work
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js') }

现在，您应该会看到“添加到主屏幕”选项，以防万一您看不到它，然后打开chrome Devtools并为您的网站运行灯塔报告，并应确保该网站通过了“ PWA部分。

具有A2HS选项的有效演示：AskGod

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

5 个答案: