渐进式网络应用

渐进式 Web 应用 (PWA) 是使用 Web 平台技术构建的应用，但提供类似于特定于平台的应用的用户体验。

¥A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.

与网站一样，PWA 可以通过单个代码库在多个平台和设备上运行。与特定于平台的应用一样，它可以安装在设备上，可以在离线和后台运行，并且可以与设备和其他已安装的应用集成。

¥Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed apps.

指南

¥Guides

这些指南对 PWA 的不同方面进行了概念性解释。它们旨在帮助你了解 PWA 可以实现哪些功能，并提供足够的指导来帮助你了解如何实现这些功能。

¥These guides give conceptual explanations of different aspects of PWAs. They're intended to help you understand what kinds of things are possible with PWAs, and to provide enough pointers to help you understand how to achieve them.

什么是渐进式网络应用？: 介绍 PWA，将其与传统网站和特定于平台的应用进行比较，并概述其主要功能。
使 PWA 可安装: PWA 的定义方面之一是它可以安装在设备上，然后向用户显示为特定于平台的应用，这是设备的永久功能，用户可以像任何其他应用一样直接从操作系统启动。在本指南中，我们将探讨 "installable" 的含义、PWA 需要提供什么才能使其可安装，以及如何自定义安装体验。
安装和卸载网络应用: 本指南介绍了用户如何在其设备上安装和卸载 PWA。
离线和后台操作: 在本指南中，我们将介绍一组技术，使 PWA 能够在设备网络连接间歇性的情况下提供良好的用户体验，并在后台执行操作（即使主应用未运行）。
缓存: 概述使 PWA 能够在本地缓存资源的 API，以及 PWA 用于实现离线功能的一些常见策略。
PWA 的最佳实践: PWA 应适应不同的浏览器和设备、可访问、具有良好的性能并与操作系统良好集成。本指南提供了一系列最佳实践，可帮助你确保 PWA 尽可能良好。

如何

¥How to

这些指南提供了如何实现特定 PWA 功能的具体详细说明。

¥These guides give concrete detailed instructions for how to implement specific PWA features.

创建一个独立的应用: 描述如何指定 PWA 在启动时应在其自己的专用窗口中启动，而不是在浏览器选项卡中启动。
定义你的应用图标: 描述如何定义你自己的在设备上安装 PWA 时要使用的图标集。
自定义你的应用的颜色: 描述如何设置 PWA 的背景和主题颜色。
展示徽章: 描述如何在 PWA 图标上显示徽章：例如让用户知道他们收到了新消息。
将常见的应用操作公开为快捷方式: 描述如何公开可从操作系统的应用快捷菜单启动的 PWA 的常见操作。
在应用之间共享数据: 描述 PWA 如何使用操作系统的应用共享机制相互共享数据。
从 PWA 触发安装: 描述开发者如何提供自己的 UI 来邀请用户安装其 PWA。
将文件与你的 PWA 关联: 描述如何在文件类型和 PWA 之间创建关联，以便当用户单击文件时，启动 PWA 来处理它。

教程

¥Tutorials

在这些教程中，你将从头开始构建 PWA。教程从头到尾介绍了创建应用的步骤，解释了如何实现应用的不同功能。

¥In these tutorials, you'll build a PWA from scratch. Tutorials walk through the steps of creating an app, from start to finish, explaining how the different features of the app are implemented.

创建你的第一个 PWA: 这个新手级教程将逐步介绍如何创建 PWA 来跟踪月经周期。课程包括演练创建功能齐全的 Web 应用所需的 HTML、CSS 和 JavaScript、设置测试环境以及指导学习者将 Web 应用升级为 PWA 的完整说明；包括开发和检查清单、添加服务工作人员以及使用服务工作人员删除过时的缓存。
深入研究 PWA: 本中级教程逐步介绍了 PWA 的创建过程，其中列出了有关在 js13k 游戏 2017 竞赛中提交到 A-Frame 类别的游戏的信息。本教程包含创建 PWA 的所有基础知识，以及其他功能，包括通知、推送和应用性能。

参考

¥Reference

你将用于构建 PWA 的 Web 技术的参考文档。

¥Reference documentation for the web technologies you will use to build a PWA.

Web 应用清单

¥Web app manifest

Web 应用清单成员: 开发者可以使用 Web 应用清单成员来描述 PWA、自定义其外观，并将其更深入地集成到操作系统中。

Service Worker API

与应用通信

¥Communication with the app

Service Worker 可以使用以下 API 与其关联的客户端 PWA 进行通信：

¥The following APIs can be used by a service worker to communicate with its associated client PWA:

Client.postMessage(): 允许 Service Worker 向其客户端 PWA 发送消息。
广播通道 API: 允许 Service Worker 及其客户端 PWA 建立基本的双向通信通道。

离线操作

¥Offline operation

Service Worker 可以使用以下 API 使你的应用离线工作：

¥The following APIs can be used by a service worker to make your app work offline:

Cache: HTTP 响应的持久存储机制，用于存储应用离线时可重复使用的资源。
Clients: 用于提供对服务工作线程控制的文档的访问的接口。
FetchEvent: 一个事件，随客户端 PWA 发出的每个 HTTP 请求在 Service Worker 中调度。该事件可用于正常将请求发送到服务器并保存响应以供将来使用，或者拦截请求并立即使用先前缓存的响应进行响应。

后台操作

¥Background operation

即使你的应用未运行，Service Worker 也可以使用以下 API 在后台执行任务：

¥The following APIs can be used by a service worker to perform tasks in the background, even when your app is not running:

后台同步 API: 一种在网络连接稳定后推迟任务在 Service Worker 中运行的方法。
Web 周期性后台同步 API: 一种通过网络连接注册要在 Service Worker 中定期运行的任务的方法。
后台获取 API: 一种供 Service Worker 管理可能需要大量时间的下载（例如视频或音频文件）的方法。

其他网络 API

¥Other web APIs

IndexedDB: 用于存储大量结构化数据（包括文件）的客户端存储 API。
标记 API: 一种在应用图标上设置徽章的方法，提供低干扰通知。
通知 API: 一种发送在操作系统级别显示的通知的方法。
网络共享 API: 一种将文本、链接、文件和其他内容共享给用户在其设备上选择的其他应用的机制。
窗口控件覆盖 API: 安装在桌面操作系统上的 PWA API，可隐藏默认窗口标题栏，从而在应用窗口的整个表面区域显示应用。

也可以看看

¥See also

web.dev 上的渐进式网络应用
web.dev 上的学习渐进式 Web 应用
learn.microsoft.com 上的渐进式网络应用 (2023)