每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发

PWA 渐进式 Web 应用开发（离线缓存、桌面安装等）

---

🧠 一、什么是 PWA？

PWA（Progressive Web App）是一种让 Web 应用具有类似原生 App 用户体验的技术体系。

PWA 不是一个框架，而是由一组浏览器 API 组成的技术集合，包括：

• 离线访问能力
• Web App 安装到桌面
• 推送通知
• 后台同步
• 原生风格 UI

---

🌟 PWA 的三大核心能力

能力	描述
可安装性	支持添加到桌面启动器，像原生 App 打开
离线能力	使用 Service Worker 缓存页面资源
响应式设计	跨设备自适应布局（桌面、平板、手机）

---

📦 二、PWA 的核心组成结构

1. Manifest 文件（Web App Manifest）
2. Service Worker（离线缓存 & 网络代理）
3. HTTPS 环境支持（必须）

---

🧩 三、Manifest 文件详解（定义 App 元信息）

这是让浏览器识别并提供"安装到桌面"入口的关键配置文件。

✅ 示例：manifest.json

{
  "name": "My PWA App",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3367D6",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

✅ 页面引入 Manifest

<link rel="manifest" href="/manifest.json" />

---

🛠 四、Service Worker 基本原理

Service Worker 是运行在浏览器主线程之外的一个 JS 文件，能拦截网络请求、缓存资源，实现离线体验和资源更新控制。

✅ 注册 Service Worker

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    console.log('Service Worker 注册成功');
  });
}

---

✅ 示例：简单的离线缓存 sw.js

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = ['/', '/index.html', '/style.css', '/main.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
  );
});

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

---

🧪 五、开发调试与测试

✅ Chrome DevTools > Application 面板

• Manifest：查看配置是否生效
• Service Workers：查看是否成功注册、缓存策略生效
• Lighthouse：一键生成 PWA 可安装性、离线体验评分报告

---

💡 六、如何实现"安装到桌面"？

浏览器在检测到符合条件的 manifest + service worker 后，会自动触发 "安装提示事件"：

let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  // 触发 UI 提示
  showInstallButton();
});

installBtn.onclick = () => {
  deferredPrompt.prompt();
};

✅ PWA 安装条件：

条件	是否必需
HTTPS 环境	✅
Manifest 配置完整	✅
Service Worker 注册成功	✅
页面被访问两次以上	✅

---

🧠 七、PWA 与原生 App 的对比

功能项	原生 App	PWA
离线访问	✅	✅
安装桌面图标	✅	✅（支持设备）
推送通知	✅	✅（需授权）
原生 API 支持程度	✅ 完全	部分限制
多平台发布	需打包 & 审核	一套代码，多端访问

---

📈 八、前端框架中的 PWA 实践

✅ Vue 项目启用 PWA（使用 @vue/pwa 插件）

vue add pwa

会自动生成 manifest.json 和注册逻辑。

✅ React/Vite 项目启用 PWA（使用 vite-plugin-pwa）

npm install vite-plugin-pwa --save-dev

// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My PWA App',
        short_name: 'PWA',
        icons: [...]
      }
    })
  ]
})

---

💬 面试高频问题拆解

📌 Q1：什么是 PWA？核心组成有哪些？

答：

PWA 是渐进式 Web 应用，提升 Web 体验接近原生 App。核心组成：

• Manifest 文件（元信息定义）
• Service Worker（拦截请求，离线支持）
• HTTPS 环境（安全前提）

📌 Q2：PWA 离线缓存的原理是什么？

答：

通过注册 Service Worker 拦截浏览器发起的请求，并返回缓存的资源，实现离线访问。常用策略有：

• Cache First
• Network First
• Stale While Revalidate

📌 Q3：有哪些适合使用 PWA 的项目类型？

答：

• 资讯类、电商类（SEO + 离线体验）
• 社区/工具类应用（提升复访率）
• 内部系统（低频使用但需快速加载）
• 中台管理系统（减少发布负担）

---

✅ 总结

PWA 让 Web 应用拥有媲美原生的体验，特别适用于提升首次加载速度、增加用户粘性、提供离线支持和安装入口，是现代前端项目值得配置和掌握的重要技术。它既是技术提升 ，也是体验设计的加分项。