Laravel 5.4集成离线优先功能：动态URL缓存问题求助

嘿，我懂你在Laravel 5.4折腾离线优先时遇到的这个动态URL缓存问题——静态Blade文件都好好的，一带通配符的动态路由就掉链子，确实挺闹心的。咱们来一步步搞定它。

首先得明确：sw-precache默认只处理静态资源，动态URL需要额外配置规则，你当前的webpack.mix.js只指定了staticFileGlobs，这就是动态路由没被缓存的核心原因。

1. 给动态路由添加runtimeCaching配置 #

sw-precache的runtimeCaching选项专门用来处理动态请求，你可以针对带通配符的Laravel路由（比如/posts/{id}、/profile/{username}这类）设置缓存策略。修改你的webpack.mix.js代码如下：

mix.webpackConfig({
    plugins: [
        new SWPrecacheWebpackPlugin({
            cacheId: 'pwa',
            filename: 'service-worker.js',
            staticFileGlobs: ['public/**/*.{css,eot,svg,ttf,woff,woff2,jpg,jpeg,png,js}'],
            // 新增动态路由缓存规则
            runtimeCaching: [
                {
                    // 正则匹配你的动态路由，比如/posts/1、/profile/xxx这类路径
                    urlPattern: /^https:\/\/your-domain\.com\/(posts|profile)\/.*/,
                    // 选择缓存策略：networkFirst优先用网络请求，失败再用缓存；适合需要更新的内容
                    // 如果是静态动态内容（比如博客文章），也可以用cacheFirst
                    handler: 'networkFirst',
                    options: {
                        cache: {
                            name: 'dynamic-content-cache',
                            maxEntries: 50, // 限制缓存条目数量，避免占太多空间
                            maxAgeSeconds: 86400 // 缓存有效期1天
                        }
                    }
                }
            ],
            // 修正资源路径前缀，匹配Laravel的public目录结构
            stripPrefix: 'public/',
            // 当请求的URL不在缓存中时， fallback 到主页
            navigateFallback: '/',
            // 排除API路由，避免缓存接口响应导致数据不更新
            navigateFallbackWhitelist: [/^(?!\/api).*/]
        })
    ]
});

2. 确保动态路由响应允许缓存 #

Laravel控制器返回的动态视图需要设置正确的缓存头，让Service Worker知道这个响应可以被缓存。在你的控制器方法里添加缓存头：

public function showPost($id)
{
    $post = Post::findOrFail($id);
    
    // 设置允许缓存的响应头
    return response()->view('posts.show', compact('post'))
        ->header('Cache-Control', 'public, max-age=86400');
}

3. 测试前清理旧缓存和Service Worker #

旧的Service Worker和缓存会干扰新配置的生效，测试前一定要做这两步：

• 打开浏览器开发者工具的Application标签，找到Service Workers，点击Unregister清除旧的Service Worker
• 同时在Application -> Cache Storage里删除所有旧缓存
• 重新运行npm run dev或npm run production生成新的service-worker.js

4. 调整通配符匹配规则（按需） #

如果你的动态路由类型很多（比如/categories/{slug}、/tags/{id}），可以把正则改得更宽泛：

urlPattern: /^https:\/\/your-domain\.com\/.*\/.*/

但要注意配合navigateFallbackWhitelist排除API路由，避免缓存接口数据导致更新不及时。本地开发时，也可以用相对路径的正则：

urlPattern: /\/.*\/.*/

这样调整后，带通配符的动态URL应该就能被Service Worker正确缓存了。记得每次修改配置后重新编译资源，并且清理旧缓存哦。

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