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

Posted 2023-02-16

技术标签:

【中文标题】如何在网站上弹出添加到主屏幕在移动浏览器中打开【英文标题】：How to get Add to Home Screen Pop up on Site Open in mobile browser 【发布时间】：2016-03-26 00:12:38 【问题描述】：

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

请提出解决方案。

【问题讨论】：

检查此链接 developer.chrome.com/multidevice/android/installtohomescreen 和 developers.google.com/web/updates/2015/03/… 【参考方案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

【讨论】：

【参考方案2】：

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

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

【讨论】：

为我解决了这个问题，非常感谢，不知道为什么 Google 的文档中没有记录？我已经与这个愚蠢的添加到主屏幕的东西斗争了 4 天。这就是最终修复它的原因。非常感谢@imsinu9！！！感谢您的大力帮助.. 这在 3 天挖掘互联网后救了我，想知道为什么不在 google 开发文档中！他们提到了它，但没有详细说明.. 那么我们只需要这个单行脚本吗？没有清单，没有别的？【参考方案3】：

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

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

short_name

name

icon

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()的方法，可以让你随意出现弹出窗口。

【讨论】：

很好的答案@aWebDeveloper，感谢工作就像一个魅力:) 这个事件有一个叫做 .prompt() 的方法，它允许你让弹出窗口随意出现。 那就是如果你停留在同一个页面上，是吗？如果我希望将该事件存储到我的 Web 应用程序中的某个时间点怎么办？例如，当他们上车时？ @aWebDeveloper 如何创建我们自己的自定义按钮？我想创建一个弹出窗口，我想问用户他是否想订阅？如果他想订阅用户点击我们的自定义订阅按钮，如果他不想点击取消按钮... 请单独提问。这不过是一个 html/CSS 问题。在我的示例中，myCustomButton 是对按钮的引用【参考方案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 页面标题部分添加以下标记。

&lt;link rel="manifest" href="/manifest.json"&gt;

第 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 验证您的清单

【讨论】：

为什么要创建一个空白的js文件？请清楚地说明你的答案。这是知识共享门户，而不是教程网站。复制...并将您的评论粘贴到***的每个线程，其中回答者提供了解决问题的详细步骤。更好地使用register('/service-worker.js')，这样可以绝对找到工人我们可以稍后显示提示吗？【参考方案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

【讨论】：

以上是关于如何在网站上弹出添加到主屏幕在移动浏览器中打开的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET 如何在网页上弹出提示窗口?

如何在 safari 浏览器中直接打开 webapp？

java如何实现鼠标移到文本框上弹出一个消息框

在移动设备上弹出不工作 - wordpress

iOS：“添加到主屏幕”网站不会刷新

强制 SPA 添加到主屏幕弹出窗口即使在添加到主页后也会显示

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

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