Progressive Web App简称为PWA，是一种利用现代Web技术构建的应用形态，它兼具网页的易访问性和原生应用的流畅体验，支持离线使用、消息推送、添加到桌面等特性。使用JavaScript开发PWA需要掌握几个核心技术点，下面逐一展开说明。
PWA的核心技术组成
PWA的实现依赖三个核心部分，分别是Service Worker、Web Manifest和HTTPS环境，其中Service Worker是PWA实现离线能力和后台功能的核心，Web Manifest用于定义应用的名称和图标等元数据，HTTPS则是Service Worker运行的必要前提。
Service Worker的作用
Service Worker是一个运行在浏览器后台的脚本，独立于网页主线程，能够拦截网络请求、管理缓存、处理推送消息。它不会被用户直接感知，但是可以控制页面的网络交互逻辑。
Web Manifest的作用
Web Manifest是一个JSON格式的文件，用于告诉浏览器这个网页可以作为应用添加到用户的桌面，同时可以定义应用的名称、图标、启动画面、显示模式等信息。
使用JavaScript实现PWA的步骤
1. 准备HTTPS环境
由于Service Worker要求运行在安全的上下文中，所以开发PWA必须在HTTPS环境下，本地开发可以使用localhost，线上环境需要配置SSL证书。
2. 注册Service Worker
首先需要在页面的JavaScript代码中注册Service Worker，判断浏览器是否支持该特性，然后指定Service Worker脚本的路径进行注册。
// 判断浏览器是否支持Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
// 注册Service Worker，脚本路径为/sw.js
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('Service Worker注册成功，作用域为:', registration.scope);
})
.catch(function(error) {
console.log('Service Worker注册失败:', error);
});
});
}
3. 编写Service Worker脚本
Service Worker脚本需要处理安装、激活和fetch事件，安装阶段可以预缓存核心资源，fetch阶段可以拦截请求返回缓存内容，实现离线访问。
// 定义缓存名称和需要预缓存的资源列表
const CACHE_NAME = 'pwa-cache-v1';
const PRECACHE_URLS = [
'/',
'/index.html',
'/style.css',
'/app.js',
'/icon.png'
];
// 监听安装事件，预缓存资源
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('预缓存资源');
return cache.addAll(PRECACHE_URLS);
})
);
});
// 监听激活事件，清理旧缓存
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName !== CACHE_NAME) {
console.log('删除旧缓存:', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
// 监听fetch事件，拦截请求返回缓存内容
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// 如果缓存中有对应请求，直接返回缓存内容
if (response) {
return response;
}
// 没有缓存则发起网络请求，并将响应存入缓存
return fetch(event.request).then(function(networkResponse) {
if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
return networkResponse;
}
// 克隆响应，因为响应只能被使用一次
const responseToCache = networkResponse.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return networkResponse;
});
})
.catch(function() {
// 网络请求失败且没有缓存时，可以返回一个离线提示页面
return caches.match('/offline.html');
})
);
});
4. 配置Web Manifest文件
在项目的根目录创建manifest.json文件，配置应用的基本信息，然后在HTML页面的<head>标签中引入这个文件。
{
"name": "示例PWA应用",
"short_name": "PWA示例",
"description": "使用JavaScript开发的渐进式网页应用示例",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2196f3",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
在HTML中引入manifest文件的代码：
<link rel="manifest" href="/manifest.json">
PWA的其他常用功能实现
离线提示功能
可以通过监听浏览器的在线状态，在网络断开时给用户提示，网络恢复时隐藏提示。
// 获取离线提示元素
const offlineTip = document.getElementById('offline-tip');
// 监听网络状态变化
window.addEventListener('online', function() {
offlineTip.style.display = 'none';
});
window.addEventListener('offline', function() {
offlineTip.style.display = 'block';
});
// 初始状态判断
if (!navigator.onLine) {
offlineTip.style.display = 'block';
}
推送通知功能
推送通知需要结合Service Worker和Push API实现，首先需要在页面中请求通知权限，然后订阅推送服务，Service Worker中监听push事件展示通知。
// 请求通知权限并订阅推送
if ('Notification' in window && 'serviceWorker' in navigator) {
Notification.requestPermission().then(function(permission) {
if (permission === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: '你的应用服务器公钥'
}).then(function(subscription) {
console.log('推送订阅成功:', subscription);
// 将订阅信息发送到后端服务器保存
});
});
}
});
}
Service Worker中处理推送事件的代码：
self.addEventListener('push', function(event) {
const options = {
body: event.data.text(),
icon: '/icon-192.png',
badge: '/badge.png'
};
event.waitUntil(
self.registration.showNotification('新消息', options)
);
});
开发注意事项
- Service Worker的作用域默认是其所在目录，所以通常将sw.js放在根目录，这样可以控制整个站点的请求。
- 缓存的资源需要合理规划，避免缓存过多内容占用用户存储空间，同时要及时更新缓存版本。
- 测试PWA功能时，可以使用Chrome浏览器的开发者工具中的Application面板，查看Service Worker状态、缓存内容和Manifest配置是否正确。
- 添加到桌面的功能在不同浏览器中的表现可能有差异，需要做好兼容性测试。
JavaScriptPWAService_WorkerWeb_Manifest修改时间：2026-07-20 09:54:33