如何解决Service Worker中版本号无法传递到HTML页面的问题？

你的问题出在Service Worker和页面主脚本属于完全隔离的执行上下文，两者的变量空间不共享，所以页面脚本根本访问不到Service Worker里定义的cacheName，这才会报"cacheName is not defined"的错误。这个需求完全可以实现，只是你的思路需要调整。

下面是几个实用的解决办法：

1. 抽离版本号到共享配置文件 #

把版本号单独放在一个通用的JS文件里，让Service Worker和页面脚本都引入这个文件，从根源上保证版本号一致：

• 创建version.js：

// 统一维护版本号
export const APP_VERSION = '1.6.2';

• 在Service Worker中引入使用：

import { APP_VERSION } from './version.js';
const cacheName = APP_VERSION;
// 后续缓存逻辑...

注意：注册Service Worker时要指定type: 'module'，修改你的register.js：

navigator.serviceWorker.register('/sw.js', { type: 'module' });

• 在页面脚本中引入使用：

import { APP_VERSION } from './version.js';
document.getElementById('versionNo').textContent = APP_VERSION;

2. 通过Service Worker消息传递获取版本号 #

如果不想改模块引入方式，可以让Service Worker主动把版本号发送给页面：

• 在Service Worker中添加消息发送逻辑：

const cacheName = '1.6.2';

// SW激活后，给所有打开的页面发送版本号
self.addEventListener('activate', () => {
  clients.matchAll({ includeUncontrolled: true }).then(clients => {
    clients.forEach(client => {
      client.postMessage({
        type: 'APP_VERSION',
        version: cacheName
      });
    });
  });
});

// 页面主动请求时也返回版本号
self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.source.postMessage({
      type: 'APP_VERSION',
      version: cacheName
    });
  }
});

• 在页面脚本中监听消息：

// 页面加载后主动请求版本号
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.ready.then(reg => {
    reg.active.postMessage({ type: 'GET_VERSION' });
  });

  // 监听SW发来的消息
  navigator.serviceWorker.addEventListener('message', (event) => {
    if (event.data.type === 'APP_VERSION') {
      document.getElementById('versionNo').textContent = event.data.version;
    }
  });
}

3. 借助构建工具自动注入版本号 #

如果你的项目用了构建工具（比如Vite、Webpack），可以把版本号写在package.json的version字段里，然后通过构建工具自动注入到页面和Service Worker中，彻底避免手动维护：

比如用Vite的话：

• package.json里："version": "1.6.2"
• 页面脚本中直接使用：

document.getElementById('versionNo').textContent = import.meta.env.npm_package_version;

• Service Worker中同样可以使用import.meta.env.npm_package_version来设置cacheName。

内容的提问来源于stack exchange，提问作者TrapezeArtist