当前位置：首页 > news >正文

uniapp h5下pwa模式缓存问题

news 2026/5/12 12:19:26

当我们把h5添加到桌面后，有新的版本更新上去，在网页h5打开是更新了最新版本，但在添加到桌面后的伪应该上没有更新到最新代码

这是有关于Service Worker机制的问题，它是浏览器后台的一个脚本，能拦截和处理网络请求和管理缓存，这个处理了也能做到离线访问。

有兴趣的可以看看：https://blog.csdn.net/JHXL_/article/details/143612304这个的讲解

下面我们讲一下使用方法

我们可以在html里添加js代码

html

<script>
// 确保浏览器支持 Service Worker 注只能在本地运行或https看到效果，http不支持
if ('serviceWorker' in navigator) {
// 在页面完全加载后才开始注册，避免阻塞主线程
window.addEventListener('load', () => {
// 注册 Service Worker 文件，路径应指向 /static/sw.js
navigator.serviceWorker.register('/static/sw.js')
.then(registration => {
console.log('Service Worker 注册成功:', registration.scope);
})
.catch(error => {
console.log('Service Worker 注册失败:', error);
});
});
}
</script>

然后我要新建一个sw.js文件，这个文件放在你打包后项目能够访问到的文件夹中，我是放在/static/下的

sw.js

// 每次部署新代码时，手动或通过构建工具递增版本号 (v3, v4, v5, etc.)
// 这是强制 Service Worker 更新的关键！
const CACHE_NAME = 'my-app-cache-v1';
const urlsToCache = ['/','/static/logo.png','/static/manifest.json','/static/manifest.webmanifest',// 确保这里包含了所有App Shell 必需的静态文件
];
// --- 1. 安装阶段 ---
self.addEventListener('install', event => {// 关键优化：强制新 Service Worker 立即激活，跳过等待状态// self.skipWaiting();
  event.waitUntil(caches.open(CACHE_NAME).then(cache => {console.log('[Service Worker] Caching all: app shell and content');return cache.addAll(urlsToCache);}));
});
// --- 2. 激活阶段 ---
self.addEventListener('activate', event => {// 关键优化：一旦激活，立即接管所有客户端// event.waitUntil(self.clients.claim());
  event.waitUntil(caches.keys().then(cacheNames => {return Promise.all(cacheNames.map(cache => {if (cache !== CACHE_NAME) {// 清理旧缓存console.log('[Service Worker] Deleting old cache:', cache);return caches.delete(cache);}}));}));
});