你能用这项技术做什么？

使用PWA能让你的web网页在支持使用最新版本Chome浏览器的桌面端（window，mac）和移动端（ios、android）生成类似原生应用的Chrome应用。

Chrome应用除了提供可访问的web页面功能，还可提供独立应用访问、消息推送、离线消息推送（需代理）、应用热更新功能。

适合人群

希望给自己的web赋能，具备独立应用访问、消息推送、离线消息推送和应用热更新的人。

例如：让一个客户管理系统能在window、mac系统上像原生应用一样提供给用户使用，还能在有客户消息的时候实现通知，新版本更新的时候进行通知，重新打开应用或刷新的时候自动更新。

你可以学到什么

PWA总览
这篇文章主要告诉你如何创建第一个基本的PWA应用。

应用激活与安装

Chrome中Application
可以从Chrome devTools 中看到一个应用分为Manifest、Service Workers、Storage 三个部分。

manifset.json的目标是将web应用程序安装到主目录，为用户提供更快的访问和更丰富的体验

激活与安装

Manifest

manifest 是一个在页面中引用的manifset,json文件，一般在html页面的head标签中进行声明。通过给web页面增加声明文件，浏览器可以识别当前PWA应用并支持将应用添加到主屏。

<head><!-- 应用描述文件 --><link rel="manifest" href="path/manifest.json">
</head>

manifset.json 示例

{"name": "这里输入PWA项目的名称","short_name": "这里输入PWA项目的简称","start_url": "指定项目启动的url地址","display": "standalone","background_color": "red","theme_color": "green","icons": [{"src": "path/logo-192.png","sizes": "192x192", // icon 不能小于 144x144"type": "image/png"}]
}

manifset 中的配置信息会作为PWA应用的描述信息。
配置引用成功之后，可以在devTools上查看到对应信息。
Application示例
激活Service Worker后正确安装的PWA应用会在浏览器端提示，manifset中配置的信息就会在其中生效。
提示当前web页面可以作为网站被安装
对应配置文件的name
安装应用时，弹窗提示应用的名称以及对应域名。
对应的name+title
应用安装之后，应用标题被设置为manifset文件配置的name，和html文件中配置的title的组合。AplicationBar的背景颜色被设置为manifset.json文件中配置的theme_color。