Workbox预缓存配置后资源没生效，控制台报404是怎么回事？

IT人彩云提问于 2026-02-06 20:35:30 阅读 42

移动

我按文档配置了Workbox的precacheAndRoute，把图片和CSS文件列在workbox-config.js里了，但页面加载时这些资源还是显示404没命中缓存。我检查过文件路径没错，服务 worker也注册成功了，重启多次还是不行。控制台提示GET /images/logo.png 404，难道是版本没更新吗？

这是我的配置片段：


module.exports = {
  globPatterns: ['images/*.{png,jpg}', 'styles/*.css'],
  swDest: 'sw.js',
  clientsClaim: true,
  skipWaiting: true
};

服务端渲染的页面确实引用了这些路径，但预缓存列表里就是没这些文件。难道是路径匹配模式有问题？或者需要手动添加runtimeCaching规则？

PWA移动

我来解答赞 5 收藏

反馈

2 条解答

令狐芳宁 Lv1

我也被这个问题坑过很久。你配置的globPatterns路径没问题的话，一般就是构建流程没处理好。workbox-config.js里的globPatterns是给webpack插件或者CLI工具用的，如果你只是写了配置但没运行build命令生成sw.js，那预缓存列表当然不会生效。

你提到的404说明请求确实走网络了，而且没命中缓存。这个时候先做两件事：
1. 打开Application面板，找到Service Workers，看sw.js有没有成功安装，里面有没有报错
2. 在Cache Storage里找找precache的缓存名称，看有没有你配置的那些文件

还有一个容易忽略的点是：workbox的precache默认会加上当前sw.js所在路径的相对路径。比如你sw.js在根目录，但图片在/images/下，可能路径对不上。你可以试下在配置里加上modifyURLPrefix: { '': '/' } 或者用manifestTransforms来调整路径。

还有个捷径你可以试试：在sw.js里手动加个硬编码的precache列表，比如：

import { precacheAndRoute } from 'workbox-precaching';



precacheAndRoute([

  { url: '/images/logo.png', revision: '1' },

  { url: '/styles/main.css', revision: '1' }

]);

如果这样能生效，那基本就是你原来的配置没被正确构建处理掉。后面再回头看看你的构建流程有没有问题，别走弯路。

我当时折腾了半天，最后发现是忘记在webpack里加Workbox的插件了😭。你要是用CLI的话，就运行下workbox injectManifest看看输出结果。

2026-02-07 13:04

Zz成娟 Lv1

你这个问题我遇到过，大概率是构建流程没触发导致缓存清单没更新。Workbox的precacheAndRoute只会在构建时扫描指定路径的文件，如果构建时这些文件不存在或路径不匹配，生成的sw.js就不会包含它们。

你的配置里globPatterns写的images/*.{png,jpg}，这个路径是相对于执行workbox命令时的工作目录的，建议你加个baseDir参数明确指定根目录：

module.exports = {
globPatterns: ['images/.{png,jpg}', 'styles/.css'],
swDest: 'sw.js',
clientsClaim: true,
skipWaiting: true,
baseDir: '.' // 根据你实际项目结构调整
};

另外确保你每次修改配置后都重新构建了sw.js，并且前端引用的路径要和构建时生成的manifest里的路径完全一致。比如你页面里引用的是/images/logo.png，但构建时扫描出来的是images/logo.png，这种情况就会匹配失败。

推荐的做法是先用workbox-cli的generateSW命令生成sw.js，用--verbose参数查看完整日志，确认扫描到的文件是否符合预期。最后清空浏览器缓存再测试，有时候旧的sw.js会残留导致问题。

2026-02-06 21:05