使用javascript添加到主屏幕功能

Question

我希望＆＃34;添加到主屏幕＆＃34;使用javascript按钮单击功能。我的第一个问题是。可以使用javascript或html/css吗？

我读过太多帖子但没找到任何正常工作的代码。我发现用户必须做的就是转到Chrome菜单和选项卡上＆＃34;添加到主屏幕＆＃34;或者Chrome将提示用户并询问他们＆＃34;添加到主屏幕＆＃34;

Answer 1

下面的图片显示了文件资源管理器中的项目结构。公用文件夹中包含所有文件。清单文件位于公用文件夹

之外

接下来创建Manifest.json和service-worker.js文件，如下所示：

<强>的manifest.json

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
      {  
   "src": "assets/layouts/layout2/img/icon/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image/png",
   "density": "0.75"
  },
    {
      "src": "assets/layouts/layout2/img/icon/android-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
       "src": "assets/layouts/layout2/img/icon/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image/png",
   "density": "1.5"
  },

    {
    "src": "assets/layouts/layout2/img/icon/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image/png",
   "density": "2.0"
  },
  {
   "src": "assets/layouts/layout2/img/icon/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png",
   "density": "3.0"
  },
  {
   "src": "assets/layouts/layout2/img/icon/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png",
   "density": "4.0"
  }
  ],
  "start_url": "/index.html"
}

<强>服务worker.js

self.addEventListener("fetch", function(event){

});

现在修改 index.html 并在主题部分

中添加以下代码

<link rel="manifest" href="/manifest.json">     
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> 

在正文关闭

之前的同一文件中放置代码

<script type="text/javascript">
 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>

现在运行您的项目，等待几分钟并重新加载您的页面。

享受！

Answer 2

在2018年6月，Google推出了Chrome 68（仍在2018年7月处于Beta版），通过捕获事件“ beforeinstallprompt”，您可以在主屏幕对话框中显示模式添加。

要触发此事件，您需要：

• 该网络应用尚未安装

• 满足用户参与启发式的需求（当前，用户与域进行互动至少30秒）

• Web应用程序清单必须具有：短名称或名称，图标，起始网址，显示内容

• https

• 已使用“获取”事件处理程序注册了服务工作者

更多详细信息和代码，位于：https://developers.google.com/web/updates/2018/06/a2hs-updates

添加到主屏幕标准：https://developers.google.com/web/fundamentals/app-install-banners/#criteria

Answer 3

根据本页的最佳做法部分：https://developer.chrome.com/multidevice/android/installtohomescreen#best-practices

• 不要提示用户将您的应用添加到主屏幕。无法检测应用程序是否正在运行。

看起来其他开发人员建议您只需向用户提示如何添加到主屏幕的说明，而不是直接尝试直接操作。

编辑：进行更多挖掘，似乎自Chrome 42以来，谷歌正在推出应用安装横幅。请参阅：https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android

您的网络应用程序需要满足一系列要求，包括运行service worker，将您的网站设为https，并让用户至少访问您的网站两次。