Quasar PWA自定义Service Worker配置报错求助

错误1：Expected /src-pwa/custom-service-worker.ts to have javascript content-type, but received video/mp2t #

问题原因 #

swFilename配置逻辑错误：你直接指定了源TypeScript文件路径，但Quasar在injectManifest模式下，swFilename需要填写编译后的Service Worker输出文件名，而非源TS文件路径。开发服务器无法正确识别未编译的TS文件，返回了错误的MIME类型。

修复方案 #

修改quasar.config.js中的PWA配置，通过extendInjectManifestOptions指定源TS文件，swFilename设置为编译后的输出名（如sw.js）：

pwa: {
  workboxMode: 'injectManifest',
  swFilename: 'sw.js', // 编译后的SW文件名
  injectPwaMetaTags: true,
  manifestFilename: 'manifest.json',
  extendInjectManifestOptions (cfg) {
    cfg.swSrc = 'src-pwa/custom-service-worker.ts'; // 指向你的自定义TS源文件
  }
}

这样Quasar会自动编译TS文件并生成正确的JS格式Service Worker，避免MIME类型错误。

错误2：Uncaught non-precached-url: createHandlerBoundToURL('index.html') was called, but that URL is not precached #

问题原因 #

删除swFilename后，Quasar使用默认的injectManifest配置，但未正确关联你的自定义Service Worker文件，导致self.__WB_MANIFEST预缓存清单中缺失index.html，而你的SW逻辑尝试使用未预缓存的index.html作为导航 fallback。

修复方案 #

1. 优先采用错误1的正确配置：确保extendInjectManifestOptions正确指向你的custom-service-worker.ts，Quasar会自动将index.html加入预缓存清单，precacheAndRoute(self.__WB_MANIFEST)会处理所有预缓存资源。
2. 手动补充预缓存（可选）：如果自动预缓存仍有问题，可在custom-service-worker.ts中手动添加index.html到预缓存清单：

// 在precacheAndRoute调用前添加
self.__WB_MANIFEST = [...self.__WB_MANIFEST, { url: 'index.html', revision: null }];

precacheAndRoute(self.__WB_MANIFEST);

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