如何在SvelteKit中编译并注册多个同作用域Service Worker

SvelteKit默认仅会编译src/service-worker.ts/js作为Service Worker入口，要实现自定义路径SW的编译和同作用域注册，按以下步骤配置即可：

1. 配置Vite多入口编译额外SW脚本 #

修改项目根目录的svelte.config.js，通过Vite的Rollup配置添加第二个SW的构建入口，指定编译产物输出到静态资源根目录，和默认SW保持同级：

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    vite: {
      build: {
        rollupOptions: {
          input: {
            'other-sw': './src/other-sw.ts' // 替换为你自定义SW的实际路径
          },
          output: {
            entryFileNames: '[name].js',
            // 产物输出路径需和你使用的adapter静态目录匹配
            // adapter-auto/adapter-vercel等默认用build/client，adapter-static默认用build
            dir: 'build/client',
            inlineDynamicImports: true // 关闭SW的代码拆分，避免产生多余chunk
          }
        }
      }
    }
  }
};

export default config;

配置完成后执行构建，会在静态产物根目录同时生成框架默认的service-worker.js和自定义编译后的other-sw.js。

2. 注册第二个SW并保持同作用域 #

SvelteKit默认会自动注册根路径下的service-worker.js，你只需要在客户端入口补充第二个SW的注册逻辑，保证两个SW的scope参数完全一致即可。推荐在src/hooks.client.ts中添加注册代码：

// src/hooks.client.ts
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/other-sw.js', {
      scope: '/' // 和默认SW保持一致的根作用域
      // 如果构建时指定输出为ES模块，补充 type: 'module' 参数
    });
  });
}

关键注意事项 #

• 浏览器原生规则限制：同一作用域同一时间只能有一个处于激活状态的Service Worker。两次register仅能完成两个SW的安装流程，后安装的SW会进入等待状态，直到当前激活的SW终止后才会获得控制权，无法实现两个SW同时拦截请求、处理事件。如果需要多组逻辑并行，建议将逻辑拆分到不同TS模块后统一导入到默认的src/service-worker.ts中，通过事件分发实现逻辑共存，不需要维护多个SW。
• 如果使用非默认adapter，需要同步修改vite配置中的output.dir参数，保证编译后的两个SW文件都处于网站根路径，避免路径层级导致作用域被限制。
• 不要把TS格式的自定义SW放到static目录，该目录下的文件不会经过TS编译和依赖打包，会直接原样输出。

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