service-worker - Workbox 仅将时间戳缓存到 indexDb，如何使用 indexDb 中的 json 数据进行拦截？

Question

下面的路由定义将 json 数据作为 MyCachedData 存储在缓存中，IndexDb 只存储 url 和时间戳。

workboxSW.router.registerRoute('/MyApi(.*)',
workboxSW.strategies.staleWhileRevalidate({
    cacheName: 'MyCachedData',
    cacheExpiration: {
        maxEntries: 50
    },
    cacheableResponse: {statuses: [0, 200]}
 })
);

是否可以仅将 json 数据存储在索引数据库中，如何定义它以使用 Workbox 拦截（添加、更新、删除）？

Answer 1

不，Workbox 依赖缓存存储 API来存储响应的正文。（正如您所观察到的，它使用 IndexedDB 获取一些带外管理信息，例如时间戳，用于缓存过期。）

如果使用缓存存储 API 的方法不适合您的用例（很高兴听到为什么不这样做？），那么我建议直接更新 IndexedDB，也许通过idb-keyval.

Answer 2

您可以编写一个自定义函数来执行提取并将信息存储在 indexedDB 中，但这将与 Workbox 所做的任何事情分开，以确保您只获取 API 请求。

这未经测试，但类似于：

workboxSW.router.registerRoute(
  '/MyApi(.*)',
  (event) => {
    // TODO:
    //     1. Check if entry if in indexedDB
    //         1a. If it is then return new Response('<JSON Data from IndexedDB>');
    //         1b. If not call fetch(event.request)
    //             Then parse fetch response, save to indexeddb
    //             Then return the response.
  }
);