渐进式 Web 应用
**渐进式 Web 应用**(PWA)是使用 Web 平台技术构建的应用,但能提供类似于平台特定应用的用户体验。
与网站一样,PWA 可以从单个代码库在多个平台和设备上运行。与平台特定应用一样,它可以安装在设备上,可以在离线和后台运行,并且可以与设备以及其他已安装的应用集成。
指南
这些指南对 PWA 的不同方面进行了概念性解释。它们旨在帮助你了解 PWA 可以实现哪些功能,并提供足够的提示来帮助你了解如何实现这些功能。
- 什么是渐进式 Web 应用?
-
对 PWA 的介绍,将其与传统网站和平台特定应用进行比较,并概述其主要功能。
- 使 PWA 可安装
-
PWA 的一个定义性方面是它可以安装在设备上,然后对用户显示为平台特定应用,成为其设备的永久功能,用户可以像启动任何其他应用一样直接从操作系统启动它。在本指南中,我们将探讨“可安装”的含义,PWA 需要提供什么才能使其可安装,以及如何自定义安装体验。
- 安装和卸载 Web 应用
-
本指南介绍了用户如何在设备上安装和卸载 PWA。
- 离线和后台操作
-
在本指南中,我们将介绍一组技术,这些技术使 PWA 即使在设备网络连接间歇性中断时也能提供良好的用户体验,并在后台执行操作,即使主应用未运行。
- 缓存
-
对使 PWA 能够在本地缓存资源的 API 的概述,以及 PWA 用于实现离线功能的一些常用策略。
- PWA 最佳实践
-
PWA 应适应不同的浏览器和设备,具有可访问性、良好的性能,并能很好地与操作系统集成。本指南提供了一系列最佳实践,以帮助你确保你的 PWA 尽可能好。
操作方法
这些指南提供了有关如何实现特定 PWA 功能的具体详细说明。
- 创建独立应用
-
描述如何指定在启动 PWA 时应在自己的专用窗口中启动它,而不是浏览器选项卡。
- 定义你的应用图标
-
描述如何在设备上安装 PWA 时定义自己的图标集。
- 自定义应用的颜色
-
描述如何为 PWA 设置背景和主题颜色。
- 显示徽章
-
描述如何在 PWA 的图标上显示徽章:例如,让用户知道他们收到了新消息。
- 将常见应用操作公开为快捷方式
-
描述如何公开 PWA 的常见操作,这些操作可以从操作系统的应用快捷菜单启动。
-
描述 PWA 如何使用操作系统的应用共享机制相互共享数据。
- 从你的 PWA 触发安装
-
描述开发人员如何提供自己的 UI 来邀请用户安装他们的 PWA。
- 将文件与你的 PWA 关联
-
描述如何创建文件类型与你的 PWA 之间的关联,以便当用户点击该文件时,你的 PWA 将启动以处理它。
教程
在这些教程中,你将从头开始构建 PWA。教程逐步介绍了创建应用的步骤,从开始到结束,解释了应用的不同功能是如何实现的。
- 创建你的第一个 PWA
-
本初学者级教程逐步介绍了创建 PWA 以跟踪月经周期的过程。课程包括 HTML、CSS 和 JavaScript 的演练,这些是创建功能齐全的 Web 应用所需的,设置测试环境,以及完整的解释,指导学习者将 Web 应用升级为 PWA;包括开发和检查清单、添加 Service Worker 以及使用 Service Worker 删除陈旧的缓存。
- 深入探讨 PWA
-
本中级教程逐步介绍了创建 PWA 以列出提交给 js13kGames 2017 竞赛的 A-Frame 类别的游戏信息的步骤。本教程包含创建 PWA 的所有基础知识,以及其他功能,包括通知、推送和应用性能。
参考
你将用来构建 PWA 的 Web 技术的参考文档。
Web 应用清单
- Web 应用清单成员
-
开发人员可以使用 Web 应用清单成员来描述 PWA,自定义其外观,并更深入地将其集成到操作系统中。
Service Worker API
与应用通信
以下 API 可由 Service Worker 用于与其关联的客户端 PWA 通信
Client.postMessage()
-
允许 Service Worker 向其客户端 PWA 发送消息。
- Broadcast Channel API
-
允许 Service Worker 及其客户端 PWA 建立基本的双向通信通道。
离线操作
以下 API 可由 Service Worker 用于使你的应用离线工作
缓存
-
用于 HTTP 响应的持久存储机制,用于存储可以在应用离线时重复使用的资产。
客户端
-
用于访问由 Service Worker 控制的文档的接口。
FetchEvent
-
一个事件,在客户端 PWA 发出的每个 HTTP 请求中在 Service Worker 中分派。该事件可用于将请求按正常方式发送到服务器并保存响应以备将来使用,或拦截请求并立即使用先前缓存的响应进行响应。
后台操作
以下 API 可由 Service Worker 用于在后台执行任务,即使你的应用未运行
- 后台同步 API
-
一种将任务延迟到 Service Worker 中执行的方法,直到有稳定的网络连接。
- Web 定期后台同步 API
-
一种注册在 Service Worker 中以定期间隔(有网络连接)运行的任务的方法。
- 后台获取 API
-
一种 Service Worker 用于管理可能需要大量时间(例如视频或音频文件)的下载的方法。
其他 Web API
- IndexedDB
-
用于存储大量结构化数据(包括文件)的客户端存储 API。
- 徽章 API
-
一种在应用图标上设置徽章的方法,提供低干扰的通知。
- 通知 API
-
一种发送在操作系统级别显示的通知的方法。
-
一种将文本、链接、文件和其他内容共享到用户设备上选择的其他应用的机制。
- 窗口控件叠加 API
-
适用于安装在桌面操作系统上的 PWA 的 API,可用于隐藏默认窗口标题栏,从而能够在应用窗口的整个表面区域上显示应用。
另请参阅
- 渐进式 Web 应用 on web.dev
- 学习 PWA on web.dev
- 渐进式 Web 应用 on learn.microsoft.com (2023)