Pwa Workbox 同步后台 UI

Posted 2023-03-10

【中文标题】Pwa Workbox 同步后台 UI

【英文标题】：Pwa Workbox Sync-background UI

【发布时间】：2021-05-14 00:01:36

【问题描述】：

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

你能帮帮我吗

【参考方案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 中可能并不总是成立。

【讨论】：

感谢您的回复 Jeff 对不起，我误会了自己:( 我想做的是在我的 UI 上模拟我的 IndexedDB 中的请求，即使请求尚未发送到服务器。例如，我有一个项目列表和一个要在我的应用程序中添加它的表单。如果我离线并且我添加了一个元素，我希望它出现在元素列表中，例如，对于 firebase “db. enablePersistence()"，我希望用户可以访问数据并可以看到修改

喜欢这个实例：developers.google.com/web/updates/2015/12/background-sync。即使他下线，你也可以看到消息已发送

您可以使用上述相同的技术从您的window 上下文中访问队列请求。 （只是不要删除它们。）

但是我不想访问队列中的请求，我宁愿修改我的 Web 服务中的数据（或者至少是存储在缓存中的数据），以便我网站上没有错误的数据。在数据库索引中，只有请求。我离线时使用的数据存储在我的缓存中