跳到主要内容

PWA 原理

面试速答（30 秒版 TL;DR）​

  • PWA（Progressive Web App） 不是单一 API，而是一组让 Web 应用更像原生应用的能力组合。
  • 三个核心抓手是：HTTPS、Web App Manifest、Service Worker。
  • 其中真正的技术核心是 Service Worker，因为它能拦截请求、做缓存、离线兜底、后台同步等。
  • 一句话记忆：PWA = 可安装 + 可离线 + 更像 App 的 Web 应用。

PWA 到底解决什么问题​

传统网页的痛点：

  • 断网基本不可用
  • 访问入口弱，像“一次性页面”
  • 用户留存和唤起能力偏弱

PWA 想解决的是：

  • 让网页能安装到桌面或主屏
  • 让页面在弱网和离线场景下也有基本可用性
  • 让体验更接近原生 App

PWA 的组成​

先只记住 3 个组成，再把重心放在 Service Worker。

1. HTTPS​

PWA 相关关键能力通常要求安全上下文。原因很简单：

  • Service Worker 具备较高权限
  • 如果不在安全环境下，风险太大

2. Web App Manifest​

Manifest 是一个描述应用元信息的清单文件，常见字段包括：

  • name
  • short_name
  • icons
  • start_url
  • display
  • theme_color

它主要解决“安装后长什么样、从哪启动”的问题。

3. Service Worker​

这是 PWA 最关键的部分。它本质上是：

运行在浏览器后台、独立于页面的脚本代理层。

它不直接操作 DOM，但能：

  • 拦截网络请求
  • 读取和写入缓存
  • 做离线兜底
  • 接收推送、做后台同步

Service Worker 工作流程​

生命周期：为什么更新 Service Worker 容易被问​

Service Worker 不是你改完代码立刻就替换旧版本，它有自己的生命周期：

  1. register
  2. install
  3. activate
  4. fetch

其中难点在于“新旧版本切换”：

  • 新 worker 安装后，可能处于 waiting
  • 旧页面还在使用老 worker
  • 需要等旧 worker 退出或主动触发接管

这也是 PWA 更新策略经常出问题的原因。

常见缓存策略​

1. Cache First​

  • 先读缓存
  • 没有再请求网络

适合：

  • 静态资源
  • 版本化资源

2. Network First​

  • 先走网络
  • 网络失败再回退缓存

适合：

  • 时效性较强的数据

3. Stale While Revalidate​

  • 先返回旧缓存
  • 后台再拉最新资源更新缓存

适合：

  • 对速度和新鲜度都比较敏感的场景

一个最小示例​

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('app-v1').then((cache) => {
      return cache.addAll(['/', '/offline.html', '/styles.css'])
    }),
  )
})

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((res) => {
      return res || fetch(event.request)
    }),
  )
})

这个示例体现了两个点：

  • 安装时预缓存关键资源
  • 请求时优先读缓存

PWA 的价值与边界​

价值​

  • 弱网体验更稳
  • 首次安装门槛低
  • 对内容型、工具型、轻量业务型应用很有价值

边界​

  • 不是所有平台都完整支持所有能力
  • 推送、后台同步、安装体验在不同浏览器差异明显
  • 复杂系统能力通常仍不如原生 App

所以面试时更稳妥的说法是：

PWA 是让 Web 应用“更接近 App”，而不是“完全替代原生 App”。

典型题 & 标准答法​

Q1：PWA 的核心原理是什么？​

答：PWA 是一组增强 Web 应用体验的能力集合，核心组成是 HTTPS、Manifest 和 Service Worker。其中 Service Worker 最关键，因为它能拦截请求、管理缓存、实现离线访问和更丰富的后台能力；Manifest 解决安装后的应用外观和启动配置问题；HTTPS 则提供安全上下文。

Q2：Service Worker 和普通 JS 有什么区别？​

答：Service Worker 运行在独立线程中，不直接操作 DOM，生命周期也独立于页面。它更像浏览器和页面之间的代理层，主要负责请求拦截、缓存和后台任务，而不是页面交互逻辑。

Q3：PWA 一定能离线吗？​

答：不是自动离线，离线能力来自你是否正确设计了 Service Worker 和缓存策略。如果没有预缓存关键资源或没有离线兜底页，注册了 PWA 也未必真正可离线。

常见追问​

  • Service Worker 更新为什么麻烦？
  • localStorage 和 Cache Storage 有什么区别？
  • 哪些业务适合做 PWA？

易错点​

  • 不要把 PWA 理解成“加个桌面图标”。
  • 不要说“注册 Service Worker 就有离线能力”。离线取决于缓存策略和资源准备。
  • 不要忽视平台差异。不同浏览器、不同系统对 PWA 能力支持并不完全一致。

速记要点​

  • PWA 三件套：HTTPS、Manifest、Service Worker。
  • 技术核心是 Service Worker。
  • PWA 不是替代原生，而是增强 Web。