如何使用Workbox和Vue PWA临时缓存文件？

Question

我已经使用@ vue / cli-plugin-pwa构建了一个Web应用程序，并使用service-worker.js中的workbox-webpack-plugin从Webpack预先缓存了路由。可以很好地配合：

// in service-worker.js...
// Precache
workbox.precaching.precacheAndRoute(self.__precacheManifest)

// Cache routes
workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL('/index.html'),
  {
    whitelist: [/./
    ],
    blacklist: [
      /(api|precache-manifest)/
    ]
  }
)

...但是如何临时将新文件添加到缓存中？ 如果我的用户订阅了一系列文章，我想在后台将图像添加到我的缓存中，这样用户就不必在第一次打开文章时就等待加载

我尝试过类似...

// in app code...
const cache = await caches.open('cachename')
await cache.add('/path/to/file.ext')

但是，即使文件已添加到缓存中，我也无法让服务工作者理解这一点并拦截将来的提取以从缓存中为它们提供服务。我的理解是，这必须在service-worker中进行拦截，但是Workbox会在后台进行此操作，并且添加到service-worker.js中的简单eventListener会与Workbox发生冲突。

有人可以向我解释这种临时添加到缓存方案的最佳实践是什么吗？