ViteJS应用Service Worker离线功能实现与调试测试咨询

我想咨询如何在ViteJS应用中配置Service Worker以实现离线功能。以下是我的Vite配置：

VitePWA({
  strategies: 'injectManifest',
  srcDir: 'src',
  filename: 'my-sw.ts',
  injectRegister: 'auto',
  registerType: "autoUpdate",
  workbox: {
    globPatterns: ['**/*.{js,css,html,ico,png,svg}']
  },
  devOptions: {
    enabled: true,
  },

  // TODO: add specific content to align with app requirements.
  manifest: {
   //
  },
})

这是我的Service Worker代码：

import { precacheAndRoute } from "workbox-precaching";
import { clientsClaim } from "workbox-core";

declare let self: ServiceWorkerGlobalScope

self.addEventListener("message", event => {
  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
});

precacheAndRoute(self.__WB_MANIFEST);
self.skipWaiting();
clientsClaim();

以上代码来自Vite PWA官方文档。执行npm run build后，Service Worker已被复制到public目录，但应用无法离线运行。我尝试了官方的injectManifest示例，但离线状态下仍无法正常工作。

请问：

1. 如何配置才能让应用离线运行？
2. 如何触发不同的Service Worker事件进行调试？
3. 如何在开发模式下测试离线功能？
4. 能否指出相关的文档章节？

内容的提问来源于stack exchange，提问作者captain-yossarian from Ukraine