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

Question

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

请建议解决方案.

Answer 1

官方要求是:

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

• 有一个Web应用程序清单文件:
  • short_name(在主屏幕上使用)
  • 名称(在横幅中使用)
  • 一个144x144 png图标(图标声明必须包含mime类型的图像/ png)
  • 加载的start_url
• 是否在您的站点上注册了服务工作者.
• 通过HTTPS提供(使用服务工作者的要求).
• 至少访问两次,访问时间至少为五分钟.

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

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

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

Answer 2

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

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

   1. short_name - 在图标下方的主屏幕上使用.
   2. name - 应用的全名
   3. icon - 至少192x192 png图标的徽标/图标(图标声明必须包含mime类型的图像/ png)
   4. start_url - 应用程序打开时应加载的页面

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

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

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

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

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(),允许您随意显示弹出窗口.

Answer 3

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

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

<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>

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

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

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

{
  "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"
}

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

short_name：此名称在主屏幕上通过应用程序图标可见。

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

theme_color：此颜色代码将更改chrome中寻址器的颜色。

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

name：应用程序的全名。

您可以在https://manifest-validator.appspot.com上验证清单。

Answer 4

在您的service worker js文件中有这一行。

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

Answer 5

我花了几个小时努力添加 A2HS 选项，感谢上帝的恩典，我就是这样做的：

根据此标准，您必须确保：

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

Web 应用程序清单：

创建一个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 图像，所以我使用另一个网站来获取 512x512 图像

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

"start_url":"/

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

"start_url":"/askgod/

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

{
    "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"
       }
     ]
 }

服务人员：

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

"start_url":"/

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

"start_url":"/askgod/

现在您应该看到“添加到主屏幕”选项，如果您没有看到它，请打开 chrome Devtools 并为您的网站运行 lighthouse 报告，并且您应该确保网站已通过 PWA 部分下的所有可安装标准。

带有 A2HS 选项的工作演示：AskGod