添加到主屏幕图标HTML5

Question

当我们在Chrome应用程序中浏览网页时，我们如何在HTML5中添加主屏幕图标，在选项中我们选择添加到主屏幕。然后在主屏幕上放置了一个图标快捷方式。

我用过：

<link rel="apple-touch-icon-precomposed" href="...\icon.png">

<link rel="apple-touch-icon" href="...\icon.png">

没有任何反应它再次显示默认图标。就像AmStalker主屏幕图标

一样

最好的方法是什么？

Answer 1

首先，我想在下面的图片中显示项目结构。 我创建了一个公用文件夹，所有文件都在文件夹中。 清单文件不在公用文件夹中。this is image

之后我们将创建文件的清单文件代码，如下所示。

<强>的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并将以下代码放在head部分

中

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

现在运行你的项目并等待几分钟然后重新加载页面并享受ENJOY！

Answer 2

在你的href中，我认为你有一个额外的点，它应该是正斜杠而不是反斜杠。试试"../icon.png"

使用苹果图标引用的Android也已被折旧，因此这些不起作用 - FOR ANDROID。有关详细信息，请查看https://developer.chrome.com/multidevice/android/installtohomescreen。

引用来源建议您这样做：

<link rel="icon" sizes="192x192" href="../icon.png">

当然，使用这种方法，我建议您的图像大小为192x192。

Answer 3

现代的方法是将其设为Progressive Web App，浏览器会代表它提供此功能。

此处 - https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/ - 您可以查看条件并自行检查是否符合条件。