渐进式 Web 应用
渐进式 Web 应用(PWA)是使用 Web 平台技术构建的应用程序,但提供类似于平台原生应用程序的用户体验。
与网站一样,PWA 可以通过单一代码库在多个平台和设备上运行。与平台原生应用程序一样,它可以安装在设备上,可以在离线和后台模式下运行,并且可以与设备和其他已安装的应用程序集成。
指南
《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 如何通过使用操作系统的应用程序共享机制与其他 PWA 共享数据。
- 从 PWA 触发安装
-
描述了开发人员如何提供自己的 UI 来邀请用户安装其 PWA。
- 将文件与 PWA 关联
-
描述了如何创建文件类型与您的 PWA 之间的关联,以便当用户单击文件时,您的 PWA 会被启动以处理该文件。
教程
使用这些PWA 教程从头开始构建 PWA,这些教程将引导您完成从开始到结束的步骤,并沿途解释应用程序的各种功能是如何实现的。
- 创建您的第一个 PWA
-
这个入门级教程将引导您创建跟踪月经周期的 PWA。课程包括创建功能齐全的 Web 应用程序所需的 HTML、CSS 和 JavaScript 的概述,设置测试环境,以及完整的解释,指导学习者完成将 Web 应用程序升级为 PWA 的过程;包括开发和检查清单文件、添加服务工作者,以及使用服务工作者删除过时的缓存。
- 深入了解 PWA
-
这个中级教程将引导您创建一个 PWA,该 PWA 列出了提交到 js13kGames 2017 竞赛的 A-Frame 类别的游戏信息。本教程包含创建 PWA 的所有基础知识,并增加了通知、推送和应用程序性能等附加功能。
参考
我们的《PWA 参考》列出了 MDN 上记录的所有您需要构建 PWA 的功能。
Web 应用清单
- Web 应用清单成员
-
开发人员可以使用 Web 应用清单成员来描述 PWA,自定义其外观,并更深入地将其集成到操作系统中。
Service Worker API
与应用的通信
以下 API 可由服务工作者用来与其关联的客户端 PWA 进行通信
Client.postMessage()-
允许服务工作者向其客户端 PWA 发送消息。
- Broadcast Channel API
-
允许服务工作者及其客户端 PWA 建立基本的双向通信通道。
离线操作
以下 API 可由服务工作者用于使您的应用程序离线工作
Cache-
用于存储可供应用程序离线时重复使用的资源的 HTTP 响应的持久化存储机制。
Clients-
一个用于提供对服务工作者控制的文档的访问的接口。
FetchEvent-
在每次客户端 PWA 发起 HTTP 请求时,在服务工作者中分派的一个事件。该事件可用于将请求正常发送到服务器并保存响应以备将来使用,或拦截请求并立即以先前缓存的响应进行响应。
后台操作
以下 API 可由服务工作者用于在您的应用程序未运行时在后台执行任务
- Background Synchronization API
-
一种在网络连接稳定时将任务延迟到服务工作者中运行的方式。
- Web Periodic Background Synchronization API
-
一种在具有网络连接的周期性时间间隔内注册要在服务工作者中运行的任务的方式。
- 后台抓取 API
-
服务工作者管理可能花费大量时间(例如视频或音频文件)的下载的方法。
其他 Web API
- IndexedDB
-
用于存储大量结构化数据(包括文件)的客户端存储 API。
- Badging API
-
一种在应用程序图标上设置徽章的方法,提供低干扰的通知。
- Notifications API
-
一种发送在操作系统级别显示通知的方式。
-
一种用于将文本、链接、文件和其他内容共享给用户在其设备上选择的其他应用程序的机制。
- Window Controls Overlay API
-
适用于安装在桌面操作系统上的 PWA 的 API,可隐藏默认的窗口标题栏,从而允许应用程序在应用程序窗口的整个表面区域显示。
另见
- web.dev 上的渐进式 Web 应用
- web.dev 上的学习 PWA
- learn.microsoft.com 上的渐进式 Web 应用 (2023)