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 應用擁有媲美原生的體驗，特別適用于提升首次加載速度、增加用戶粘性、提供離線支持和安裝入口，是現代前端項目值得配置和掌握的重要技術。它既是技術提升，也是體驗設計的加分項。