前端 PWA：构建离线可用与可安装的应用

综述由AI生成前端 PWA（渐进式 Web 应用）的核心价值与实现方案。PWA 通过 manifest.json 配置元数据，利用 Service Worker 实现离线缓存、网络拦截及推送通知，使网站具备安装到主屏幕、离线访问及类原生体验的能力。文章对比了错误与正确的配置方式，强调了完整实现的重要性，指出 PWA 是兼顾 Web 跨平台优势与原生体验的关键技术方向。

追风少年发布于 2026/4/6更新于 2026/5/2124 浏览

前端 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

<!-- 正确的做法：完整的 PWA 配置 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的 PWA 应用</title>
<!-- 添加 manifest.json -->
<link rel="manifest" href="/manifest.json">
<!-- 添加主题颜色 -->
<meta name="theme-color" content="#317EFB">
<!-- 添加 Apple Touch Icon -->
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">
<!-- 添加预加载 -->
<link rel="preload" href="/style.css" as="style">
<link rel="preload" href="/script.js" as="script">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>我的 PWA 应用</h1>
<p>这是一个完整的 PWA 应用</p>
<button id="notification-btn">发送通知</button>
<script src="/script.js"></script>
<script>
// 注册 service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration.scope);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
});
}
</script>
</body>
</html>

// 正确的做法：manifest.json
{
"name": "我的 PWA 应用",
"short_name": "PWA 应用",
"description": "一个完整的 PWA 应用示例",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#317EFB",
"icons": [
{"src": "/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png", "purpose": "any"},
{"src": "/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", "purpose": "any"},
{"src": "/icons/icon-128x128.png", "sizes": "128x128", "type": "image/png", "purpose": "any"},
{"src": "/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", "purpose": "any"},
{"src": "/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png", "purpose": "any"},
{"src": "/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any"},
{"src": "/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", "purpose": "any"},
{"src": "/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any"}
]
}

// 正确的做法：完整的 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)
);
});

// 正确的做法：使用推送通知
// script.js

// 请求通知权限
function requestNotificationPermission() {
if ('Notification' in window) {
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
console.log('通知权限已授予');
} else {
console.log('通知权限被拒绝');
}
});
}
}

// 发送通知
function sendNotification() {
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.ready.then(registration => {
registration.showNotification('测试通知', {
body: '这是一条测试通知',
icon: '/icons/icon-192x192.png',
badge: '/icons/icon-72x72.png',
data: { url: '/' }
});
});
}
}

// 页面加载时请求通知权限
window.addEventListener('load', () => {
requestNotificationPermission();
const notificationBtn = document.getElementById('notification-btn');
if (notificationBtn) {
notificationBtn.addEventListener('click', sendNotification);
}
});

// 检查是否是 PWA 模式
function checkPwaMode() {
const isPwa = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone || document.referrer.includes('android-app://');
if (isPwa) {
console.log('应用以 PWA 模式运行');
} else {
console.log('应用以浏览器模式运行');
}
}
checkPwaMode();

前端 PWA：构建离线可用与可安装的应用

前端 PWA：构建离线可用与可安装的应用

常见误区

为什么你需要这个？

反面教材

更多推荐文章

相关免费在线工具

正确的做法

核心总结

总结

更多推荐文章

相关免费在线工具

前端 PWA：构建离线可用与可安装的应用

前端 PWA：构建离线可用与可安装的应用

常见误区

为什么你需要这个？

反面教材

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

正确的做法

核心总结

总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具