如何在Blazor WASM应用新版本下载时显示提示消息

核心思路 #

Blazor WASM PWA启动时会自动检查并下载新版本资源，我们可以通过监听Service Worker的更新事件，在index.html中区分「正常启动加载」和「新版本下载」两种状态，从而切换对应的提示内容。

具体实现步骤 #

1. 准备多状态提示元素 #

在index.html中定义两个提示容器，初始仅显示正常启动提示：

<div id="normal-loading" class="loading-tip">请稍候...</div>
<div id="update-loading" class="loading-tip" style="display: none;">正在下载新版本，请耐心等待...</div>

2. 监听Service Worker更新事件 #

在index.html的<script>标签中添加以下逻辑，通过Service Worker的状态变化判断新版本下载时机：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(registration => {
      // 监听Service Worker更新触发事件
      registration.addEventListener('updatefound', () => {
        const newWorker = registration.installing;
        // 监听新Worker的状态流转
        newWorker.addEventListener('statechange', () => {
          switch(newWorker.state) {
            case 'installing':
              // 开始下载新版本资源，切换提示
              document.getElementById('normal-loading').style.display = 'none';
              document.getElementById('update-loading').style.display = 'block';
              break;
            case 'activated':
              // 新版本安装完成，可提示用户刷新（可选）
              // alert('新版本已就绪，请刷新页面');
              break;
          }
        });
      });
      // 主动触发更新检查，确保每次启动都检测新版本
      registration.update();
    });
}

// Blazor初始化完成后隐藏所有提示
Blazor.start().then(() => {
  document.querySelectorAll('.loading-tip').forEach(el => el.style.display = 'none');
});

3. 备选方案：拦截资源加载请求 #

如果Service Worker监听不够满足需求，还可以通过拦截fetch请求，判断是否在下载新版本的核心资源（如.dll.gz文件）：

window.addEventListener('fetch', (event) => {
  // 检测到下载Blazor编译后的DLL文件，判定为新版本下载
  if (event.request.url.includes('.dll') && event.request.cache === 'reload') {
    document.getElementById('normal-loading').style.display = 'none';
    document.getElementById('update-loading').style.display = 'block';
  }
});

注意事项 #

• 确保应用已正确配置PWA，Service Worker能正常注册（Blazor WASM模板默认已配置）。
• 测试时需清除浏览器缓存或使用隐私窗口，模拟新版本发布后的首次访问场景。
• 若需要强制用户刷新页面生效新版本，可在activated状态触发location.reload()。

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