html5 添加图标到桌面,添加到主屏幕图标HTML5
首先，我想在下面的图片中显示项目结构。
我创建了一个公用文件夹，所有文件都在文件夹中。
清单文件不在公用文件夹中。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部分中
//之后你需要在关闭之前放下以下代码
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)
});
}
现在运行你的项目并等待几分钟然后重新加载页面并享受ENJOY！