Quasar V2 PWA模式预缓存错误(404)求助

核心问题定位 #

你当前的配置存在模式冲突：quasar.config中使用了generateSW模式，但同时编写了自定义Service Worker文件。generateSW是让Workbox自动生成SW逻辑，而自定义SW需要使用injectManifest模式，这是导致index.html预缓存404的根本原因。

分步修复方案 #

1. 修正Quasar PWA配置 #

修改quasar.config.js中的pwa配置，切换到injectManifest模式并启用必要配置：

pwa: {
  workboxMode: 'injectManifest', // 切换为injectManifest模式，启用自定义SW
  injectPwaMetaTags: true,
  swFilename: 'sw.js',
  manifestFilename: 'manifest.json',
  useCredentialsForManifestTag: false,
  useFilenameHashes: true, // 启用文件名哈希，避免缓存旧资源
  extendInjectManifestOptions (cfg) {
    // 可在此扩展Workbox的injectManifest配置
  }
},

2. 修复自定义Service Worker代码 #

调整custom-service-worker.ts中的ignoreURLParametersMatching规则，它的作用是忽略URL中的查询参数（而非匹配index.html本身）：

import { clientsClaim } from 'workbox-core';
import {
  precacheAndRoute,
  cleanupOutdatedCaches,
} from 'workbox-precaching';

self.skipWaiting();
clientsClaim();

// 修正参数忽略规则：忽略所有URL查询参数
precacheAndRoute(self.__WB_MANIFEST, {
  ignoreURLParametersMatching: [/.*/]
});

cleanupOutdatedCaches();

3. 验证部署与缓存一致性 #

• 直接访问https://myurl/index.html，确认服务器返回200状态码
• 清理浏览器缓存及旧Service Worker，重新部署后测试
• 若部署在子路径下，需在Quasar配置中设置对应publicPath，确保预缓存路径与实际路径匹配

4. 额外排查点 #

在浏览器DevTools的Application -> Cache Storage中，查看预缓存清单是否包含正确的index.html路径

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