如何在Service Worker中调用Dexie.js 解决importScripts调用报错

核心报错前提说明 #

Dexie.js 3.2.0之前的版本默认绑定window全局对象，而Service Worker（以下简称SW）运行上下文不存在window对象，直接通过importScripts引入低版本Dexie必然触发执行错误；除此之外路径错误、脚本格式不匹配、全局对象访问错误也会触发同类报错。

可直接落地的实现方式 #

方式1：兼容版本+标准importScripts引入（推荐，兼容性最好） #

1. 替换本地Dexie文件为3.2.0及以上版本的UMD格式压缩包，不要使用ESM格式的.mjs文件配合importScripts调用
2. 在SW文件顶部按相对SW作用域的正确路径引入脚本，不要通过window访问Dexie对象，直接从SW全局作用域取即可，参考代码：

// 注意路径是相对于sw.js文件本身的存放路径，不是相对于页面路径
importScripts('./libs/dexie.min.js');

// 初始化数据库
const appDb = new Dexie('app_offline_db');
appDb.version(1).stores({
  offlineTasks: '++id, taskType, createTime, status'
});

// 调用示例：拦截请求时写入离线任务
self.addEventListener('fetch', (event) => {
  if (event.request.method === 'POST' && !navigator.onLine) {
    // 所有异步DB操作必须放在waitUntil中，避免SW提前终止导致操作失败
    event.waitUntil(
      appDb.offlineTasks.add({
        taskType: 'post_request',
        reqData: event.request.clone().text(),
        createTime: Date.now(),
        status: 'pending'
      })
    );
  }
});

方式2：ESM模式SW配合import语法引入 #

如果项目本身使用ES Module规范，可以在注册SW时开启模块模式，直接用import引入ESM格式的Dexie，不需要使用importScripts：

1. 页面端注册SW时指定type为module：

// 页面内注册SW的代码
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./sw.js', {
    type: 'module',
    scope: '/'
  });
}

2. 在SW文件内直接用import引入ESM版本Dexie即可正常使用：

import Dexie from './libs/dexie.mjs';
const appDb = new Dexie('app_offline_db');
// 后续数据库定义、操作逻辑和普通环境完全一致

低版本Dexie临时兼容方案 #

如果受项目限制无法升级Dexie版本，可以在引入脚本前手动挂载全局window对象指向SW自身作用域，临时解决兼容问题（不推荐长期使用，可能存在其他隐性兼容问题）：

// 兼容老版本Dexie的前置处理
self.window = self;
importScripts('./libs/dexie-old.min.js');
const appDb = new Dexie('compat_db');

常见触发报错的避坑点 #

• importScripts引入脚本跨域时必须配置正确的CORS响应头，跨域脚本无权限在SW上下文执行，会直接抛出Failed to execute错误
• SW环境下不要写window.Dexie这类访问window对象的代码，SW全局作用域为self
• 所有Dexie异步操作必须包裹在event.waitUntil()中，否则SW可能在数据库操作完成前被浏览器回收，触发执行中断错误

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