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 的缺点更加弱化,也为开发者提供了对性能和体验的无限遐想。
说到这里 我们就想到这个新的特性浏览器的支持情况是什么样的

PWA学习文档沉淀_第1张图片

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

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

前端各个框架解决方案

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

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

你可能感兴趣的:(pwa)