渐进式网络应用 (Progressive Web App, PWA) 是一种使用现代 Web 技术开发的应用程序，它结合了网页和原生应用的优点，能够提供类似原生应用的用户体验。简单的说就是在初次加载的时候将资源和接口数据缓存，在没有网络的时候调用最近在线的缓存记录，给用户良好的体验。
PWA 的核心技术组成
1. Service Worker
- 运行在浏览器后台的脚本
- 独立于网页，可以拦截和处理网络请求
- 管理缓存，实现离线功能
- 支持推送通知
2. Web App Manifest
- JSON 文件，描述应用元数据
- 控制应用如何出现在用户设备上
- 定义启动画面、主题颜色、图标等
3. App Shell 架构
- 分离应用核心基础设施与内容
- 快速加载 UI 框架
- 动态加载内容
4. HTTPS
- 安全传输的必备条件
- 防止中间人攻击
- Service Worker 要求安全上下文
PWA 的主要优势
- 跨平台：一套代码适配所有平台
- 无需安装：通过浏览器访问即可使用
- 离线可用：无网络时仍能基本运行
- 快速加载：缓存策略提高加载速度
- 推送通知：类似原生应用的消息推送
- 主屏图标：可添加到设备主屏幕
- 搜索引擎友好：能被搜索引擎索引
典型使用场景
- 内容发布平台 (新闻、博客)：离线阅读已缓存内容
- 电子商务：快速加载产品页面
- 社交媒体：流畅的浏览体验，离线查看已缓存内容，网络恢复后同步更新
- 生产力工具：离线创建和编辑文档
- 游戏应用：快速加载游戏界面，离线玩简单游戏
技术实现
# json
{
"name": "我的 PWA 应用",
"short_name": "PWA 应用",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4285f4",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
# html
<link rel="manifest" href="/manifest.json">
# 注册 Service Worker
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js')
.then(registration => {console.log('ServiceWorker 注册成功');
})
.catch(err => {console.log('ServiceWorker 注册失败:', err);
});
});
}
# 实现基本的 Service Worker
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/images/logo.png'
];
self.addEventListener('install', event => {
event.waitUntil(caches.open(CACHE_NAME)
.then(cache => {return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request)
.then(response => {
// 缓存命中则返回缓存，否则获取网络请求
return response || fetch(event.request);
})
);
});PWA 的局限性
- iOS 限制：某些功能在 iOS 上支持有限
- 硬件访问：某些原生设备功能访问受限
- 应用商店：传统分发渠道受限
- 浏览器差异：不同浏览器实现可能有差异
- 存储限制：缓存存储空间有限制
正文完
发表至： 前端
2025-08-01