laravel 5：带有 sw-precache 的动态 url答案

【问题标题】：laravel 5: dynamic url with sw-precachelaravel 5：带有 sw-precache 的动态 url
【发布时间】：2018-09-30 15:58:00
【问题描述】：

我正在尝试使离线优先功能适应我的 laravel 5.4 应用程序。一切正常，直到我需要更具体地缓存刀片文件我遇到包含通配符的 URL 的问题。我尝试了几种方法，但没有任何效果/这是触发 sw-precache 插件的 webpack.mix.js 函数

mix.webpackConfig({
    plugins: [
    new SWPrecacheWebpackPlugin({
        cacheId: 'pwa',
        filename: 'service-worker.js',
        staticFileGlobs: ['public/**/*.{css,eot,svg,ttf,woff,woff2,js,html}'],
        minify: true,
        stripPrefix: 'public/',
        handleFetch: true,
        staticFileGlobsIgnorePatterns: [/\.map$/, /mix-manifest\.json$/, /manifest\.json$/, /service-worker\.js$/],
         dynamicUrlToDependencies: {
           '/'.{slug}.'/projects' : 'resources/views/userProfile.blade.php'
         },
        navigateFallback: '/',
        runtimeCaching: [
            {
                urlPattern: /^https:\/\/fonts\.googleapis\.com\//,
                handler: 'cacheFirst'
            },
            {
                urlPattern: /^https:\/\/www\.thecocktaildb\.com\/images\/media\/drink\/(\w+)\.jpg/,
                handler: 'cacheFirst'
            }
        ],
        // importScripts: ['./js/push_message.js']
    })
    ]
});

当我运行npm run production 时使用此代码，它会给我一个意外令牌的语法错误。

我尝试像 '/{slug}/projects' : 'resources/views/userProfile.blade.php' 那样内联执行它，当我执行 npm 时它不会给我任何错误，但是当我在浏览器上测试它时它会破坏 URL。有谁知道如何使这项工作？非常感谢任何答案。

【问题讨论】：

'/'.{slug}.'/projects' 字符串连接使用+ 完成，或者您可以使用模板语法`/${slug}/projects`
仍然无法正常工作。在 npm 运行生产时 + 会引发错误，/${slug}/projects 会中断 url

标签： php laravel routing laravel-5.4 service-worker

【解决方案1】：

你应该为此使用正则表达式

'/\.*/projects' : 'resources/views/userProfile.blade.php',

PS：你得到一个错误是因为 Laravel mix 不知道 'slug'（应该是一个变量），而 laravel mix 是 js 文件，你必须使用 + 作为连接运算符。

【讨论】：