使用 sw-precache 在 dynamicUrlToDependencies 中没有显式声明的缓存 Url答案

【问题标题】：Caching Url without explicit declaration in dynamicUrlToDependencies using sw-precache使用 sw-precache 在 dynamicUrlToDependencies 中没有显式声明的缓存 Url
【发布时间】：2018-11-26 17:21:06
【问题描述】：

有没有办法，使用sw-precache，在不精确指定dynamicUrlToDependencies 中的url 字符串的情况下缓存您当前所在的url？当我提供特定的相对 url /dynamic/url-circle 时，我的页面会缓存，但如果我仅提供 / 则不会。我假设发生这种情况是因为我的网址是http://localhost:3000/dynamic/url-circle，而不仅仅是http://localhost:3000/。我需要它来处理任何 url 字符串，因为我不知道dynamic/ 之后的确切 url（例如/dynamic/url-triangle，/dynamic/url-square）。是否有任何抽象或字符串模式可用于dynamicUrlToDependencies？或者我可以使用其他解决方案吗？

例如：

    dynamicUrlToDependencies: {
       '/dynamic/url-circle': [ 'public/dist/css/dynamic.css', 'public/dist/js/dynamic.js' ],
       '/': [ 'public/dist/css/dynamic.css', 'public/dist/js/dynamic.js' ],
  },

这是我在 Gruntfile 中的 sw-precache 设置：

   const rootDir = 'public'

   const config = {
       cacheId: version,
       handleFetch: true,
       logger: grunt.log.writeln,
       staticFileGlobs: [
         `${rootDir}/dist/js/*.{css,js}`,
         `${rootDir}/dist/css/*.{css,js}`,
         `${rootDir}/dist/offline.html`,
       ],
       dynamicUrlToDependencies: {
          '/dynamic/url-circle': [ 'public/dist/css/dynamic.css', 'public/dist/js/dynamic.js' ],
          '/': [ 'public/dist/css/dynamic.css', 'public/dist/js/dynamic.js' ],
       },
       stripPrefix: `${rootDir}/`,
       directoryIndex: 'dist/offline.html',
       navigateFallback: 'dist/offline.html',
       verbose: true,
       maximumFileSizeToCacheInBytes: 15 * 1024 * 1024, // 15MB
   };

【问题讨论】：

标签： service-worker sw-precache

【解决方案1】：

您可以使用runtimeCaching 来缓存您的页面。我做了这样的事情。

  runtimeCaching: [
      urlPattern: /\/url-lot\//,
      handler: 'networkFirst',
    },
  ]

然后每个带有url-lot 的网址都会被缓存。现在感觉有点明显，但这就是生活。

【讨论】：