渐进式 Web 应用(Progressive Web Apps,PWA)是在移动应用开发领域使用 Web 技术的最新趋势。在写本文的时候(2018年初),它只适用于 Android 设备。
很快,PWA 会在 iOS 11.3 和 macOS 10.13.4 中得到支持。
Safari 和移动版 Safari 的后台技术,Webkit,最近宣称他们已经在向浏览器引入 Service Wroker。也就是说,它们很快就会在 iOS 设备中实现。因此,如果苹果鼓励这种方式,渐进式 Web 应用的概念将可适用于 iPhone 和 iPad。
这并不是突破性的新技术,而是一个新的术语,它描述了一组基于 Web 应用创建更佳体验的技术。
渐进式 Web 应用是一个网站,它使用了某些开发技术,使其体验比普通针对移动优化的网站体验更好。它使用起来就像是在使用一个原生应用一样,因为它有如下特性:
支持离线使用
快速加载
安全
有推送通知
可以提供没有地址栏的全屏体验,让用户感到身临其境
移动平台(目前只是 Android,但技术上来说并无限制)提供了越来越多对渐进式 Web 应用的支持。在用户访问这些网站的时候,它们甚至请求用户把应用添加到主屏。
不过首先,要澄清一下其名称。渐进式 Web 应用可能是一个不清晰的术语,而更好的定义是:它们是一种 Web 应用,利用现代浏览器特性(比如 Web Worker 和 Web 应用清单),让移动设备对其“升级”,使之成为一等公民角色的应用程序。
在 PWA 构建移动端体验的时候,与其替代方案相比会是什么情况?
来看看各自的优缺点,看看 PWA 更适合哪些情况。
原生移动应用是构建移动应用最常见的方式。iOS 的 Objective-C 和 Swift,Android 的 Java/Kotlin 以及 Windows Phone 的 C# 都是原生移动应用的开发技术。
每个平台都有其自己的 UI 和 UX 习惯,原生组件也提供着用户预期的体验。它们可以通过平台的应用商店分发和部署。
使用原生应用的痛点在于,要跨平台开发就要学习、掌握各种不同的方法和最佳实践并保持知识的更新。例如,你有一个小团队,或者你就是独立开发者,想在 3 个平台上构建一个应用,那就需要花大量的时间来学习不同的技术并熟悉不同的开发环境。你还会花大量的时间来管理不同的库和不同的工作流程(比如 iCloud 只在 iOS 设备中存在,并没有 Android 版本)。
Hybrid 应用程序使用 Web 技术构建,但由应用商店发布。它有一个中间技术框架,或者其它方式来对应用程序打包,使其可以发布在传统的应用商店中。
有一些最流行的平台,比如 Phonecap 和 Ionic Framework 等,通常是通过 WebView 让你看到页面甚至是一个本地网站。
我最初将 Xamarin 也写进去了,但 Carlos Eduardo Pérez 明确指出 Xamarin 会生成原生代码。
Hybrid 应用最关键的一点在于只写一次,随处可用的概述。构建的时候会生成不同平台的代码,而写应用本身只需要使用 JavaScript、HTML 和 CSS。设备功能(麦克风、摄像头、网络、GPS……)都有相应的 JavaScript API。
构建 Hybrid 应用的糟糕之处在于,除非你要进行卓越的工作,否则你会倾向于共有特性。这最终会产生一个在所有平台上都不是最好的应用,因为它忽略了特定于平台的人机交互。
再者,复杂视图还可能有性能方面的影响。
前面介绍了渐进式 Web 应用的竞争对手。那么渐进式 Web 应用拿什么来跟人家比,它主要的特性是什么?
记住——现在,渐进式 Web 应用仅被 Android 支持。
渐进式 Web 应用有一个与上述各种方式完全不同的特征:它不会部署到应用商店。
这是关键优势。如果你足够幸运,应用商店会让你的应用像病毒一样迅速传播开去。但是除非你处于排行榜的前 0.001%,否则你不会从应用商店那一小块地方获得多少好处。
渐进式 Web 应用使用搜索引擎来发现,当用户进入你发布了 PWA 的网站,设备中的浏览器就会询问用户是否将 App 安装到主屏上。这会起到很大的作用,因为正规的 SEO 可以应用到你的 PWA 中,减少对通过支付方式来获得应用的依赖。
不在应用商店中就意味着你不需要苹果或者谷歌的批准就可以装入用户的口袋。你可以在需要时发布更新,不必通过标准审批过程(这是 iOS 应用的典型处理方式)。
PWA 基本上都是 HTML5 应用/响应式的网站,以及一些关键技术,这些技术最近已经使部分关键特性成为可能。如果你还记得,原来的 iPhone 没有开发原生应用的选项。开发人员被告知要开发可以安装在主屏上的 HTML5 移动应用,但是当时技术还未准备好。
渐进式 Web 应用是离线运行。
使用 Service Worker 可以让应用保存内容更新,它会在后台下载内容,并提供对推送消息的支持,从而提供更大的重连机会。
同时,其共享性使得对于希望分享应用程序的用户会有更好的体验,因为一个 URL 足矣。
渐进式 Web 应用的定义中有部分是这样说的:它必须支持离线工作。
由于允许 Web 应用程序脱机工作的是 Service Worker,这意味着 Service Worker 是渐进式 Web 应用强制要求的部分。
警告:Service Workers 目前仅支持 Chrome(桌面版和 Android 版)、Firefox 和 Opera 支持。有关支持浏览器的更新数据,请参阅 http://caniuse.com/#feat=serviceworkers。
提示:请勿将 Service Workers 与 Web Workers 混淆,他们是完全不同的概念。
Service Worker 是一个 JavaScript 文件,作为 Web 应用和网络之间的中间人。正因为如此,它可以提供缓存服务,加速应用程序渲染,并改善用户体验。
出于安全原因,只有 HTTPS 站点可以使用 Service Workers,这也是为什么必须通过 HTTPS 提供渐进式 Web 应用的原因之一。
用户首次访问应用程序时,Service Workers 在设备上不可用。在首次访问时,Web Worker 将被安装,在随后访问网站的不同页面时,Service Worker 将被调用。
请访问 https://www.writesoftware.org/topic/service-workers 查看 Service Workers 的完整指南。
评论删除后,数据将无法恢复
评论(1)