当前位置：首页 > ops >正文

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

ops 2025/7/15 1:52:11

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

🧠 一、什么是 PWA？

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

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

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

🌟 PWA 的三大核心能力

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

📦 二、PWA 的核心组成结构

Manifest 文件（Web App Manifest）
Service Worker（离线缓存 & 网络代理）
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: [...]}})]
})