版本：v7

构建渐进式 Web 应用

Capacitor 为渐进式 Web 应用（PWA）提供了一流的支持，让您能轻松构建既可在 iOS 和 Android 上原生运行，也能在 Web 端作为移动应用或"渐进式 Web 应用"运行的跨平台应用。

什么是渐进式 Web 应用？

简单来说，渐进式 Web 应用（PWA）是利用现代 Web 技术为用户提供类原生应用体验的网页应用。这类应用部署在传统网页服务器上，可通过 URL 访问，并能被搜索引擎索引。

实质上，渐进式 Web 应用就是专门针对移动性能优化、并利用新兴 Web API 实现类似原生应用功能（如推送通知和离线存储）的网站代名词。

Capacitor 对渐进式 Web 应用和原生应用提供同等优先级的支持。这意味着 Capacitor 的桥接层既能在原生环境中运行，也能在 Web 环境中运行，许多插件在 两种环境 下都可用且保持完全一致的 API 和调用方式。

您可以将 @capacitor/core 和 Capacitor 插件同时作为原生应用和渐进式 Web 应用的依赖项。Capacitor 会根据运行时环境自动切换，在需要时无缝调用 Web 代码，在可用时优先调用原生代码。

此外，Capacitor 还提供多种实用工具用于查询当前运行平台，以便针对原生环境或 Web 环境提供定制化体验。

渐进式 Web 应用需要具备应用清单（App Manifest）和服务工作线程（Service Worker）。

首先，您需要在 index.html 同级目录下创建应用清单文件（即 manifest.json）。该文件包含应用的元数据，如名称、主题色和图标等信息，这些信息将在应用被添加到主屏幕时使用。

其次，为了实现推送通知和离线存储数据功能，需要使用服务工作线程。它能让您的 Web 应用代理网络请求，并执行数据处理和同步所需的后台任务。

服务工作线程功能强大但实现复杂，通常不建议从零开始编写。可以考虑使用 Workbox 等工具，它们提供了常见服务工作线程方案，能轻松集成到您的应用中。

更多关于服务工作线程的使用方法（包括如何注册）请参考 MDN 上的使用服务工作线程文档。

渐进式 Web 应用的性能评估标准包括可交互时间和首次有效渲染等指标。

应用上线前请参照渐进式 Web 应用检查清单，并使用 Lighthouse 工具进行审计测试。

如果现有前端技术栈难以满足渐进式 Web 应用的性能要求，可以考虑采用 Ionic 框架，它能以近乎零配置的方式为应用提供出色的 PWA 支持。