几分钟快速读懂渐进式 Web 应用 PWA

JordanMilo 发布于1年前
0 条问题

几分钟快速读懂渐进式 Web 应用 PWA

渐进式 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 应用

渐进式 Web 应用首先是一种应用,它 根据设备的支持情况来提供更多功能 ,提供离线能力,推送通知,甚至原生应用的外观和速度,以及对资源进行本地缓存。

这一技术最早由 Google 在 2015 年推出,它会为开发人员和用户带来很多好处。

开发人员可以使用 Web 技术栈构建 近乎一流 的应用程序。一般认为这种做法比构建原生应用更容易,成本更低。尤其是在考虑构建和维护跨平台应用程序时更是如此。

开发者们可以 降低安装门槛 ,而对于 99.99% 的应用来说,把它们放在商店并没有为其知名度带来什么实际作用。

渐进式 Web 应用是一个网站,它使用了某些开发技术,使其体验比普通针对移动优化的网站体验更好。它使用起来就像是在使用一个原生应用一样,因为它有如下特性:

  • 支持离线使用

  • 快速加载

  • 安全

  • 有推送通知

  • 可以提供没有地址栏的全屏体验,让用户感到身临其境

移动平台(目前只是 Android,但技术上来说并无限制)提供了越来越多对渐进式 Web 应用的支持。在用户访问这些网站的时候,它们甚至请求用户把应用 添加到主屏

不过首先,要澄清一下其名称。渐进式 Web 应用可能是一个 不清晰的术语 ,而更好的定义是:它们是一种 Web 应用,利用现代浏览器特性(比如 Web Worker 和 Web 应用清单),让移动设备对其“升级”,使之成为一等公民角色的应用程序。

渐进式 Web 应用的替代方案

在 PWA 构建移动端体验的时候,与其替代方案相比会是什么情况?

来看看各自的优缺点,看看 PWA 更适合哪些情况。

原生移动应用

原生移动应用是构建移动应用最常见的方式。iOS 的 Objective-C 和 Swift,Android 的 Java/Kotlin 以及 Windows Phone 的 C# 都是原生移动应用的开发技术。

每个平台都有其自己的 UI 和 UX 习惯,原生组件也提供着用户预期的体验。它们可以通过平台的应用商店分发和部署。

使用原生应用的痛点在于,要跨平台开发就要学习、掌握各种不同的方法和最佳实践并保持知识的更新。例如,你有一个小团队,或者你就是独立开发者,想在 3 个平台上构建一个应用,那就需要花大量的时间来学习不同的技术并熟悉不同的开发环境。你还会花大量的时间来管理不同的库和不同的工作流程(比如 iCloud 只在 iOS 设备中存在,并没有 Android 版本)。

Hybrid(混合)应用

Hybrid 应用程序使用 Web 技术构建,但由应用商店发布。它有一个中间技术框架,或者其它方式来对应用程序打包,使其可以发布在传统的应用商店中。

有一些最流行的平台,比如 Phonecap 和 Ionic Framework 等,通常是通过 WebView 让你看到页面甚至是一个本地网站。

我最初将 Xamarin 也写进去了,但 Carlos Eduardo Pérez 明确指出 Xamarin 会生成原生代码。

Hybrid 应用最关键的一点在于 只写一次,随处可用 的概述。构建的时候会生成不同平台的代码,而写应用本身只需要使用 JavaScript、HTML 和 CSS。设备功能(麦克风、摄像头、网络、GPS……)都有相应的 JavaScript API。

构建 Hybrid 应用的糟糕之处在于,除非你要进行卓越的工作,否则你会倾向于共有特性。这最终会产生一个在所有平台上都不是最好的应用,因为它忽略了特定于平台的人机交互。

再者,复杂视图还可能有性能方面的影响。

使用 React Native 构建的应用

React Native 通过 JavaScript API 给出了在移动设备的原生控制指令,但你是在高效地创建原生应用程序,而不是在 WebView 上嵌入网站。

他们与混合应用的格言有所不同,是:仅 学习一次,随处可编码 。这意味着跨平台的方法是相同的,但你将创建完全独立的应用程序,以便在每个平台上提供出色的用户体验。

性能与原生应用程序相当,因为你构建的应用程序本质上是原生的,只是通过 App Store 分发而已。

渐进式 Web 应用特性

前面介绍了渐进式 Web 应用的竞争对手。那么渐进式 Web 应用拿什么来跟人家比,它主要的特性是什么?

记住——现在,渐进式 Web 应用仅被 Android 支持。

特性

渐进式 Web 应用有一个与上述各种方式完全不同的特征: 它不会部署到应用商店

这是关键优势。如果你足够幸运,应用商店会让你的应用像病毒一样迅速传播开去。但是除非你处于排行榜的前 0.001%,否则你不会从应用商店那一小块地方获得多少好处。

渐进式 Web 应用使用搜索引擎来发现 ,当用户进入你发布了 PWA 的网站, 设备中的浏览器就会询问用户是否将 App 安装到主屏上 。这会起到很大的作用,因为正规的 SEO 可以应用到你的 PWA 中,减少对通过支付方式来获得应用的依赖。

不在应用商店中就意味着 你不需要苹果或者谷歌的批准就 可以装入用户的口袋。你可以在需要时发布更新,不必通过标准审批过程(这是 iOS 应用的典型处理方式)。

PWA 基本上都是 HTML5 应用/响应式的网站,以及一些关键技术,这些技术最近已经使部分关键特性成为可能。如果你还记得,原来的 iPhone 没有开发原生应用的选项。开发人员被告知要开发可以安装在主屏上的 HTML5 移动应用,但是当时技术还未准备好。

渐进式 Web 应用是 离线运行

使用 Service Worker 可以让应用保存内容更新,它会在后台下载内容,并提供对 推送消息 的支持,从而提供更大的重连机会。

同时,其共享性使得对于希望分享应用程序的用户会有更好的体验,因为一个 URL 足矣。

优势

那么,为什么用户和开发者会关注渐进式 Web 应用呢?

  1. PWA 更轻量。原生应用可能占用 200 MB或更多空间,而 PWA 可能在 KB 范围内。

  2. 不需要原生平台代码

  3. 获取成本较低(说服用户安装应用要比访问网站进行初次体验要困难得多)

  4. 构建和发布更新需要极少的精力

  5. 比普通的应用商店中的应用程序可以得到更深入的支持

核心概念

  • 响应式: UI 自适应设备屏幕大小

  • 类 APP 体验: 它不应该感觉像网站,而应该(尽可能地)更像 APP

  • 离线支持: 它将使用设备存储以提供离线体验

  • 可安装的: 设备浏览器可提示用户安装你的 APP

  • 重新参与: 推送通知以帮助用户在安装之后重新探索你 APP 中功能

  • 可发现的: 搜索引擎及 SEO 优化比应用商店可提供更多用户

  • 新颖: 一旦 APP 是在线的,它会更新自身及其内容

  • 安全: 它使用 HTTPS

  • 渐进式: 它可以在任何设备上工作,包括老旧设备,即使功能受限(例如,只是和网站类似,不可安装)

  • 可链接的: 使用 URL 时非常易于指向

Service Workers

渐进式 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 的完整指南。

查看原文: 几分钟快速读懂渐进式 Web 应用 PWA

  • greendog
  • bluelion
  • blacktiger
  • greenfrog
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。