浅谈PWA(Progressive Web App)
# 一、初识PWA
PWA，即Progressive Web App, 是提升Web App的体验的一种新方法，能给用户原生应用的体验。- 一个
PWA应用首先是一个网页, 可以通过Web技术编写出一个网页应用. 随后添加上App Manifest和Service Worker来实现PWA的安装和离线等功能
# 1.1 PWA中的一些技术
PWA本身其实是一个概念集合，它不是指某一项技术，而是通过一系列的Web技术与Web标准来优化Web App的安全、性能和体验。其中涉及到的一些技术概念包括了
Web App ManifestService WorkerCache API缓存Push、Notification推送与通知Background Sync后台同步- 响应式设计
# 1.2 解决了哪些问题
- 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
- 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
- 实现了消息推送
# 1.3 PWA存在的问题
- 支持率不高:现在
ios手机端不支持pwa，IE也暂时不支持Chrome在中国桌面版占有率还是不错的，安卓移动端上的占有率却很低 - 各大厂商还未明确支持
pwa - 依赖的
GCM服务在国内无法使用 - 微信小程序的竞争
尽管有上述的一些缺点，PWA技术仍然有很多可以使用的点。
service worker技术实现离线缓存，可以将一些不经常更改的静态文件放到缓存中，提升用户体验。service worker实现消息推送，使用浏览器推送功能，吸引用户 渐进式开发，尽管一些浏览器暂时不支持，可以利用上述技术给使用支持浏览器的用户带来更好的体验
# 二、PWA的实现
# 2.1 Manifest实现添加至主屏幕
<!--index.html-->
<head>
<title>Minimal PWA</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="/e.png" type="image/png" />
</head>
@前端进阶之旅: 代码已经复制到剪贴板
// manifest.json
{
"name": "Minimal PWA", // 必填 显示的插件名称
"short_name": "PWA Demo", // 可选 在APP launcher和新的tab页显示，如果没有设置，则使用name
"description": "The app that helps you understand PWA", //用于描述应用
"display": "standalone", // 定义开发人员对Web应用程序的
