Flutter PWA使用url_strategy后Workbox缓存路径不匹配求助

当你用setPathUrlStrategy()移除Flutter Web的URL哈希后，Workbox缓存失效的核心原因有两个：

1. Workbox默认的预缓存路由只匹配生成清单时的路径，哈希模式下的路径和path模式下的真实路径不匹配
2. 单页应用（SPA）的非静态资源请求（比如/homepage）在服务端没有配置fallback到index.html，导致刷新时返回404，缓存无法生效

下面是具体的解决步骤：

1. 修改Service Worker，添加SPA导航路由 #

更新你的service_worker.js，使用Workbox的registerNavigationRoute来处理所有SPA路径的导航请求，确保它们指向预缓存的index.html：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

const { precacheAndRoute } = workbox.precaching;
const { registerNavigationRoute } = workbox.routing;

// 处理静态资源的预缓存
precacheAndRoute(self.__WB_MANIFEST);

// 注册导航路由，适配SPA的path模式
registerNavigationRoute(
  // 从预缓存清单中获取index.html的路径
  self.__WB_MANIFEST.find(entry => entry.url === 'index.html').url,
  {
    // 排除静态资源（带后缀的文件）和/_开头的路径，避免误拦截
    blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
  }
);

2. 配置服务端Fallback规则 #

因为Flutter Web是SPA，所有非静态资源的请求都需要被导向index.html，否则用户刷新/homepage这类路径时会返回404，缓存也无法正常工作。

示例配置（Nginx） #

server {
  location / {
    try_files $uri $uri/ /index.html;
  }
}

开发环境临时处理 #

如果用Flutter官方的开发服务器，可以启动时添加参数强制使用path策略并处理路由：

flutter run -d chrome --web-renderer html --url-strategy path

3. 重新生成Service Worker缓存清单 #

修改配置后，需要重新运行Workbox生成新的service worker文件：

workbox generateSW workbox-config.js

验证效果 #

1. 重新构建并部署你的Flutter Web应用
2. 访问无哈希的路径（比如http://localhost:400/homepage），刷新页面确认资源从缓存加载
3. 打开浏览器DevTools的Application标签，查看Service Workers和Cache Storage，确认缓存的资源路径正确

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