添加到主屏幕图标HTML5 [英] Add to Home Screen Icon HTML5
问题描述
当我们在Chrome应用程序中浏览网页时,我们如何在HTML5中添加主屏幕图标,在选项中我们选择添加到主屏幕。然后在主屏幕上放置一个图标快捷方式。
How can we add an Icon for Home Screen in HTML5 when we browse a webpage in chrome app and in option we choose Add To Home Screen. then theres an Icon Shortcut placed on your Home Screen.
我用过:
<link rel="apple-touch-icon-precomposed" href="...\icon.png">
<link rel="apple-touch-icon" href="...\icon.png">
没有任何反应它再次显示默认图标。就像AmStalker主屏幕图标
nothing happens it display again a default icon.! Just Like the AmStalker Home Screen Icon
最好的方法是什么?
推荐答案
首先,我想在下面的图片中显示项目结构。
我创建了一个公用文件夹,所有文件都在文件夹中。
清单文件不在公共文件夹中。这是图像
First of all I want to show project structure in image below . I have made a public folder and all the file is inside the folder . And the manifest file is out of public folder .this is image
之后我们将创建文件的清单文件代码如下。
After That we will create Manifest file code of file is given below.
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"
}
//之后我们将添加服务工作者
service-worker.js
// After that we will add service worker
service-worker.js
self.addEventListener("fetch", function(event){
});
//现在转到index.html并将以下代码放在头部
// Now go to index.html and put the following code in head section
<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">
//之后你需要在收盘前放下以下代码
// After that you need to put following code before body closing
<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!
Now Run your project and wait for few minute and reload your page and ENJOY !
这篇关于添加到主屏幕图标HTML5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!