如何更简便地检测Blazor App(PWA)是否有可用更新？

不需要重写service-worker.js，利用浏览器原生的Service Worker API和Blazor的JS互操作就能实现简便的更新检测，以下是具体实现方式：

方法1：手动触发更新检查+用户确认激活 #

步骤1：编写JS检测逻辑 #

在wwwroot下创建update-check.js文件，添加以下代码：

async function checkForAppUpdates() {
  try {
    const registration = await navigator.serviceWorker.getRegistration();
    if (!registration) return;

    // 触发更新检查
    await registration.update();

    // 检查是否有等待激活的新版本
    if (registration.waiting) {
      if (confirm("检测到应用新版本，是否立即更新？")) {
        // 发送消息让等待的Service Worker跳过等待，立即激活
        registration.waiting.postMessage({ type: 'SKIP_WAITING' });
        // 刷新页面加载新版本
        window.location.reload();
      }
    }
  } catch (err) {
    console.error("更新检测失败:", err);
  }
}

// 监听Service Worker状态变化，新版本激活后自动刷新
navigator.serviceWorker.addEventListener('controllerchange', () => {
  window.location.reload();
});

步骤2：在Blazor组件中调用检测逻辑 #

在需要触发检测的组件（比如MainLayout.razor）中注入IJSRuntime，并调用上述JS函数：

@inject IJSRuntime JS
@code {
    protected override async Task OnInitAsync()
    {
        // 页面加载时自动检查更新
        await JS.InvokeVoidAsync("checkForAppUpdates");
    }

    // 也可以添加手动检查按钮
    private async Task ManualCheckUpdate()
    {
        await JS.InvokeVoidAsync("checkForAppUpdates");
    }
}

步骤3：引入JS文件 #

在wwwroot/index.html（WebAssembly）或Pages/_Host.cshtml（Server）中引入该JS文件：

<script src="update-check.js"></script>

方法2：监听Service Worker更新事件（自动提示） #

如果希望自动监听更新，无需手动触发，可以修改JS逻辑，在页面加载时监听updatefound事件：

window.addEventListener('load', async () => {
  const registration = await navigator.serviceWorker.getRegistration();
  if (!registration) return;

  registration.addEventListener('updatefound', () => {
    const newWorker = registration.installing;
    newWorker.addEventListener('statechange', () => {
      if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
        // 已有新版本等待激活，提示用户
        if (confirm("应用已更新，是否刷新页面？")) {
          registration.waiting.postMessage({ type: 'SKIP_WAITING' });
        }
      }
    });
  });
});

关键说明 #

• Blazor PWA默认的service-worker.js已经包含了基础的更新逻辑，会在页面加载时对比缓存哈希值，我们只需要通过API触发检查、监听状态变化即可，无需修改原文件。
• SKIP_WAITING消息需要默认的service-worker支持，Blazor生成的默认service-worker已经处理了该消息，所以不需要额外修改。

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