Workbox 6下ServiceWorker导入registerRoute报错求助

你遇到的核心问题是Service Worker环境不支持ES模块的import语法，而你在代码里用了import { registerRoute } from 'workbox-routing'这类写法，导致脚本执行时抛出异常。下面给你两种可行的解决方案，按需选择：

方案一：使用Workbox全局命名空间（推荐，兼容性更好） #

Workbox 6的workbox-sw.js会自动暴露一个全局的workbox对象，里面包含了所有核心模块的方法，不需要单独用ES import导入。你可以直接从这个全局对象里解构出需要的方法：

修改你的源Service Worker文件（比如serviceWorker-base.js）：

importScripts('workbox-sw.js');

// 从workbox全局对象中获取需要的方法
const { registerRoute } = workbox.routing;
const { StaleWhileRevalidate } = workbox.strategies;

const CACHE_DYNAMIC_NAME = 'dynamic-DEBUG-001';

// 注册路由示例：匹配所有GET请求，使用StaleWhileRevalidate策略
registerRoute(
  ({ request }) => request.method === 'GET',
  new StaleWhileRevalidate({
    cacheName: CACHE_DYNAMIC_NAME,
  })
);

这种方式不需要依赖Webpack对ES模块的特殊处理，所有Workbox模块会通过importScripts自动加载，兼容性覆盖所有支持Service Worker的浏览器。

方案二：配置Webpack支持Service Worker的ES模块 #

如果你更习惯用ES模块语法，可以调整Webpack配置，让它生成适合Service Worker环境的打包文件：

1. 修改webpack.config.js，添加target: 'webworker'配置：

const {InjectManifest} = require('workbox-webpack-plugin')

const config = {
  // 其他原有配置...
  target: 'webworker', // 关键：告诉Webpack打包目标是Service Worker环境
  plugins: [
    nodeEnvPlugin, 
    firebasePlugin, 
    cssExtractPlugin, 
    new InjectManifest({ 
      swSrc: './serviceWorker-base.js', // 注意：这里指向你的源文件，不是生成的serviceWorker.js
      swDest: 'serviceWorker.js' // 输出的最终文件名
    }),
  ]
}

return config

2. 你的源Service Worker文件可以继续使用ES import：

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

const CACHE_DYNAMIC_NAME = 'dynamic-DEBUG-001';

registerRoute(
  ({ request }) => request.method === 'GET',
  new StaleWhileRevalidate({
    cacheName: CACHE_DYNAMIC_NAME,
  })
);

额外注意事项 #

• 避免重复注入Manifest：你同时配置了Webpack的InjectManifest插件和package.json里的generate:sw脚本，这两种方式选一种即可，同时使用可能导致生成的Service Worker文件混乱。
• 版本一致性：确保workbox-webpack-plugin、workbox-routing、workbox-strategies的版本完全一致（都是6.0.2），版本不匹配也可能导致奇怪的报错。

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