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！