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

【问题标题】：Workbox/Vue: Create a custom variation on an existing caching strategy handlerWorkbox/Vue：在现有缓存策略处理程序上创建自定义变体
【发布时间】：2020-03-09 16:10:00
【问题描述】：

背景：

我正在使用 Vue.js 构建一个 SPA（单页应用程序）PWA（渐进式 Web 应用程序）。我有一个远程 PostgreSQL 数据库，通过 HTTP 和 PostgREST 为表提供服务。我有一个工作的 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 执行 stale-while-revalidate 模式，但要：

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

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

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

问题：

这实际上是使用 Workbox Routes/Caching 的好方法，还是我现在滥用该技术，因为我使用 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

【问题讨论】：

标签： vue.js caching vuejs2 progressive-web-apps workbox

【解决方案1】：

我不认为在这里使用内置的StaleWhileRevalidate 策略是正确的方法。可能可以使用StaleWhileRevalidate 以及一些custom plugin callbacks 来覆盖默认行为......但老实说，你最终会通过从头开始的插件会更有意义。

我建议您改为编写一个自定义的handlerCallback 函数，该函数完全实现您想要的逻辑，并返回一个Response。

// Your full logic goes here.
async function myCustomHandler({event, request}) {
  event.waitUntil((() => {
    const idbStuff = ...;
    const networkResponse = await fetch(...);
    // Some IDB operation go here.
    return finalResponse;
  })());
}

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

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

【讨论】：