feat(pwa): 实现PWA支持,支持离线访问

- 添加 manifest.json 文件配置PWA应用信息
- 创建 Service Worker (sw.js) 实现资源缓存与离线访问
- 在HTML中引入PWA相关meta标签及注册代码
- 更新项目文档结构说明,增加PWA相关文件描述
- 移除冗余CSS样式并优化页面加载逻辑
- 调整Google Analytics和51.LA统计脚本加载方式
- 完善部署文档中的PWA自定义配置说明
This commit is contained in:
hehh
2025-11-25 17:32:00 +08:00
parent ae249861fa
commit 8d46e85820
7 changed files with 219 additions and 97 deletions

76
js/sw.js Normal file
View File

@@ -0,0 +1,76 @@
// Service Worker for PWA
const CACHE_NAME = 'honesty-home-v1.0.0';
const urlsToCache = [
'/',
'/index.html',
'/about.html',
'/css/style.css',
'/css/about.css',
'/css/artalk.css',
'/js/config.js',
'/js/main.js',
'/js/about.js'
];
// 安装事件 - 缓存资源
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// 获取事件 - 拦截网络请求
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// 如果在缓存中找到响应,则返回缓存的资源
if (response) {
return response;
}
// 克隆请求,因为请求是一个流,只能被消费一次
const fetchRequest = event.request.clone();
// 如果没有在缓存中找到,则发起网络请求
return fetch(fetchRequest).then(response => {
// 检查响应是否有效
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// 克隆响应,因为响应是一个流,只能被消费一次
const responseToCache = response.clone();
// 打开缓存并将响应添加到缓存中
caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
});
})
);
});
// 激活事件 - 清理旧缓存
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});