网站变身App：PWA全攻略
为什么你的项目需要 PWA？
老实说，做原生 App 太麻烦了。iOS 和 Android 要分开写代码，等 App Store 审核，还得管两套发布流程。PWA 直接颠覆了这一切。
它让用户享受到 App 般的体验——能加到首页，全屏打开，还能离线用。你呢？就维护一套代码就好。不用纠结 App Store，也没平台专属的坑。就是你的网站，超能打。
核心秘密是 service worker：小巧的 JS 后台脚本，拦截网络请求，管缓存，还搞定离线。简单又牛。
先认清现实：PWA 行不行？
上手前，得知道边界。PWA 绑在你的 domain 上，必须用 HTTPS，还在沙盒里跑。这不是缺点，是安全保障。
好处呢？能用上原生 API，比如定位、相机、传感器啥的。更新超快，一推代码，用户下次访问就拿到。不用等审核。
怎么做 PWA：五步走起
把现有网站变 PWA，就五个关键件。一步步来：
1. App Manifest：PWA 的身份证
这 JSON 文件告诉系统你的 App 长啥样：
- 完整名和短名
- 主题色、背景色，融进系统
- 运行范围（scope）
- 启动页面
- 描述文字
- 首页图标
- 屏幕方向
真实例子：
{
"name": "我的牛逼 App",
"short_name": "牛逼App",
"theme_color": "#2196F3",
"background_color": "#FFFFFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"description": "超级好用的 App",
"orientation": "any",
"icons": [
{
"src": "/assets/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
方向默认 "any"，除非你有硬道理锁死。手机用户爱自由。
2. HTML 里链接 Manifest
在首页 <head> 加这一行（单页应用放 index.html）：
<link rel="manifest" href="/assets/manifest.json">
浏览器就知道去哪找配置了。
3. 设计离线页面
Service worker 会缓存用户逛过的页面。离线时没缓存的，得优雅处理。建个 offline.html，告诉用户“网络断了”。
单页应用可以软链接到 index.html，让用户回缓存内容：
ln -s index.html offline.html
别让用户卡死在黑屏。
4. 注册 Service Worker
在 </body> 前加脚本：
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(reg => console.log('Service Worker 注册成功'))
.catch(err => console.log('Service Worker 注册失败'));
}
</script>
5. 写 Service Worker
这里实现离线魔法。拦截请求，缓存响应，没网就给缓存的：
const CACHE_NAME = 'v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/scripts/main.js',
'/offline.html'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
.catch(() => caches.match('/offline.html'))
);
});
安装时缓存关键文件，有缓存优先用，没网 fallback 到离线页。
HTTPS 必须有，别商量
Service worker 只认 HTTPS。这是安全刚需。还没上 HTTPS？赶紧的。在 NameOcean，我们的 SSL 证书和 hosting 包自动搞定。
部署和测试
放好 manifest、service worker 和 HTML。测试走起：
- 按 F12，开 DevTools → Application
- 查 manifest 没报错
- Service Workers 区看注册情况
- 模拟离线（Network → Offline）
- 试安装 PWA（浏览器提示或菜单）
真·收获
用户拿 App 体验，你省掉 iOS/Android 双代码。更新秒发，你掌控发布。
小投入，大回报。
懒人捷径
嫌麻烦？上 PWABuilder.com，一键生成大半。工具帮 boilerplate，你专注核心。
总之，PWA 不是玩具。给用户 App 级享受，你专心开发就好。