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程序
大家也可以通过这些 自己体验测试一下。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。