0

来自工作箱的 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]
  })
);

你能帮我吗

4

1 回答 1

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);
  }
}

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

于 2021-02-10T22:15:03.647 回答