前端 PWA 技术详解：离线缓存与推送通知实现

前端 PWA（渐进式 Web 应用）的核心价值与实现方案。PWA 支持离线访问、主屏幕安装及推送通知，弥补了传统网页体验不足。文章通过对比错误与正确的代码示例，详细展示了 manifest.json 配置、Service Worker 缓存策略及推送通知处理逻辑。重点在于构建完整的 PWA 架构，而非简单添加组件，以实现类原生的跨平台用户体验。

技术博主发布于 2026/4/5更新于 2026/4/131 浏览

前端 PWA 技术详解：离线缓存与推送通知实现

背景与现状

前端 PWA？这不是噱头吗？

"PWA 有什么用，用户直接用浏览器不就好了"——结果用户体验差，无法离线访问； "我有原生 App，不需要 PWA"——结果开发成本高，维护困难； "PWA 就是加个 manifest 和 service worker，多简单"——结果功能不完整，用户体验差。

醒醒吧，PWA 不是简单的技术组合，而是一种现代化的 Web 应用模式！

为什么你需要这个？

离线访问：即使没有网络也能访问应用
安装到主屏幕：像原生 App 一样方便使用
推送通知：及时向用户发送重要信息
性能提升：缓存静态资源，加快加载速度
跨平台：一次开发，多平台运行

常见误区

<!-- 反面教材：不完整的 PWA 配置 -->
<!DOCTYPE html>
<html>
<head>
<title>我的 PWA 应用</title>
<!-- 缺少 manifest.json -->
<!-- 缺少 service worker -->
</head>
<body>
<h1>我的 PWA 应用</h1>
<p>这是一个 PWA 应用</p>
</body>
</html>

// 反面教材：简单的 service worker
self.addEventListener('install', event => {
console.log('Service Worker 安装');
});
self.addEventListener('activate',  {
.();
});
self.(,  {
.();
});

相关免费在线工具

Keycode 信息

查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online

Escape 与 Native 编解码

JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online

JavaScript / HTML 格式化

使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online

JavaScript 压缩与混淆

Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online

Base64 字符串编码/解码

将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online

Base64 文件转换器

将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

// 正确的做法：完整的 service worker const CACHE_NAME = 'pwa-app-cache-v1'; const ASSETS_TO_CACHE = [ '/','/index.html','/style.css','/script.js','/manifest.json', '/icons/icon-72x72.png','/icons/icon-96x96.png','/icons/icon-128x128.png', '/icons/icon-144x144.png','/icons/icon-152x152.png','/icons/icon-192x192.png', '/icons/icon-384x384.png','/icons/icon-512x512.png' ]; // 安装 Service Worker self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { console.log('Cache opened'); return cache.addAll(ASSETS_TO_CACHE); }) .then(() => self.skipWaiting()) ); }); // 激活 Service Worker self.addEventListener('activate', event => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ) .then(() => self.clients.claim()) ); }); }); // 拦截网络请求 self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { // 如果缓存中有响应，直接返回 if (response) { return response; } // 否则发起网络请求 return fetch(event.request) .then(response => { // 如果响应有效，缓存一份 if (response && response.status === 200 && response.type === 'basic') { const responseToCache = response.clone(); caches.open(CACHE_NAME) .then(cache => { cache.put(event.request, responseToCache); }); } return response; }) .catch(error => { // 网络错误时返回离线页面 if (event.request.mode === 'navigate') { return caches.match('/offline.html'); } }); }) ); }); // 处理推送通知 self.addEventListener('push', event => { const data = event.data.json(); const options = { body: data.body, icon: '/icons/icon-192x192.png', badge: '/icons/icon-72x72.png', data: { url: data.url } }; event.waitUntil( self.registration.showNotification(data.title, options) ); }); // 处理通知点击 self.addEventListener('notificationclick', event => { event.notification.close(); event.waitUntil( clients.openWindow(event.notification.data.url) ); });

前端 PWA 技术详解：离线缓存与推送通知实现