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

Question

如何在移动浏览器中弹出此窗口 “添加到主页”将在移动设备的主屏幕上创建带有网站链接的 chrome 图标。

请提出解决方案。

Answer 1

官方要求是：

当您的应用满足以下条件时，Chrome 会自动显示横幅：

• 有一个web app manifest 文件：
  • 短名称（在主屏幕上使用）
  • 名称（用于横幅）
  • 144x144 png 图标（图标声明必须包含 mime 类型的 image/png）
  • 加载的 start_url
• 在您的网站上注册了service worker。
• 通过 HTTPS 提供服务（使用 Service Worker 的要求）。
• 至少访问过两次，两次访问之间至少间隔五分钟。

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

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

chrome://flags/#bypass-app-banner-engagement-checks

Answer 2

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

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

Answer 3

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

1. 你应该有一个网络应用清单文件：

   1. short_name - 用于主屏幕图标下方。
   2. name - 您的应用的全名
   3. icon - 至少 192x192 png 图标的徽标/图标（图标声明必须包含 mime 类型的 image/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 event，您可以拦截并暂停。

这个事件有一个叫做.prompt()的方法，可以让你随意出现弹出窗口。

Answer 4

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

第 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：此名称显示在主屏幕上的应用图标旁。

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

theme_color：这个颜色代码会改变chrome中addresser的颜色。

background_color：设置启动画面的背景颜色。

name：应用程序的全名。

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

Answer 5

我为添加 A2HS 选项苦苦挣扎了好几个小时，感谢上帝的恩典，我就是这样做的：

基于this criteria，您必须确保：

• 尚未安装网络应用程序
• 满足用户参与启发式
• 通过 HTTPS 提供服务
• 包括一个 Web 应用程序清单，其中包括：
  • 短名称或名称
  • 图标 - 必须包含一个 192 像素和一个 512 像素的图标
  • 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 取决于您的基本网址，例如，如果您的网站网址是 fawazahmed0.github.io/，那么您的 start_url 将是：

"start_url":"/

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

"start_url":"/askgod/

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

<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 并为您的网站运行 lighthouse 报告，并且您应该确保该网站已通过以下所有可安装标准PWA 部分。

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