什么是 PWA？它的核心技术有哪些？

最新推荐文章于 2025-07-08 13:34:27 发布

破碎的天堂鸟

最新推荐文章于 2025-07-08 13:34:27 发布

阅读量1.1k

点赞数 14

CC 4.0 BY-SA版权

分类专栏：学习教程文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_61505785/article/details/148804309

学习教程专栏收录该内容

815 篇文章

订阅专栏

一、PWA 的本质与定义

PWA（Progressive Web App，渐进式 Web 应用）是一种通过现代 Web 技术构建的应用程序，它融合了 Web 应用和原生应用的核心优势：

核心定位：
- 并非独立技术，而是综合运用多种 Web 技术的开发理念
- 目标是在任何设备（桌面/移动/平板）提供类原生应用体验，同时保留 Web 的跨平台性和可链接性
关键特征（由 Google 的 Alex Russell 提出）：
- 渐进增强：在所有浏览器中基础功能可用，现代浏览器中体验增强
- 离线能力：通过 Service Worker 实现无网络访问
- 可安装性：可添加至设备主屏幕，独立窗口运行
- 响应式设计：自适应不同屏幕尺寸
- 网络无关性：在弱网或离线状态下仍可用
技术门槛：
- 必须通过 HTTPS 提供（安全性保障）
- 需包含 Web App Manifest 文件（安装配置）
- 必须注册 Service Worker（离线能力基础）

💡 与原生/混合应用的区别：
PWA 并非用 WebView 封装（如混合应用），而是通过浏览器标准 API 实现原生体验。其优势在于无需应用商店审核、自动更新、搜索引擎可索引，且安装包体积通常小于原生应用。

二、PWA 的核心技术体系

（一）基础支撑技术

Service Worker
- 作用：独立的 JavaScript 线程，充当网络代理和缓存管理器
- 核心能力：

📦 离线缓存：拦截请求并返回缓存内容（fetch 事件）
🔄 后台同步：网络恢复后自动同步数据（sync 事件）
🔔 推送通知：通过 Push API 发送离线通知
- 生命周期管理：

// 注册 Service Worker
navigator.serviceWorker.register('/sw.js');

install：预缓存关键资源（caches.addAll()）
activate：清理旧缓存（caches.delete()）
fetch：动态响应请求（网络优先/缓存优先策略）

Web App Manifest
- 作用：JSON 文件定义安装行为和系统集成
- 关键属性：

{
  "name": "My PWA",
  "short_name": "App",
  "icons": [{ "src": "/icon-192.png", "sizes": "192x192" }],
  "start_url": "/index.html",
  "display": "standalone", // 全屏模式
  "background_color": "#fff",
  "theme_color": "#3367D6"
}

- 功能实现：

定义主屏幕图标、启动动画、显示模式（全屏/最小化UI）
控制应用范围（scope 属性）防止越界缓存

HTTPS 协议
- 强制要求，防止中间人攻击篡改 Service Worker

（二）增强体验技术

Cache API
- 与 Service Worker 协同实现精细化缓存管理：

预缓存（安装阶段）
运行时缓存（动态存储 API 响应）
- 支持多种策略：

策略	适用场景
`Cache-First`	静态资源（CSS/JS）
`Network-First`	实时数据（如股票报价）
`Stale-While-Revalidate`	可容忍延迟更新的内容

App Shell 架构

- 原理：将 UI 框架（HTML/CSS/JS）与内容分离
- 优势：

⚡️ 秒开首屏（Shell 被优先缓存）
🔄 动态填充内容（通过 API 加载）
- 结合骨架屏技术提升感知性能

客户端存储技术
- IndexedDB：存储结构化离线数据（如用户笔记草稿）
- localStorage：轻量级键值对存储（配置信息）

（三）高级能力扩展

后台同步 API
- 示例：用户离线提交表单，网络恢复后自动发送
推送通知 API
- 结合 Service Worker 实现系统级通知
地理位置/传感器访问
- 通过 Web API 调用设备硬件能力（需用户授权）

三、PWA 的离线缓存机制详解

实现流程：

1.预缓存阶段（install 事件）

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('v1').then(cache => 
      cache.addAll(['/app.html', '/styles.css', '/app.js'])
    )
  );
});

缓存核心静态资源（App Shell）

2.请求拦截阶段（fetch 事件）

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(res => 
      res || fetch(e.request).then(netRes => {
        return caches.open('v1').then(cache => {
          cache.put(e.request, netRes.clone());
          return netRes;
        })
      })
    )
  );
});

缓存优先策略：优先返回缓存，无缓存则请求并存储

3.缓存更新阶段（activate 事件）

self.addEventListener('activate', e => {
  e.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.filter(key => key !== 'v2').map(key => caches.delete(key))
    ))
  );
});

- 版本迭代时清理旧缓存

⚠️ 关键挑战：

数据一致性：skipWaiting() 可能导致新旧 Worker 同时运行
解决方案：结合 clients.claim() 强制接管所有页面

四、PWA 的技术优势与适用场景

优势对比（与传统 Web 应用）

维度	PWA	传统 Web 应用
离线能力	✅ 完整支持	❌ 完全依赖网络
安装体验	✅ 主屏幕快捷启动	❌ 需通过浏览器访问
更新机制	✅ 静默更新（Service Worker）	❌ 手动刷新页面
推送通知	✅ 系统级支持	❌ 仅限网页内提醒