PWA 学习沉淀

PWA 是什么？
Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。是一种 app 的模型。依赖于 web 相关的 api 提供和 native-app 的体验。

为什么会出现？

• 访问网页时请求数据的延迟，带来的白屏体验
• web 强依赖问题 需要依赖客户端来访问
• pwa 能够显著的提升应用的加载速度，并且支持离线访问
• 用户体验问题，如果一个站点等待时间超过 3 秒，根据数据统计 53% 的用户会放弃等待。即使是在网络较差的情况下也能够借助 Service Worker 正常访问
• 安全问题，pwa 通过 HTTPS 协议提供服务，防止窥探和确保内容不被篡改
• 可以添加常用的 app 到桌面，免去去应用商店下载的麻烦，可离线通知消息，增加用户粘性。

PWA 特性 / 特点

• 渐进式 – 适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的
• 连接无关性 – 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
• 类似应用 – 由于是在 App Shell 模型基础上开发，因为应具有 Native App 的交互和导航，给用户 Native App 的体验
• 持续更新 – 始终是最新的，无版本和更新问题
• 安全 – 通过 HTTPS 协议提供服务，防止窥探和确保内容不被篡改
• 可索引 – 应用清单文件和 Service Worker 可以让搜索引擎索引到，从而将其识别为『应用』
• 粘性 – 通过推送离线通知等，可以让用户回流
• 可安装 – 用户可以添加常用的 webapp 到桌面，免去去应用商店下载的麻烦
• 可链接 – 通过链接即可分享内容，无需下载安装

Service Worker
W3C 组织早在 2014 年 5 月就提出过 Service Worker 这样的一个 HTML5 API，主要用来做持久的离线缓存。

• Service Worker 有以下功能和特性：
• 一个独立的 worker 线程，独立于当前网页进程，有自己独立的 worker context。
• 一旦被 install，就永远存在，除非被手动 unregister
• 用到的时候可以直接唤醒，不用的时候自动睡眠
• 可编程拦截代理请求和返回，缓存文件，缓存的文件可以被网页进程取到（包括网络离线状态）
• 离线内容开发者可控
• 能向客户端推送消息
• 不能直接操作 DOM
• 必须在 HTTPS 环境下才能工作
• 异步实现，内部大都是通过 Promise 实现

所以 Service Worker 主要做的就是让缓存做到优雅和极致，让 web-app 相对于 native-app 的缺点更加弱化，也为开发者提供了对性能和体验的无限遐想。
说到这里 我们就想到这个新的特性浏览器的支持情况是什么样的

看到这里 还是一大部分都在支持的 可以访问 service 支持情况 看最新的浏览器支持情况

如何使用 service worker 当前网站可以看到大部分的信息 这里就不写了。

前端各个框架解决方案

• react react-pwa
• vue lavas 一个基于 vue 的 pwa 的解决方案
• angular 通过 Angular CLI 来创建 PWA 程序

大家也可以通过这些 自己体验测试一下。