Pwa Workbox 同步后台 UI

Question

来自工作箱的BackgroundSync 运行良好，但我遇到了问题

我希望当我修改一个元素时，即使请求仍在 indexedDB 中，当我离线时，该元素也不会在我的 pwa (UI) 上更新。 现在，当我更改元素时（在一个简单的输入中），请求在我的 indexedDB 中，如果我刷新页面，它会像以前一样恢复。当我再次拥有网络时，会发送请求并在 UI 中更新元素

我将 workbox V6 用于我的工作服务，并使用 PHP API 来修改我的元素 这是我的服务人员同步的一部分：

const bgSyncPlugin = new BackgroundSyncPlugin('offlineSyncQueue', {
  maxRetentionTime: 0.1 * 60 
});

registerRoute(
  /http:\/\/localhost:3001/,
  new NetworkFirst({
    plugins: [bgSyncPlugin]
  })
);

你能帮帮我吗

Answer 1

很难修改workbox-background-sync 为您创建的IndexedDB 条目，以便根据更新的参数调整排队请求。

我建议改为在您对 UI 进行更改时直接删除您知道已过期的 IndexedDB 条目，并在删除这些条目后触发另一个 HTTP 请求到您的服务器。如果失败，具有更新值的最新请求将排队并在网络恢复后重试，而您的旧请求（您已从 IndexedDB 中删除）不会。

这不是很简单，但如果需要的话，基本的想法是这样的：

// https://github.com/jakearchibald/idb for ease of use.
const {openDB} = await import('https://unpkg.com/idb@6.0.0/build/esm/index.js?module');

const db = await openDB('workbox-background-sync');

const queuedRequests = await db.getAllFromIndex('requests', 'queueName');

for (const queuedRequest of queuedRequests) {
  // Loop through queuedRequests until you find the one you want,
  // based on some criteria in shouldDelete().
  if (shouldDelete(queuedRequests)) {
    await db.delete('requests', queuedRequest.id);
  }
}

请注意，这种方法对 workbox-background-sync 序列化其对 IndexedDB 的请求的方式做了几个假设，而这些假设在未来版本的 Workbox 中可能并不总是成立。