Pwa Workbox Sync-background UI

Question

BackgroundSync, from workbox, works perfectly but I have a problem

I want that when I modify an element, even if the request is still in indexedDB, the element is not updated on my pwa (UI), when I am offline. For now, when I change the element ( in a simple input), the request is in my indexedDB, and if I refresh the page, it gets back as before. When I have network again, the request is sent and the element is updated in the UI

I use workbox V6 for my worker service, and a PHP API to modify my elements this is the part of my service worker for sync :

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

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

Can you help me, please

score 1 · Answer 1 · answered Feb 10 '21 at 22:15

It's difficult to modify the IndexedDB entry that workbox-background-sync creates for you to adjust the queued request based on updated parameters.

What I'd recommend instead is to directly delete the IndexedDB entries that you know are out of date when you make changes in your UI, and after those entries are deleted, trigger another HTTP request to your server. If it fails, the newest request with updated values will be queued and retried once the network comes back, and your old requests (which will you have deleted from IndexedDB) won't.

It's not very straightforward to do this, but the basic idea, if you needed to, would be something like:

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

Note that this approach makes several assumptions about the way workbox-background-sync serializes its requests to IndexedDB, and those might not always hold in future versions of Workbox.

Thanks for your reply Jeff I’m sorry,I misspoke myself:( what I want to do is simulate the requests that are in my IndexedDB, on my UI even if the request has not yet been sent to the server. For instance, I have a list of items and a form to add it on my application. If I am offline and I add an element I would like it to appear in the element list Like, for firebase the "db.enablePersistence()", i want that the user have access on the data and can see the modifications — Keren, Feb 11 '21 at 08:30
Like this instance : https://developers.google.com/web/updates/2015/12/background-sync . Even if he is offline, you can see that the message is sent — Keren, Feb 11 '21 at 12:52
You could use the same technique described above to get access to the queue requests from your `window` context. (Just don't delete them.) — Jeff Posnick, Feb 11 '21 at 15:48
But I don’t want to have access to requests that are in queues, I would rather modify the data from my Web Service ( or at least the one that is stored in the cache ) so that I do not have wrong data on the site. In the DB index, there are only requests. My data used when offline is stoked in my cache — Keren, Feb 11 '21 at 20:21

Pwa Workbox Sync-background UI

1 Answers1