workbox-background-sync

What is workbox-background-sync?

The workbox-background-sync npm package is part of the Workbox suite of service worker libraries, designed to make offline caching, background sync, and other service worker features easier to implement. It provides a way to reliably sync data with a web server even when a user's device is offline. The package queues failed requests and retries them when the network is available again.

What are workbox-background-sync's main functionalities?

Queueing failed requests

This feature allows developers to queue failed POST requests when the network is unavailable. The requests are retried automatically when the network comes back online. The code sample shows how to register a route that captures failed POST requests to URLs ending with 'json' and uses the background sync plugin to manage the queue.

workbox.routing.registerRoute(
  new RegExp('/api/.*\json'),
  new workbox.strategies.NetworkOnly({
    plugins: [
      new workbox.backgroundSync.Plugin('myQueueName', {
        maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
      })
    ]
  }),
  'POST'
);

Customizing the retry mechanism

This feature allows developers to customize the behavior of the background sync process. The code sample demonstrates how to add a callback function that is called when the sync event occurs. Developers can use this to add custom logic for handling the retry of queued requests.

const bgSyncPlugin = new workbox.backgroundSync.Plugin('myQueueName', {
  maxRetentionTime: 24 * 60, // Retry for max of 24 Hours
  onSync: async ({ queue }) => {
    let entry;
    while (entry = await queue.shiftRequest()) {
      try {
        await fetch(entry.request);
        console.log('Replay successful for request', entry.request);
      } catch (error) {
        console.error('Replay failed for request', entry.request, error);

        // Put the entry back in the queue and rethrow the error:
        await queue.unshiftRequest(entry);
        throw error;
      }
    }
    console.log('Replay complete!');
  }
});

Other packages similar to workbox-background-sync

offline-plugin

The 'offline-plugin' is a webpack plugin designed to provide offline experience for webpack projects. It includes features like service worker generation and asset caching but does not focus specifically on background sync like workbox-background-sync. It is more of a general offline solution.

README

workbox-background-sync

Queues failed requests and uses the Background Sync API to replay them when the network is available.

Installation

npm install --save-dev workbox-background-sync

Documentation

Read more at this module's documentation page.

Sample Code and Examples

View the sample code to see this module put to use.

What's Workbox?

This module is a part of Workbox, which is a collection of JavaScript libraries for Progressive Web Apps.

Visit https://workboxjs.org/ to learn more about what Workbox can do for you.