PWA学习文档沉淀

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程序

你们也能够经过这些 本身体验测试一下。