pwa认识

[HolyZheng]

特点

PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接

pwa是应用多项技术的web app

pwa代表了让 Web Pages 能成为 Web Apps 的一系列技术 其核心技术包括 App Manifest、Service Worker、Web Push，等等。

• Service Worker 通过浏览器网络代理提供web离线缓存能力
• Add To Home Screen 让页面可以被添加到手机主屏
• Web Push & Notifications 提供通知推送功能增加web站点与用户互动能力
• 等等

  Native APP 缺陷

• 由于其天生封闭的基因，内容无法被索引
• 用户 80% 的时间被 Top3 的超级 App 占据，对于站点来说，应用分发的性价比也越来越不划算
• 要使用它，首先还需要下载几十兆上百着兆的安装包

  web app 缺陷

  web app虽然开发，但是用户体验一直是个坎，做过努力如: virtual dom、spa、混合编程、用canvas将整个页面画出来等，但是仍存在问题

• 离线时用户无法使用
• 无法接收消息推送
• 移动端没有一级入口

pwa目标

PWA的核心目标就是提升 Web App 的性能，改善 Web App 的用户体验。媲美native的流畅体验，将网络之长与应用之长相结合。

开发步骤

1. 先实现基础web功能

因为pwa也是一个web应用，我们首先需要完成web页面的功能。

2. 页面代理 Service Worker

注册激活Service Worker

3. 缓存策略

• 网络优先：首先查看网络，当网络失败时应用本地缓存。这一策略适合实时数据，比如获取天气信息的 AJAX 请求。
• 先缓存后网络：对于实时性要求不高的数据，还可以先使用缓存更新页面，再去触发网络请求。

  4.应用清单

  Web App Manifest只需作为一个普通的 link 标签引入到HTML页面中。可实现的PWA特性包括： App Install Banner，桌面图标和文字，以及启动页面的 UI 元素。