# 一、初识PWA

PWA，即Progressive Web App, 是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能

# 1.1 PWA中的一些技术

PWA本身其实是一个概念集合，它不是指某一项技术，而是通过一系列的Web技术与Web标准来优化Web App的安全、性能和体验。其中涉及到的一些技术概念包括了

Web App Manifest
Service Worker
Cache 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应用程序的