基本概念

PWA,全称是Progressive Web App,不是某种技术,是一种提升Web App网站体验的理念。

一般认为至少包括三个基本功能

  • ①添加到桌面。可实现启动动画及隐藏地址栏。
  • ②离线缓存。无网络也可以加载展现并支持部分离线功能。
  • ③支持消息推送。包括显式的信息通知及在线及离线数据的动态更新。

关键技术

Service Worker

顾名思意,就是个独立的Worker,独立的线程,由web worker发展而来。

有四个关键特征

  • ①是由事件驱动的
  • ②可拦截所有页面的网络请求
  • ③可操作缓存
  • ④可推送

页面加载流程示意图

页面页面SWSW缓存缓存服务服务加载页面检查缓存缓存检查结果加载最新数据响应最新数据展现页面

兼容性

iOS 从2018年初的11.3已经开始支持。

Chrome及Chrome for Android都已经支持。

Firefox也已经支持。

标签: PWA, 前端, 加速

添加新评论