如何正确预缓存根路径"/"？webpack-plugin-workbox相关问题

我之前也碰到过完全一样的坑！用webpack-plugin-workbox生成预缓存清单时，默认只会把/index.html纳入，但用户日常访问的都是根路径/，离线状态下就会因为找不到预缓存的/资源而加载失败，直接访问/index.html却能正常打开，确实很头疼。下面分享几个实用的解决思路：

方法1：手动给预缓存清单添加根路径条目 #

在Workbox的webpack配置里，通过additionalManifestEntries手动把根路径的记录加进去，指向已预缓存的index.html：

// webpack.config.js 中的Workbox配置段
new WorkboxPlugin.GenerateSW({
  // 其他原有配置...
  additionalManifestEntries: [
    {
      url: '/',
      revision: 'your-unique-revision', // 可以和index.html的revision保持一致
      resources: ['/index.html']
    }
  ]
})

这样预缓存清单里就会同时存在/和/index.html的条目，离线访问根路径时就能匹配到对应的资源了。

方法2：配置导航回退规则（更推荐） #

如果不想手动维护路径条目，可以开启Workbox的导航回退功能，让所有导航类请求（包括根路径）都自动回退到index.html：

new WorkboxPlugin.GenerateSW({
  // 其他原有配置...
  navigateFallback: '/index.html',
  // 可选：排除不需要回退的路径，比如API接口
  navigateFallbackDenylist: [
    /^\/api\//
  ]
})

这个方案更通用，不仅能解决根路径的问题，还能覆盖单页应用的其他路由（比如/about、/profile这类），离线状态下所有导航请求都会加载index.html，交给前端路由去处理。

方法3：配合服务器配置辅助优化（可选） #

如果你的服务器支持，可以把根路径的请求重定向到/index.html，但这只是服务器层面的处理，离线场景还是得依赖Workbox的预缓存或导航回退规则，所以这个方法建议和上面的Workbox配置搭配使用。

总体来说，方法2是最省心的，能一次性搞定单页应用所有导航路径的离线访问问题，不用逐个手动添加预缓存条目。

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