PWA(Progressive Web App,渐进式网页应用,逐渐接近原生app的web app)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。
PWA不能包含原生OS相关代码。PWA仍然是网站,只是在缓存、通知、后台功能等方面表现更好。Electron程序相当于包裹OS原生启动器(Launcher)的网站,未来,许多Electron程序可能转化为PWA。
1. 概念
PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。
PWA 全称为 Progressive Web App,中文译为渐进式 Web APP,其目的是通过各种 Web 技术实现与原生 App 相近的用户体验(用户体验逐渐接近原生App)。
纵观现有 Web 应用与原生应用的对比差距,如离线缓存、沉浸式体验等等,可以通过已经实现的 Web 技术去弥补这些差距,最终达到与原生应用相近的用户体验效果。
2. 特性
-
安全可靠
使用 Service Work 技术实现即时下载,当用户打开应用后,页面资源的加载不再完全依赖于网络,而是使用 Service Work 缓存离线包存在本地,确保为用户提供即时可靠的体验。 -
访问更快
首屏可以部署在服务端,节省网页请求时间,加载速度更快,拥有更平滑的动态效果和快速的页面响应。 -
响应式界面
支持各种类型的终端和屏幕。 -
沉浸式体验
在支持 PWA 的浏览器和手机应用上可以直接将 Web 应用添加到用户的主屏幕上,无需从应用商店下载安装。从主屏幕上打开应用之后,提供沉浸式的全屏幕体验。
3. 功能
-
手机应用配置(Web App Manifest)
可以通过 manifest.json 文件配置,使得可以直接添加到手机的桌面上。 -
离线加载与缓存(Service Worker+Cache API )
可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。 -
消息推动与通知(Push&Notification )
实现实时的消息推送与通知 -
数据及时更新(Background Sync )
后台同步,数据及时更新
4. 优势与劣势
优势:
- 超简单的安装和下载。
以谷歌发布的 squoosh.app 为例。
PC 桌面版:
方式1:在浏览器输入并打开 squoosh.app 之后。可以点击右上角【Install】进行安装。
方式2:可以点击右上角三个点的图标,然后选择【安装Squoosh】进行安装。
安装之后就可以在桌面看到快捷方式的图标,直接打开就可以拥有与原生应用媲美的沉浸式体验。
手机移动版:
- 首先在浏览器中输入并打开网址“squoosh.app”。
- 然后点击向上的图标,在弹出的选项中选择“添加到主屏幕”。
- 在弹出的【添加到主屏幕】编辑对话框中可以修改应用名称。
- 点击完成或者【添加】就可以将应用添加到主屏幕,下次直接打开就可以使用了。
- 发布迭代不需要第三方平台审核。
我们都知道发布一个苹果应用是需要提交 App Store 商店进行审核,通过了方可发布成功的。安卓应用也是一样。并且更新迭代版本的时候也需要审核,还需要提交一些功能说明,图片等资料。但是网页版的应用就完全不需要这个审核过程,直接部署服务器就可以使用。 - 渐进式
现有的 Web 项目可以通过 PWA 的几个核心技术点一步步转型成一个完整的 PWA 应用。
劣势:
- 因为推出的时间不长,所以现有浏览器的支持还不够全面, 不是每一款浏览器都能100%的支持所有的 PWA 特性。
- 对于底层硬件的调用还是需要依赖第三方库才能实现(如打开摄像头,实现语言功能等等)。
- PWA 现在还没那么火,国内一些手机生产商在 Android 系统上做了手脚,似乎屏蔽了 PWA, 但是等 PWA 真正流行起来之后,相信这个问题就不会存在了。
5. 发展
-
谷歌
基于 Chromium 开发的浏览器 Chrome 和 Opera 已经完全支持 PWA 。
这里说一下 Chromium 和 Chrome 的区别。
Chromium 是谷歌的开源项目,由开源社区去维护。拥有众多的版本包括Windows、Mac、Linux。国内所有的 “双核浏览器”,都是基于 Chromium 开发的,而我们下载的 Chromium 浏览器是其源码未经修改的直接编译版本。
Chrome 是基于 Chromium 开发的,是闭源的,跨平台多端支持,特性更加丰富。Google上线了两个新网站,web.dev 和 squoosh.app 都支持 PWA( web.dev 是宣传和推广 PWA 的,解释了 PWA 的几个关键技术。squoosh.app 是一个图片压缩工具) 。
-
微软
微软将 PWA 带到了 Windows 10。同时 Windows Edge(windows 10 之后微软推出的浏览器,比 IE更流畅、外观 UI 更舒适) 也支持 PWA。 -
IOS
随着 iOS 11.3 的发布,iOS 正式开始支持 PWA,可以将它放在苹果手机主屏。 -
Android
Twitter 和 Flipboard 都推出了 PWA,可以将它放在安卓手机主屏。 -
国内
国内支持 PWA 的应用有微博、淘宝、豆瓣和饿了么。
随着越来越多的浏览器大厂对 PWA 做出了支持和优化,PWA 的时代已经不远了。