workbox-sw

Precaching

This feature allows you to specify a list of URLs and their corresponding revision details to be precached when the service worker is installed. This is useful for ensuring that your app's core resources are cached and available offline.

import { precacheAndRoute } from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Runtime Caching

Runtime caching enables you to use various caching strategies for different types of requests. This example uses the NetworkFirst strategy, which tries to fetch the latest content from the network, but falls back to the cache if the network is unavailable.

import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'document',
  new NetworkFirst()
);

Background Sync

Background Sync allows you to defer actions until a stable network connection is detected. This is particularly useful for ensuring that user actions, like posting comments, are not lost when the app is offline.

import { BackgroundSyncPlugin } from 'workbox-background-sync';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60 // Retry for max of 24 Hours
});