uniapp h5下pwa模式缓存问题

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

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

有兴趣的可以看看：https://juejin.cn/post/7543894021049810982这个的讲解

下面我们讲一下使用方法

我们可以在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);
            }
          })
        );
      })
  );
});

当然后还有一个方法是拦截请求缓存离线的，但我的需求是有新的代码更新时就立即更新，所以我不需要拦截方法三，有需求的小伙伴可以自行搜索看看

自此完毕