构建支持PWA的移动端Web应用，核心是通过Service Worker实现离线缓存、通过Web Manifest配置应用安装信息，同时做好移动端适配，让Web应用拥有接近原生应用的使用体验。
一、PWA核心基础概念
PWA全称Progressive Web App，即渐进式Web应用，它结合了Web和原生应用的优势，核心特性包括以下几点：
- 可离线访问：通过Service Worker缓存资源，无网络时也能正常使用核心功能
- 可安装：支持添加到手机桌面，打开时全屏显示，无浏览器地址栏
- 推送通知：可以像原生应用一样向用户推送消息
- 响应式适配：自动适配不同尺寸的移动端屏幕
二、基础移动端Web应用搭建
首先我们需要先搭建一个基础的移动端Web应用，做好响应式布局，这里以简单的页面为例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>PWA移动端应用示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
padding: 20px;
line-height: 1.6;
}
.header {
text-align: center;
padding: 20px 0;
background-color: #4285f4;
color: white;
border-radius: 8px;
margin-bottom: 20px;
}
.content {
padding: 15px;
background-color: #f5f5f5;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="header">
<h1>我的PWA应用</h1>
</div>
<div class="content">
<p>这是一个支持PWA的移动端Web应用示例</p>
<p>你可以尝试离线访问这个页面，或者将它添加到桌面</p>
</div>
<script src="main.js"></script>
</body>
</html>
三、配置Web Manifest文件
Web Manifest是一个JSON文件，用于定义应用的名称、图标、启动页等安装相关信息，让浏览器知道这个Web应用可以被安装。
首先创建manifest.json文件，内容如下：
{
"name": "PWA移动端应用",
"short_name": "PWA应用",
"description": "一个支持PWA的移动端Web应用示例",
"start_url": "/",
"display": "standalone",
"background_color": "#4285f4",
"theme_color": "#4285f4",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
然后在HTML的<head>标签中添加引用：
<link rel="manifest" href="/manifest.json">
这里需要注意，图标文件需要提前准备好对应尺寸的PNG图片，放在项目根目录下。
四、实现Service Worker离线缓存
Service Worker是PWA的核心，运行在浏览器后台，独立于主线程，用于拦截网络请求、缓存资源，实现离线访问功能。
1. 注册Service Worker
在main.js中添加注册逻辑：
// 检查浏览器是否支持Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
// 注册service-worker.js文件
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service Worker注册成功，作用域为: ', registration.scope);
})
.catch(function(error) {
console.log('Service Worker注册失败: ', error);
});
});
}
2. 编写Service Worker逻辑
创建service-worker.js文件，实现资源缓存逻辑：
// 定义缓存名称和需要缓存的资源列表
const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/main.js',
'/manifest.json',
'/icon-192.png',
'/icon-512.png'
];
// 安装事件：缓存指定资源
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('缓存已打开');
return cache.addAll(urlsToCache);
})
);
});
// 拦截请求事件：优先从缓存返回资源，无缓存再请求网络
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// 如果缓存中有对应资源，直接返回
if (response) {
return response;
}
// 没有缓存则发起网络请求
return fetch(event.request);
}
)
);
});
// 激活事件：清理旧版本缓存
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);
}
})
);
})
);
});
五、调试与验证
完成上述配置后，我们可以通过Chrome浏览器的开发者工具验证PWA是否配置成功：
- 打开应用页面，按F12打开开发者工具，切换到Application面板
- 在左侧Service Workers选项下，可以看到注册的Service Worker状态，确认是否激活
- 在左侧Manifest选项下，可以看到应用的配置信息，确认图标、名称等是否正确
- 可以勾选Offline选项模拟离线状态，刷新页面确认是否能正常加载缓存的资源
- 如果配置正确，浏览器地址栏右侧会出现安装图标，点击即可将应用添加到桌面
六、注意事项
- PWA要求页面必须运行在HTTPS环境下，本地开发使用localhost不受此限制
- Service Worker的作用域是其所在目录，所以一般放在项目根目录，作用域覆盖整个应用
- 缓存策略可以根据实际需求调整，比如动态缓存、网络优先等，不一定完全使用缓存优先策略
- 移动端适配需要做好viewport配置，避免使用固定宽度布局，确保不同屏幕尺寸下显示正常
PWA移动端Web应用Service_WorkerWeb_Manifest修改时间：2026-07-17 11:31:00