Workbox / Vue：在现有的缓存策略处理程序上创建自定义变体

Question

背景：

我正在使用Vue.js构建SPA（单页应用程序）PWA（渐进式Web应用程序）。我有一个远程PostgreSQL数据库，使用PostgREST通过HTTP服务表。我有一个工作的Workbox Service Worker和IndexedDB，它们保存数据库表的本地副本。我还在我的service-worker.js中注册了一些路由；到目前为止一切都很好。...

我让Workbox缓存从REST服务返回表的GET调用。例如：https://www.example.com/api/customers将返回客户的json对象。

workbox.routing.registerRoute('https://www.example.com/api/customers', workbox.strategies.staleWhileRevalidate())

这时，我需要Workbox来做过时验证的模式，but到：

1. 不使用缓存，而是返回此表的本地版本，该版本已存储在IndexedDB中。 （缓存部分）
2. 进行REST调用，并更新本地版本（如果已更改）。 （网络部分）

我几乎可以肯定的是，此工作箱策略中对此没有可配置的选项。因此，我将为此编写代码，这应该非常简单。缓存的检索只是从IndexedDB返回所请求表的内容。对于更新部分，我正在考虑添加一个数据修订号以进行比较。从而确定我是否需要更新本地数据库。

无论如何，我们现在正在放大实际问题：

问题：

这实际上是使用Workbox路由/缓存的好方法，还是因为我使用IndexedDB作为缓存而现在误用了该技术？

和

我如何制作自己的StaleWhileRevalidate策略版本？我很高兴了解如何简单地复制现有Workbox版本，并能够将其导入并在我的Vue.js Service Worker中使用它。从那里，我可以自己更改必要的代码。

为了使这个问题更容易回答，这些是基本的子问题：

• 首先，StaleWhileRevalidate.ts（请参阅下面的链接）是一个.ts（TypeScript？）文件。我可以（应该）简单地将其作为模块导入吗？我大概可以。但是然后我得到了错误：
• [当我在main.js中导入我的自定义CustomStaleWhileRevalidate.ts时，由于（当然）workbox-core/_private/目录不存在，所以所有当前的导入语句都出现错误。

如何处理？

这是当前在Github上的实现：https://github.com/GoogleChrome/workbox/blob/master/packages/workbox-strategies/src/StaleWhileRevalidate.ts

Answer 1

我不认为使用内置StaleWhileRevalidate策略是正确的方法。 可能可以使用StaleWhileRevalidate和许多custom plugin callbacks来执行您要描述的内容，以覆盖默认行为...但是说实话，您最终将通过插件进行太多更改，因此开始从头开始会更有意义。

我建议您做的是编写一个自定义handlerCallback函数，该函数完全实现所需的逻辑，并返回一个handlerCallback。

Response

您也可以在没有Workbox的情况下执行此操作，但是如果您使用Workbox处理一些不相关的缓存需求，那么通过Workbox路由注册此逻辑也可能是最简单的。