JavaScript 如何做 PWA
你可能用过一些APP，明明没打开过，手机桌面却有个“快捷图标”，点一下直接就能用，还不用下载安装——这就是PWA的魔力。PWA简单说，就是用网页技术（比如JavaScript）做的、接近APP体验的“高级网页”，而JavaScript就是它实现效果的核心工具。
先搞懂PWA的核心“小帮手”：Service Worker
要做PWA，首先得认识一个叫Service Worker的东西。它就像网页的“后台管理员”，能偷偷帮你做三件事：断网也能打开网页、接收推送消息、后台自动更新内容，而且它和网页本身是分开的，就算关了浏览器也能干活。
举个生活化的例子：你平时刷外卖网页，关了页面就啥也看不到了；但做了PWA后，Service Worker就像个“外卖员”，提前把你常点的那家店的菜单存在“随身背包”（缓存）里——哪天你没网了，点开网页，它直接从背包里掏出菜单给你看，不用等加载，也不用联网。
第一步：用JavaScript注册“后台管理员”Service Worker
要让这个“管理员”干活，得先让它“入职”，也就是在JavaScript代码里注册它。比如你在网页的<script>标签里写这么几行简单的代码：
`javascript
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('管理员入职成功', reg))
.catch(err => console.log('管理员入职失败', err))
})
}
`
这段代码的意思是：检查浏览器能不能用Service Worker（现在几乎所有主流浏览器都支持），等网页加载完，就去读一个叫sw.js的文件——这就是我们给“管理员”写的工作手册，让它知道该干啥。
第二步：写Service Worker的工作手册（sw.js）
有了入职通知，还得有具体的工作内容，这就是sw.js里的代码。最基础的就是“缓存文件”，让没网也能打开。比如我们想把网页的首页、样式表、图标这些核心文件存起来，就可以这么写：
`javascript
// 管理员入职时触发：把需要缓存的文件存起来
self.addEventListener('install', e => {
e.waitUntil(
caches.open('my-pwa-cache').then(cache => {
return cache.addAll(['/', '/index.css', '/logo.png'])
})
)
})
// 网页请求资源时触发：先看缓存里有没有，有就直接拿，没有再联网
self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(res => {
return res || fetch(e.request)
})
)
})
`
再举个例子：你出门前把常吃的包子铺的菜单、付款码照片存进背包，出门没网了，点开背包就能直接看菜单、付款码，不用等老板发新消息。这段代码就是让“管理员”提前把这些文件存好，用户访问时先看缓存，有就直接用，没有再去网上找。
第三步：加个“桌面快捷方式”，让它像APP一样
光有缓存还不够，得让用户像用APP一样点开。这时候要加个Web App Manifest文件，这是个JSON格式的配置表，告诉浏览器这个PWA的名字、图标、打开方式。比如写个manifest.json：
`json
{
"name": "我的PWA小工具",
"short_name": "PWA工具",
"icons": [{ "src": "/logo.png", "sizes": "192x192", "type": "image/png" }],
"start_url": "/",
"display": "standalone"
}
`
然后在网页里关联这个配置表，加个<link rel="manifest" href="/manifest.json">。这样一来，浏览器就会提示用户“添加到桌面”，点一下就能生成图标，打开时是全屏的，和普通APP几乎没区别。
最后：测试一下有没有成功
做完这些，你可以用浏览器的开发者工具（按F12），在“应用程序”标签里看Service Worker是不是注册成功，缓存的文件有没有存对，也可以把网断了，试试能不能正常打开网页。
其实PWA的核心就是用JavaScript给网页加了“后台能力”，不用下载安装，却能给用户接近原生APP的体验，现在很多电商、新闻网站都用它，既能省开发成本，又能留住用户。