最近读到一篇关于 PWA 的文章《WHAT WEB CAN DO TODAY?》,加之自己对 PWA 专题饶有兴趣,便抽空梳理了 PWA 目前的主流功能及功能描述。
一、PWA 与无缝体验
离线模式
Web 应用程序可借助两种技术实现离线体验。较旧的实现方式即应用程序缓存,虽已在浏览器中广泛应用,但因存在诸多概念和设计缺陷,正逐渐被弃用。现代的替代方案是 Cache API,可在 Service Worker 中使用。在 HTTPS 环境下运行的 Web 应用程序能请求浏览器安装独立的代码单元。这个单元与所属的 Web 应用程序分开运行,并通过事件与之进行通信。Service Worker 是渐进式 Web 应用程序(PWA)理念的重要基础构建,除了作为推送通知、后台同步或地理围栏等多个复杂 API 的推动者之外,还能充当功能完备的 Web 代理。它可以拦截所有 HTTP 请求,改变其内容或行为,甚至管理离线缓存。
Background Sync API
Background Sync API 能让获得授权的 Web 应用程序不依赖稳定的互联网连接,将与 Web 相关的操作推迟到网络连接可用之时。该 API 与 Service Worker 绑定,Service Worker 是一种与所属 Web 应用程序分离的代码执行模式,使得后台同步即使在应用程序窗口关闭后也能运行。Background Sync API 本身只是向应用程序发出已恢复连接信号的一种方式。它可与任何离线存储解决方案配合使用,以实现数据同步方案或重放应用程序离线时发出的网络请求的机制。
Payment Request API
Payment Request API 允许 Web 应用程序将付款结账流程委托给操作系统,从而使其能使用平台原生可用且为用户配置的任何方法和付款提供商。这种方式减轻了应用程序端处理复杂结账流程的负担,缩小了支付提供商集成的范围,并确保用户更熟悉操作流程。
Credential Management API
Credential Management API 能让获得授权的 Web 应用程序以编程方式为用户存储和请求用户凭证,比如登录名和密码或联合登录数据。该 API 提供了浏览器内置或第三方密码存储的替代方案,允许 Web 应用程序检测何时以及如何存储和读取凭证,例如提供自动登录功能。
二、PWA 与原生行为
Local Notifications
通过 Notifications API 提供的通知,能让获得授权的 Web 应用程序以标准化的方式吸引用户的注意力。这些通知由在浏览器选项卡中运行的 Web 应用程序生成,并呈现给浏览器选项卡区域之外的用户。
Push Messages
Push Messages 是移动平台上广为人知的功能,能让获得授权的 Web 应用程序让用户订阅远程服务器发送的消息,即便 Web 应用程序当前未在浏览器中聚焦,这些消息也能触发向订阅者显示通知。该消息可以传送加密的有效载荷,并且可以请求显示自定义操作按钮。
Foreground Detection
Page Visibility API 对 Web 应用程序了解当前是否显示在前台非常有用,尤其是在不需要时停止资源密集型 UI 动画或数据刷新。在移动设备上,这样做的主要原因是减少电池消耗。
User Idle Detection
User Idle Detection API 允许 Web 应用程序检测用户不活动的状态,即系统中没有生成用户驱动的事件或屏幕被锁定。与之前的前台检测功能不同,此 API 不依赖于当前选项卡活动,它能检测用户何时离开设备但未锁定设备或已变为非活动状态,无论哪个选项卡处于活动状态。
Permissions API
Permissions API 为 Web 应用程序提供了统一的方式来查询可能需要用户同意的功能(如通知或地理位置)的权限状态。通过 Permissions API,应用程序可以列出用户授予的权限,而无需实际触发该功能本身。
Task API
首个提案称为定期后台同步 API,它解决了后台数据同步用例,补充了后台同步功能。它允许 Web 应用程序注册周期性事件,从而唤醒 Service Worker,并无需用户交互即可执行 HTTP 请求。截至 2020 年初,该 API 仅在 Google Chrome 80+ 中进行实验性使用,并且其使用仅限于具有足够高参与度的已安装应用程序。该 API 不保证同步的间隔,但允许通过 minInterval 参数请求最小间隔。为避免滥用,实际间隔取决于网络可信度和用户使用应用程序的频率等诸多因素。
三、PWA 与应用生命周期
Home Screen Installation
Web 应用程序可以通过提供 manifest.json 文件标准化为 Web Manifest,指定将应用程序视为目标平台上的一等公民所需的功能和行为,比如添加(“install”)到主屏幕,具有相关图标、全屏行为、主题、无浏览器栏的独立外观等,同时还可以作为放置与 Web 应用程序关联的所有元数据的集中位置。
Freeze/Resume Detection
Page Lifecycle API 是对先前存在的页面状态更改事件的补充,包括前台检测和焦点信息。当非活动应用程序的选项卡将被冻结以优化 CPU 和电池使用以及在后续激活时恢复时,它允许 Web 应用程序注册浏览器生成的事件。该 API 还提供了 wasDiscarded 标志,可以检测冻结选项卡已被丢弃(从内存中删除)并在恢复时需要加载新页面的情况。对于这种页面加载,该标志将设置为 true。截至 2020 年春季,该 API 仅在基于 Chromium 的浏览器中实现。
PWA 以丰富的功能和不断发展的特性,为 Web 应用带来了新的活力和可能性,上面关于PWA的内容还只是其中一部分,完全不能覆盖掉PWA 的特性与优点,大家还有补充吗,欢迎一起交流。
未经允许不得转载:WebApp中文站-PWA平台 » PWA 在2024年开始火了?细数众多特征带你一文了解PWA!