# 从原生应用迁移到 PWA

> 什么是 PWA，以及它依赖的两块基础：提供安装元数据的清单，和能够离线服务的 Service Worker——各附最小示例。

**一句话总结：** Progressive Web App（PWA）是一种使用网页技术构建、能提供与平台专属应用
相似的用户体验的应用。本指南聚焦其中两个基础组成部分：**Web App Manifest**，为浏览器
提供安装该应用所需的元数据；以及 **Service Worker**，可以拦截请求以实现离线行为。

## 支持情况

这两个基石都受限于真实的浏览器支持，并非全平台统一支持：在制定迁移时间表之前，请查阅
[Manifest](/zh/compatibility/manifest-name-short-name/) 和
[Service Worker](/zh/compatibility/service-worker/) 兼容性条目，了解当前逐浏览器、
逐操作系统的支持情况 —— 各引擎之间的差异足够大，"PWA" 并不是一个单一的是/否特性。

## 如何使用

一个最小化的 manifest 提供了浏览器安装该应用时所使用的元数据：

```json
{
  "name": "My Migrated App",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "icons": [{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }]
}
```

Service worker 在页面中注册，之后独立于页面运行：

```js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}
```

## 如何在运行时检测

在依赖 service worker 之前先做特性检测，并在支持缺失时为读者提供一个可用的页面，
而不是静默失败：

```js
function supportsServiceWorker() {
  if ('serviceWorker' in navigator) {
    return true;
  }
  // 回退：不支持 Service Worker —— 页面仍会正常加载和运行，
  // 只是没有 service worker 可能带来的离线行为。
  return false;
}
```

## 实践清单

- [ ] 不要假设每个原生能力都有直接对应的浏览器能力 —— 在确定范围之前，
      使用上方链接的兼容性条目核实目标浏览器实际暴露了哪些能力。
- [ ] 将 manifest 与 service worker 视为需要分别核实的两件事 —— 不要假设支持其中
      一个就意味着支持另一个。
- [ ] 使用上方展示的特性检测回退方案，让迁移后的应用在 service worker
      缺失或未注册时依然保持可用。
- [ ] 发布前使用上方的兼容性条目重新核实当前支持情况，而不要依赖本指南的快照。

## 下一步

- [快速入门](/zh/guides/getting-started/) —— 构建并发布你的第一个可安装 PWA。
- [离线策略](/zh/guides/offline/) —— 在 service worker 注册后选择一种缓存策略。
- [Service Worker 兼容性](/zh/compatibility/service-worker/) —— 当前逐浏览器支持数据。