我正在尝试改进我最近制作的渐进式网络应用程序。为了在开发时节省一点时间并降低出错的风险，我想自动显示版本号，而不是手动将其复制到 HTML 中。
版本号定义为 Service Worker 中的缓存名称：
const cacheName = '1.6.2';
Service Worker 是通过在每个 HTML 页面的头部调用的 register.js 来注册的。
<script src="register.js" defer></script>
然后在正文末尾的脚本中我有：
document.getElementById('versionNo').innerHTML = cacheName;
在 HTML 中：
<span id="version">Version: <span id="versionNo"></span></span>
然而，这会将版本号留空，并且 javascript 控制台报告“jquery.js:2 Uncaught ReferenceError: cacheName is not Defined”。是我的想法有问题还是这根本不可能？
这可能有帮助：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Worker Date Example</title>
</head>
<body>
<h1>Service Worker Date Example</h1>
<p>Current Time from Service Worker: <span id="time-display">Waiting for update...</span></p>
<script type="module" src="/main.js"></script>
</body>
</html>
main.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker
.register('/sw.js')
.then((registration) => {
console.log(
'Service Worker registered with scope:',
registration.scope
);
})
.catch((error) => {
console.log('Service Worker registration failed:', error);
});
navigator.serviceWorker.addEventListener('message', (event) => {
if (event.data && event.data.type === 'CURRENT_TIME') {
const currentTime = event.data.time;
document.getElementById('time-display').textContent = currentTime;
}
});
});
}
sw.js
setInterval(() => {
const currentTime = new Date();
self.clients.matchAll().then((clients) => {
clients.forEach((client) => {
client.postMessage({
type: "CURRENT_TIME",
time: currentTime.toString(),
});
});
});
}, 5000);