在移动应用领域,PWA(渐进式 Web APP)正逐渐崭露头角。它究竟是什么?有何独特之处?又将如何影响我们的生活?本文将深入探讨 PWA 的概念、特性、功能、优势与劣势以及发展前景,带您全面了解这一新兴技术。
什么是 PWA?
一、概念
PWA 是由 Google 在 2016 年提出的理念,于 2017 年正式付诸实践,2018 年取得重大突破。彼时,全球顶尖的浏览器厂商,如 Google、Microsoft、Apple 等,均已宣布对 PWA 技术予以支持。
PWA 全称为 Progressive Web App,中文译作渐进式 Web APP,其旨在借助各类 Web 技术,实现与原生 App 相近的用户体验。
审视当下 Web 应用与原生应用的对比差距,诸如离线缓存、沉浸式体验等方面,可通过已实现的 Web 技术来填补这些缺憾,最终达成与原生应用相近的用户体验效果。
二、特性
- 安全可靠
运用 Service Work 技术实现即时下载,当用户开启应用后,页面资源的加载不再全然依赖网络,而是借助 Service Work 缓存离线包存储于本地,以此确保为用户提供即时且可靠的体验。 - 访问迅捷
首屏可部署在服务端,从而节省网页请求时间,提升加载速度,拥有更为平滑的动态效果和快速的页面响应。 - 响应式界面
支持各类终端和屏幕。 - 沉浸式体验
在支持 PWA 的浏览器和手机应用上,可直接将 Web 应用添加至用户的主屏幕,无需从应用商店下载安装。自主屏幕打开应用后,可提供沉浸式的全屏幕体验。
三、功能
- 手机应用配置(Web App Manifest)
可通过 manifest.json 文件进行配置,使其能够直接添加到手机桌面上。 - 离线加载与缓存(Service Worker + Cache API)
可通过 Service Worker + HTTPS + Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。 - 消息推动与通知(Push & Notification)
实现实时的消息推送与通知。 - 数据及时更新(Background Sync)
进行后台同步,确保数据及时更新。
四、优势与劣势
优势:
- 安装和下载极为简便。
以谷歌发布的 squoosh.app 为例。
PC 桌面版:
方式一:在浏览器输入并开启 squoosh.app 之后,可点击右上角的【Install】进行安装。
此处插入图片描述
方式二:可点击右上角三个点的图标,接着选择【安装 Squoosh】进行安装。
此处插入图片描述
安装完成后,便可在桌面看到快捷方式的图标,直接打开即可拥有与原生应用相媲美的沉浸式体验。
此处插入图片描述
此处插入图片描述
手机移动版:
首先在浏览器中输入并打开网址 “squoosh.app”。
然后点击向上的图标,在弹出的选项中选择 “添加到主屏幕”。
此处插入图片描述
在弹出的【添加到主屏幕】编辑对话框中可修改应用名称。
此处插入图片描述
点击完成或【添加】,即可将应用添加至主屏幕,下次直接打开便可使用。
此处插入图片描述 - 发布迭代无需第三方平台审核。
我们知晓,发布一个苹果应用需提交 App Store 商店进行审核,通过后方可成功发布。安卓应用亦是如此,且更新迭代版本时也需审核,还需提交一些功能说明、图片等资料。然而,网页版的应用完全无需此审核过程,直接部署服务器即可使用。 - 渐进式
现有的 Web 项目能够通过 PWA 的几个核心技术点逐步转型为一个完整的 PWA 应用。
劣势: - 由于推出时间较短,现有浏览器的支持尚不全面,并非每一款浏览器都能 100% 支持所有的 PWA 特性。
- 对于底层硬件的调用仍需依赖第三方库来实现(如打开摄像头、实现语言功能等)。
- PWA 目前尚未广泛流行,国内一些手机生产商在 Android 系统上进行了某些操作,似乎屏蔽了 PWA,但当 PWA 真正盛行起来后,相信此问题将不复存在。
五、发展
谷歌
基于 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 如何实现与原生 App 相近的体验,它的发展前景怎样的内容,随着越来越多的浏览器大厂对 PWA 做出支持和优化,PWA 的时代已近在咫尺。
未经允许不得转载:WebApp中文站-PWA平台 » PWA 如何实现与原生 App 相近的体验?它的发展前景怎样?