如何将网站放在手机桌面上
在网站的根目录下添加一个manifest.json文件，就可以实现一个功能，当用手机浏览器访问网站时，会有一个弹出提示：“您是否愿意将该网站添加到桌面”，如果点击“同意”，那么在手机的桌面上就会出现一个图标，当用户点击这个图标时，就会调用浏览器并打开链接指向的网站。
这就实现了向原生App体验更进一步了。所以叫做app-like experience。和微信小程序中“添加到桌面”的功能类似。
为网站添加Web App Manifest
在网站根目录的Manifest文件。例如：https://yongqiang.live/manifest.json
{
"name": "ABC Site",
"short_name": "ABC",
"description": "ABc",
"display": "standalone",
"start_url": ".",
"orientation": "portrait",
"background_color": "#ffffff",
"theme_color": "teal",
"icons": [
{
"src": "icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
需要准备一些不同尺寸的图标，以适应不同的手机设备。这里又一个自动生成打包图标的网站。只要上传一张图片，就可以生成不同尺寸的多张图片。可以下面的工具生成图标：
- Favicon Generator: this tool allows you to create favicons from pictures that are up to 5 MB from either JPG, PNG or GIF or even from a gallery!
- web manifest generator(Service Unavailable!)
- Sketch
实现添加到桌面（Add to Homescreen）功能的条件和注意事项
如果网站实现了PWA的基本功能，当在手机上访问时，浏览器会提示用户是否将应用添加到桌面。这就是所谓的Add to Homescreen功能。这个功能是浏览器控制的，它会在合适的时机对用户发出提示，开发者不用控制。要实现这个功能，需要具备下面几个条件。
- 网站支持HTTPS访问。
- 有manifest.json文件
- 注册了service-worker
Safari App Icons
Safari和IOS需要特殊处理。
其他功能
我们还可以实现一些其他功能，比如Splash页面。