初识下一代Web应用模型--PWA

Progressive Web Apps

Posted by Li zirui on December 24, 2017

本篇博文参考以下大神的文章,想要了解更多的关于 PWA 的问题,可以访问一下链接或给我留言一起讨论学习

下一代 Web 应用模型 —— Progressive Web App 作者 hux

谷歌都在用 PWA 你还不用? 作者 小吉米

什么是 PWA

PWA 是 Progressive Web Apps 的缩写,是 Google 最近在提的一种 Web App 形态,可以让 Web App 从标签页跳出来,同时保持 Web 的灵魂

PWA 有什么用?

不多废话,直接上图对比。
这是在我手机上打开我的微博的样子

然后点击右上角的“添加到主屏幕”

在自己的手机上就会出现这个

然后点击它

会发现浏览器已全屏的模式打开了我的微博,当然 PWA 的作用并不仅于此

打开飞行模式,让手机断网

然后点击我的第一篇博文,会神奇的发现,可以打开,而且图片也都加载好了

当然,这些只是 PWA 的一个很小的功能,Google 要把 PWA 做成 Native 应用一样,只有这些可是不够的。

PWA 原则

当然,并不是所有的 Web 都叫做 PWA。根据 google 定义,PWA 应该具有一下特性:

  • 渐进式:能确保每个用户都能打开网页
  • 响应式:PC,手机,平板,不管哪种格式,网页格式都能完美适配
  • 离线应用:支持用户在没网的条件下也能打开网页,这里就需要 Service Worker 的帮助
  • APP 化:能够像 APP 一样和用户进行交互
  • 常更新:一旦 Web 网页有什么改动,都能立即在用户端体现出来
  • 安全:安全第一,给自己的网站加上一把绿锁–HTTPS
  • 可搜索:能够被引擎搜索到
  • 推送:做到在不打开网页的前提下,推送新的消息
  • 可安装:能够将 Web 想 APP 一样添加到桌面
  • 可跳转:只要通过一个连接就可以跳转到你的 Web 页面

#PWA 的支持情况?

目前 PWA 技术,或者说是 PWA 背后的几个关键技术都能得到支持了没有,现在还只有(Chrome、Oprea、Samsung Internet、Firefox)都已经实现了 PWA 所需的所有关键技术,并已经开始探寻更多的可能性。(Edge)也很积极,所有的特性都已经处于【正在开发中】的状态。(Safari)呢?IOS肯定是不希望第三方应用脱离于 App Store 的管理,但是这两天得到了一个消息:Safari支持Service Worker了!,在Safari 46 技术预览版里,发布了一个重大更新,在新的桌面版 Safari 里将默认打开 Service Worker,这意味着苹果正在逐步接受 PWA,我们将进入 PWA 的时代。

#结语

如果你对 PWA 技术感兴趣的话,可以访问我上面的链接深入学习,也可以找我一起讨论学习,我也会一直学习和关注 PWA 技术。

by 李孜锐,2017.12.24