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

Question

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

请提出解决方案。

Answer 1

官方要求是：

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

• 有一个Web 应用清单文件，其中包含：
  • 一个短名称（在主屏幕上使用）
  • 名称（在横幅中使用）
  • 一个 144x144 png 图标（图标声明必须包含 mime 类型的 image/png）
  • 加载的 start_url
• 在您的网站上注册了一名服务人员。
• 通过HTTPS提供服务（使用服务工作者的要求）。
• 至少访问过两次，两次访问之间至少间隔五分钟。

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

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

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

Answer 2

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

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

Answer 3

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

1. 您应该有一个 Web 应用清单文件，其中包含：

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

2. 您应该在您的网站上注册了一名服务人员。

3. 确保您的站点通过 HTTPS 提供服务（使用 service worker 的要求）。

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();
});

查看 beforeinstallpromptevent，您可以拦截并暂停该事件。

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

Answer 4

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

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

我挣扎了好几个小时才添加 A2HS 选项，靠着上帝的恩典，我就是这样做的：

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

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

网络应用清单：

创建一个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 文件：

<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