PWA

PWA是什么

Progressive Web App(渐进式网页应用),简称 PWA,是由Google提出的,提升Web App的使用体验的一种新方法。

理解PWA
PWA不是特指某一项技术,而是应用了多项前沿技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push等等。

渐进式:核心技术的浏览器支持度不高,如果你构建一个 PWA,即使在一个不支持的老旧浏览器上运行,它仍然可以作为一个普通的网站来运行。只有在支持这些新功能的浏览器中才会增强体验。

示例 豆瓣网页版(安卓手机)

PWA 核心技术

  1. Web App Manifest, 即通过一个名为manifest.json清单文件向浏览器暴露 web app的元数据,包括名字、icon 的 URL 等,以备浏览器使用。比如在添加至主屏或推送通知时暴露给操作系统,从而增强 web 应用与操作系统的集成能力。
  2. Service Workers ,是一个可编程的 Web Worker,实际上是一段在后台运行的脚本,独立线程,独立于当前网页进程,有独立的 worker context。
    Service Worker 的出现是为了实现web app的离线使用、消息推送的功能。
    它就像一个位于浏览器与网络之间的客户端代理(空中管制员),可以拦截和处理流经的http请求,可以缓存文件,缓存的文件可以被网页进程取到(包括网络离线状态)。
  3. Push Notification,Push API 的出现则让推送服务具备了向 web 应用推送消息的能力。

代码示例

相关学习资料

  1. Progressive Web Apps (PWA) 中文版: http://sangka-z.com/PWA-Book-CN/
    https://lavas.baidu.com/pwa/README
  2. 基于Vue 的PWA 完整解决方案LAVAS:https://lavas.baidu.com/pwa/README
  3. 知乎话题: 渐进式网络应用程序(PWA)https://www.zhihu.com/topic/20073560/hot
0%