Pwa Workbox Sync-background UI

BackgroundSync из рабочего окна работает отлично, но у меня проблема

Я хочу, чтобы при изменении элемента, даже если запрос все еще находится в indexedDB, элемент не обновлялся в моем pwa (UI), когда я не в сети. На данный момент, когда я меняю элемент (при простом вводе), запрос находится в моей indexedDB, и если я обновляю страницу, он возвращается, как и раньше. Когда у меня снова есть сеть, запрос отправляется, и элемент обновляется в пользовательском интерфейсе.

Я использую рабочую панель V6 для своего рабочего сервиса и PHP API для изменения моих элементов, это часть моего рабочего сервиса для синхронизации:

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

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

Не могли бы вы мне помочь


javascript progressive-web-apps workbox workbox-webpack-plugin background-sync
person Keren    schedule 10.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Трудно изменить запись IndexedDB, которую workbox-background-sync создает для вас, чтобы настроить поставленный в очередь запрос на основе обновленных параметров.

Вместо этого я бы порекомендовал напрямую удалить записи IndexedDB, которые, как вы знаете, устарели, когда вы вносите изменения в свой пользовательский интерфейс, и после удаления этих записей инициируйте еще один HTTP-запрос к вашему серверу. В случае сбоя последний запрос с обновленными значениями будет поставлен в очередь и повторен после восстановления сети, а ваши старые запросы (которые вы удалили из IndexedDB) - нет.

Сделать это не очень просто, но основная идея, если вам нужно, будет примерно такой:

// https://github.com/jakearchibald/idb for ease of use.
const {openDB} = await import('https://unpkg.com/[email protected]/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.

person Jeff Posnick    schedule 10.02.2021
comment
Спасибо за ответ Джефф, извини, я оговорился :( я хочу смоделировать запросы, которые находятся в моем IndexedDB, в моем пользовательском интерфейсе, даже если запрос еще не был отправлен на сервер. Например, я есть список элементов и форма для добавления его в свое приложение. Если я не в сети и добавляю элемент, я бы хотел, чтобы он отображался в списке элементов. Например, для firebase db.enablePersistence (), я хочу, чтобы пользователь иметь доступ к данным и видеть изменения - person Keren; 11.02.2021
comment
Как этот экземпляр: developers.google.com/web/updates/2015/ 12 / фоновая синхронизация. Даже если он не в сети, видно, что сообщение отправлено - person Keren; 11.02.2021
comment
Вы можете использовать ту же технику, описанную выше, чтобы получить доступ к запросам очереди из вашего window контекста. (Только не удаляйте их.) - person Jeff Posnick; 11.02.2021
comment
Но я не хочу иметь доступ к запросам, которые находятся в очередях, я бы предпочел изменить данные из моей веб-службы (или, по крайней мере, тот, который хранится в кеше), чтобы у меня не было неправильных данных на сайте. . В индексе БД только запросы. Мои данные, используемые в автономном режиме, загружаются в мой кеш - person Keren; 11.02.2021