8.支持native化
没人喜欢在不必要的情况下去用手机键盘输入长长的URLs。有了添加到主屏幕的特性，你的用户可以选择添加一个快捷方式的链接到他们的设备上就像他们从应用商店安装native app一样，并且少了一些阻力。
网页应用在安卓上chrome上的安装banners和添加到首页功能
网页应用安装banner给你一个可以让你的用户快速且无缝的添加你的网页应用到他们的主屏幕的能力，使得再次打开和返回到应用更加容易。添加一个安装banners是容易的，并且chrome已经帮你处理了最重的活儿。我们仅仅需要将一个拥入详细描述的应用manifest清单包含到你的网页应用中。
chrome然后使用一系列的指标来决定什么时候来展示banner，这些指标包含一个service worker的使用，SSL的状态和启发式的访问频率。另外，用户也可以通过点击在chrome中的“Add to Home Screen”菜单按钮，手动添加它到主屏幕上。
在manifest.json文件中声明一个应用manifest
网页app的mainfest是一个简单的JSON文件，它给你们开发者提供了控制你们的app如何展示给用户的能力（例如手机主屏幕），及指导用户什么可以打开以及更重要的是如何打开的能力。
使用网页app的manifest，你的网页app可以：
- 在安卓用户的主屏幕上显示；
- 在安卓上可以以全屏的模式打开并且没有URL栏；
- 为了更好的阅读可以控制屏幕旋转
- 为网站定义一个“splash screen”(启动页)启动体验和主题颜色
- 可追踪你是从主屏幕启动的还是URL栏启动的
在你的work文件夹下新建一个名为maniest.json的文件，并复制粘贴如下内容：
{
"name": "Weather",
"short_name": "Weather",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
manifest支持一组图标数组，意在不同的屏幕尺寸。在截止写这个文档的时间点，唯二支持网页manifests的手机浏览器Chrome和Opera，不会使用小于192px的图标。
一个简单的方法来追踪应用是通过哪种方式启动的，就是添加一个查询字符串到start_url参数上，然后使用统计套件来追踪查询字符串。如果你使用这个方法，记住更新应用壳缓存的一系列文件，确保这些带有查询字符串的文件已经被缓存。
告知浏览器manifest文件
现在添加如下行到你的index.html文件里的<head>元素的底部：
<link rel="manifest" href="/manifest.json">
最佳实践
- 在你网站的所有页面都加上manifest的链接，这样它就会在用户初次访问被chrome能够正确获取到，无论初次访问的是哪个页面；
- 在chrome中short_name声明是受欢迎的，并且会使用到应用名上；
- 为不同分辨率的屏幕定义图标集合。chrome将尝试使用最接近48dp的图标，例如，96px在2x设备，而144px是用在3x设备；
- 记住添加一个尺寸对splash screen敏感的图标并不要忘记设置background_color；
更多阅读：
为IOS上的Safari添加主屏幕元素
在你的indexhtml中，添加如下内容到你的<head>元素底部：
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png">
为windows添加图标
在你的indexhtml中，添加如下内容到你的<head>元素底部：
<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
测试一下
在以下内容，我们将呈现一些测试你的网页应用的manifest的方法。
第一个方法就是DevTools。打开Application面板的Manifest栏。如果你正确添加了manifest信息，你将能够看到它被解析且以人性化的格式展示在这个栏目。
你可以在这个栏目测试添加到主屏幕的特性。点击Add to homescreen按钮，你应该看到在你的URL栏下的一条“add this site to your shelf”信息，如下图截图所示。
这是一个桌面和手机等效的添加到主屏幕的特性。如果你可以成功的在桌面触发，那么可以确保你，那些手机用户也可以添加你的应用到他们的设备上。
第二个方法通过Web Server for Chrome来测试。通过这个方法，你可以暴露你的本地服务器（在你的桌面或者手持电脑上）给其他计算机，然后，你可以通过一个真的手机设备访问你的PWA应用。
为远程访问打开一个端口来测试这一步是很简单的，但是远程访问可能会被你的网络管理员或者计算机的防火墙规则墙掉。为远程访问开端口且让这个持续运行在你的计算机上通常不是一个好的做法。因此，为了安全，当你已经完成这一步的测试，禁止掉Accessible on local network选项然后重新启动你的web server。
在Web Server for Chrome应用配置对话窗口，选择Accessible on local network选项：
切换Web Server到关闭然后回到开启。你将看到一个可以用于你远程访问你的app的新的URL。
现在，用一个手机设备使用新的URL来访问你的网站。
当你用这种方法测试时，你将看到service worker在console控制台中报错，因为service worker没有通过HTTPS协议服务。
在安卓设备使用chrome浏览器，试着添加应用到主屏幕并验证其启动屏是否正确显示，图标是否正确。
在Safari和IE上，你也可以手动添加你的应用到主屏幕上。