答案：通过注册Service Worker并缓存关键资源，结合Web App Manifest和HTTPS，实现PWA离线访问与原生体验。1. 在页面加载后注册sw.js；2. sw.js中定义install和fetch事件，预缓存资源并优先从缓存响应请求；3. 配置manifest.json支持添加到主屏幕；4. 确保站点运行在HTTPS安全环境中。
使用 Service Worker 实现离线缓存是 PWA（Progressive Web App）的核心功能之一。它能让网页在无网络环境下依然可用，提升加载速度和用户体验。以下是实现这一目标的关键步骤。
1. 创建并注册 Service Worker
要在项目中启用离线缓存，第一步是在浏览器中注册一个 Service Worker 文件。
在主页面的 JavaScript 中添加注册逻辑：
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
});
}
这段代码确保浏览器支持 Service Worker，并在页面加载完成后注册 sw.js 文件。
立即学习“前端免费学习笔记（深入）”；
2. 编写 Service Worker 缓存策略
在根目录创建 sw.js 文件，定义安装和激活事件，控制资源缓存。
常用策略为“缓存优先，网络回退”：
const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js',
'/images/logo.png'
];
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 => {
return response || fetch(event.request);
})
);
});
install 阶段预缓存关键资源；fetch 阶段优先从缓存返回内容，若未命中则请求网络。
3. 添加 Web App Manifest 实现“添加到主屏幕”
PWA 要具备类原生应用体验，需配置 manifest.json 文件。
在 HTML 中引入：
创建 manifest.json 文件：
{
"name": "我的PWA应用",
"short_name": "PWA示例",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/images/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
这将允许用户将网站以全屏模式添加到设备主屏幕。
4. 确保网站通过 HTTPS 提供服务
Service Worker 和 PWA 功能要求站点运行在安全上下文中（即 HTTPS）。开发时 localhost 被视为安全环境，但部署上线必须使用 HTTPS。
如果部署到生产环境，请确保服务器配置了有效的 SSL 证书。
基本上就这些。完成以上四步后，你的网页就具备了离线访问能力、快速加载和类原生应用体验，真正成为一个现代 PWA 应用。不复杂但容易忽略细节，比如缓存更新机制和版本管理，需要后续优化处理。
