前端 PWA：构建离线可用与可安装的 Web 应用
常见误区
PWA（Progressive Web App）常被误解为简单的技术组合。常见的错误认知包括：
- '用户直接用浏览器不就好了'——导致无法离线访问，用户体验差。
- '我有原生 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(, {
.();
});
self.(, {
.();
});
