前端 PWA 开发指南：构建离线可安装 Web 应用

综述由AI生成介绍前端 PWA 技术，阐述其离线访问、主屏幕安装及推送通知等优势。对比了不完整与完整的 PWA 配置示例，详细解析了 manifest.json 配置、Service Worker 缓存策略及推送通知处理逻辑。旨在帮助开发者构建具备原生体验的 Web 应用，强调 PWA 是现代 Web 开发的重要方向而非噱头。

赛博朋克发布于 2026/4/6更新于 2026/5/2131 浏览

前端 PWA 开发指南：构建离线可安装 Web 应用

常见误区

前端 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
// service-worker.js
self.addEventListener('install', event => {
console.log('Service Worker 安装');
});
self.addEventListener(,  {
.();
});
self.(,  {
.();
});

更多推荐文章

查看全部

<!-- 正确的做法：完整的 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>发送通知</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
// service-worker.js
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 开发指南：构建离线可安装 Web 应用

前端 PWA 开发指南：构建离线可安装 Web 应用

常见误区

为什么你需要这个？

反面教材

更多推荐文章

正确的做法

核心观点

总结

更多推荐文章

相关免费在线工具

前端 PWA 开发指南：构建离线可安装 Web 应用

前端 PWA 开发指南：构建离线可安装 Web 应用

常见误区

为什么你需要这个？

反面教材

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

更多推荐文章

正确的做法

核心观点

总结

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

更多推荐文章

相关免费在线工具