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. 优势与劣势

优势:

  1. 超简单的安装和下载。
    以谷歌发布的 squoosh.app 为例。

PC 桌面版:
方式1:在浏览器输入并打开 squoosh.app 之后。可以点击右上角【Install】进行安装。

在这里插入图片描述
方式2:可以点击右上角三个点的图标,然后选择【安装Squoosh】进行安装。

在这里插入图片描述
安装之后就可以在桌面看到快捷方式的图标,直接打开就可以拥有与原生应用媲美的沉浸式体验。

在这里插入图片描述
在这里插入图片描述
手机移动版:

  1. 首先在浏览器中输入并打开网址“squoosh.app”。
  2. 然后点击向上的图标,在弹出的选项中选择“添加到主屏幕”。

在这里插入图片描述

  1. 在弹出的【添加到主屏幕】编辑对话框中可以修改应用名称。

在这里插入图片描述

  1. 点击完成或者【添加】就可以将应用添加到主屏幕,下次直接打开就可以使用了。

在这里插入图片描述

  1. 发布迭代不需要第三方平台审核。
    我们都知道发布一个苹果应用是需要提交 App Store 商店进行审核,通过了方可发布成功的。安卓应用也是一样。并且更新迭代版本的时候也需要审核,还需要提交一些功能说明,图片等资料。但是网页版的应用就完全不需要这个审核过程,直接部署服务器就可以使用。
  2. 渐进式
    现有的 Web 项目可以通过 PWA 的几个核心技术点一步步转型成一个完整的 PWA 应用。

劣势:

  1. 因为推出的时间不长,所以现有浏览器的支持还不够全面, 不是每一款浏览器都能100%的支持所有的 PWA 特性。
  2. 对于底层硬件的调用还是需要依赖第三方库才能实现(如打开摄像头,实现语言功能等等)。
  3. 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 的时代已经不远了。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐