https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

  PWA是一些技术的集合。用于消除web与其他客户端之间的差距,最大程序利用现代浏览器的技术,提供一个更像移动应用的网页体验,改善了性能,支持离线,以及能实现一些只有移动应用可以的功能。

PWA特性

  • 渐进式增强:是“优雅降级、渐进增强” 的,给支持的设备更好的体验,不支持的设备也不会更差。
  • 响应式的用户界面:可以在其他任意设备上运行
  • 离线:通过service worker可以在离线或者网速较差的环境下工作
  • 类原生应用:拥有原生应用般的体验,因为它是建立在app shell model上的
  • 持续更新:受益于service worker的更新进程,应用能始终保持更新
  • 安全:通过https来提供服务,能避免内容窥探和替换
  • 可发现:通过W3C manifestservice worker registration标识应用,让搜索引擎能够找到web应用
  • 再次访问:消息推送等特性让用户再次访问变得容易
  • 可安装:允许用户把应用保留在主屏幕,不需要通过应用商店
  • 可连接:通过URL可以轻松分享应用,不需要复杂的安装即可运行

缺点

  • 门槛高:要求服务器部署https,service worker 涉及api众多,需要单独学习
  • 浏览器支持不够全面:但最近(2017-12)Safari也支持了
  • 用户不习惯:网页代替原生应用,如让用户习惯网页可以离线工作。用户短期内不适应。

关键技术

  • Manifest
  • Service Worker
  • Push Notification

PWA与其他App的对比

  • Native App:需要下载安装,用户体验好,可离线,速度快,性能高。但维护成本高,对于其他平台需要重新开发,应用商店审核效率低,流程复杂
  • Web App:运行在浏览器中,不需要安装,跨平台,支持的设备广泛,发布灵活(不需要应用商店审核),即时上线,用户可直接使用最新版本。需要处理浏览器兼容问题
  • Hybrid App:以上两种的混合App,需要下载安装,跨平台,Web人员方便快速构建,可以上传到应用商店,可以基于浏览器进行调试,但用户体验不如原生,性能慢,技术不是很成熟
05-27 21:16