从原生应用迁移到 PWA

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

支持情况

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

如何使用

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

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

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

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

如何在运行时检测

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

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

实践清单

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

下一步

• 快速入门 —— 构建并发布你的第一个可安装 PWA。
• 离线策略 —— 在 service worker 注册后选择一种缓存策略。
• Service Worker 兼容性 —— 当前逐浏览器支持数据。