PWA是什么？2026年开发者指南

PWA是什么？简单说，PWA（渐进式网页应用）是用标准网页技术构建的网站，它的行为像特定平台的应用：可以安装，能用自己的图标和窗口打开，还可以离线使用。MDN将其定义为“使用Web平台技术构建、却能提供类似特定平台应用的用户体验的应用”（MDN，2025年12月）。大部分工作由两个文件完成：描述应用的Web应用清单，以及用于离线使用的Service Worker。

什么是渐进式网页应用

PWA是一种Web应用，它保留了网站的特性，同时加入了原生应用的一些特性。根据MDN，它从网站继承了跨操作系统的单一代码库和通过网页直接访问的能力。从特定平台的应用，它获得了安装（可从应用商店安装，也可直接从网页安装）、以独立应用方式启动并带有图标、离线和后台运行、无浏览器界面的全屏使用，以及分享目标等操作系统集成功能。

PWA就是一个普通网站加上两项技术功能：

• Web应用清单，即一个JSON文件，浏览器通过它了解应用的名称、图标以及打开方式；
• Service Worker，一个控制应用页面的脚本，用MDN的话说，它可以从服务器获取资源并将其添加到本地缓存中。

web.dev也描述了同样的理念：PWA通过渐进式增强提供更可靠、集成度更高的体验，并且可以安装（web.dev，2024年9月）。

什么条件下PWA可以安装

能否安装由浏览器决定，而且各浏览器的条件不同。对于基于Chromium的浏览器（Chrome、Samsung Internet、Edge），MDN列出了以下要求（MDN，Making PWAs installable，2026年10月）：

Chrome还会等待用户参与后才触发beforeinstallprompt事件：用户必须至少点击或轻触页面一次，并且查看页面至少30秒（web.dev，2024年9月）。

Service Worker不在上述列表中。MDN指出，它不是可安装的必要条件，不过许多PWA都使用它来支持离线功能。下面是一个满足上表要求的最小清单：

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icons/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icons/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

在每个页面中用<link rel="manifest" href="/manifest.webmanifest">引入它。

PWA如何离线工作

Service Worker通过拦截网络请求并从缓存中响应，让离线使用成为可能。先在页面中注册它，然后在Worker中处理fetch事件。下面是MDN缓存优先模式的简化版本：

// 页面中
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

// service-worker.js
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => cached || fetch(event.request))
  );
});

这个示例优先从缓存返回内容，缓存中没有时才请求网络，但它不会填充缓存。MDN的完整示例增加了写入缓存的步骤和一个备用页面。MDN还指出，缓存优先更可能返回过期的响应，而网络优先会在设备离线时回退到缓存，最佳策略取决于应用本身。Service Worker已是广泛可用的Baseline功能（自2020年10月起；在web-features 3.44.0中，最早支持的版本为Chrome 45、Firefox 44和Safari 11.1）。

iOS和Android的差异

Android和iOS都可以安装PWA，但安装方式不同，部分功能也有差别。以下信息截至2026年10月，来自MDN、Apple和web-features：

对开发者来说，iOS有三个细节很重要：

• 根据MDN，iOS不支持beforeinstallprompt，因此无法在那里显示你自己的安装按钮。应在界面中说明分享菜单的操作步骤。web.dev提到，设计师有时会为此添加专门的页面。
• 自iOS 26起，默认情况下“添加到主屏幕的每个网站都会以Web应用打开”，即使网站有清单，用户也可以关闭“以Web应用打开”（WebKit博客，2025年6月9日）。
• 从iOS和iPadOS 16.4起，添加到主屏幕的Web应用可以接收Web Push。当清单的display设为standalone或fullscreen时，网站才算作主屏幕Web应用，而且权限请求必须由用户手势触发（WebKit博客，2023年2月16日）。web-features将Push列为自2023年3月起新近可用的Baseline功能，自2025年9月起广泛可用，最早支持的版本为Safari 16和Safari iOS 16.4。

添加到主屏幕的细节会随每个iOS版本变化，请确认你所支持的版本。

PWA示例

web.dev的PWA指南列出了一些公司分享的上线成果。这些数据是公司自己提供、由web.dev收集的（2024年9月，web.dev）：

以上是这些公司针对自家产品报告的结果。

PWA还是原生应用

经验法则是：当一套Web代码库和通过网页分发最重要时，选择PWA；当你需要网页无法提供的平台功能时，选择原生应用。MDN指出，PWA也能通过应用商店分发，因此两者并不互斥。如果你在网站之外还发布了原生应用，链接可以直接打开它，设置方法见通用链接和Android应用链接。

如何在手机上测试PWA

分三步测试PWA：用DevTools检查文件，用真机检查安装，用手机尺寸的视图检查布局。

1. DevTools：在Chrome DevTools的Application面板中，Manifest窗格显示应用的字段和图标，Installability部分会说明出错的原因。Service Workers窗格中有一个Offline复选框，可以让DevTools进入离线模式（Chrome for Developers）。Lighthouse的PWA测试已被弃用（页面于2024年4月更新），因此请改用Application面板。
2. 真机：在浏览器中安装应用，然后把手机切换到飞行模式，从图标打开应用。iOS和Android都要测试，因为安装流程和推送行为有所不同。
3. 手机尺寸：和测试任何移动网站一样，在手机宽度下检查页面，可参考如何让网站适配手机，并执行移动网站测试清单；如果没有iOS设备，请参考没有iPhone如何测试iPhone。

Mobile View Extension会以手机的用户代理、屏幕尺寸和像素比重新加载当前标签页，因此可以快速查看PWA页面在手机尺寸下的样子。但它无法像手机那样安装PWA，也无法运行Service Worker和独立模式：它运行的是桌面版Chrome引擎，使用鼠标输入，也不会显示主屏幕的行为。安装和离线检查请使用真机。速度相关内容另见移动页面速度测试指南。

常见问题

用简单的话说，PWA是什么？

PWA是一种可以安装到设备上并像应用一样使用的网站。它用普通的Web技术构建，由清单和Service Worker提供安装后和离线时的行为。

PWA有哪些要求？

在Chromium浏览器中安装需要：HTTPS、包含名称、192 px和512 px图标的清单、start_url和display，以及未设为true的prefer_related_applications。可安装性不要求Service Worker，但要实现离线功能就需要它。

PWA能在iPhone上使用吗？

可以。自iOS 16.4起，用户可以通过Safari、Chrome、Edge、Firefox和Orion的分享菜单安装PWA，主屏幕Web应用还能接收Web Push。iOS上没有beforeinstallprompt，所以用户需要通过分享菜单安装。

PWA能离线工作吗？

可以，前提是Service Worker缓存了所需的页面和文件。没有Service Worker时，应用在Chromium浏览器中仍可安装，但它本身没有离线处理能力。