PWA web应用模型


2018年的第一篇博客,最近都去挤图书馆了,希望新年新气象。。。

简介

PWA 是一门Google推出的web前端新技术,全称是Progressive Web App,是Google在2015年提出,2016年6月推广的项目,是结合了一系列现代Web技术的组合,在网页应用中实现和原生应用相近的用户体验。

PWA并不是描述一个技术,而是一些技术的合集。PWA 是专门应对手机 Web 开发而提出的,通过新技术的成熟,实现最好的 Web + 手机 APP。就是说,让你在使用 Web 的时候感觉像是在使用 APP。

PWA特性

  • 渐进式: 确保每个用户都能打开网页;
  • 响应式: PC、手机、平板、不管哪种格式,网页都能完美适配
  • 离线响应: 支持用户在没有网的情况下都能打开网页,这里需要service worker;
  • APP化:能够像APP一样和用户进行交互
  • 常更新: 一旦web网页有什么改动,都能立即在用户端体现出来
  • 安全: 安全是第一位,给自己的网站加上一把绿锁-HTTPS;
  • 可搜索: 能够被引擎搜索到
  • 推送: 做到在不打开网页的情况下,推送新的消息
  • 可安装: 能够将web像App一样添加到桌面,不需要通过应用商店
  • 可跳转: 只要通过一个连接就可以跳转到你的web页面。(通过 URL 可以轻松分享应用,不用复杂的安装即可运行)

PWA 需要的技术

  • push(推送消息)
  • cache
  • manifest(应用清单:定义了一个基于JSON的清单,为开发人员提供一个放置与Web应用程序关联的元数据的集中地点)
  • responsive dev
  • material design
  • service worker(一部分是 cache,还有一部分则是 Worke)

PWA与其他APP

  • Native APP
    指原生App,是一个完整的App,可拓展性强,需要用户下载安装使用

  • Web APP
    指采用Html5语言写出的App,生活在浏览器里的应用,不需要下载安装

  • Hybird app
    半原生半Web的混合类App,需要下载安装

PWA在中国

总结

感觉 PWA 涉及到的 API 比较多。要想研究透彻 PWA 还需要研究它所涉及到的 API ,慢慢研究吧。

posted @ 2018-01-08 21:40  美美王子  Views(322)  Comments(0Edit  收藏  举报