sw-broadcast-cache-update

A helper library that uses the Broadcast Channel API to announce when two Response objects differ.

Installation

npm install --save-dev sw-broadcast-cache-update

Demo

Browse sample source code in the demo directory, or try it out directly.

API

goog.broadcastCacheUpdate

packages/sw-broadcast-cache-update/src/index.js:24-29

Behavior

packages/sw-broadcast-cache-update/src/lib/behavior.js:66-155

Examples

// Used as an automatically invoked as "behavior" by a RequestWrapper:

const requestWrapper = new goog.runtimeCaching.RequestWrapper({
  cacheName: 'runtime-cache',
  behaviors: [
    new goog.broadcastCacheUpdate.Behavior({channelName: 'cache-updates'})
  ]
});

// Set up a route to match any requests made against the example.com domain.
// The requests will be handled with a stale-while-revalidate policy, and the
// cache update notification behavior, as configured in requestWrapper, will
// be automatically applied.
const route = new goog.routing.RegExpRoute({
  match: ({url}) => url.domain === 'example.com',
  handler: new goog.runtimeCaching.StaleWhileRevalidate({requestWrapper})
});

// Explicitly invoked usage independent of the goog.routing framework, via
// the notifyIfUpdated() method:

const cacheUpdateBehavior = new goog.broadcastCacheUpdates.Behavior({
  channelName: 'cache-updates'
});

const url = 'https://example.com';
const cacheName = 'runtime-cache';

const cache = await caches.open(cacheName);
const oldResponse = await cache.match(url);
const newResponse = await fetch(url);
await cache.put(url, newResponse);

// Only check for an update if there was a previously cached Response.
if (oldResponse) {
  cacheUpdateBehavior.notifyIfUpdated({
    first: oldResponse,
    second: newResponse,
    cacheName
  });
}

constructor

packages/sw-broadcast-cache-update/src/lib/behavior.js:86-92

Creates a new Behavior instance, which is used to compare two Responses and use the Broadcast Channel API to notify interested parties when those Responses differ.

For efficiency's sake, the underlying response bodies are not compared; only specific response headers are checked.

Parameters

• $0 Object
  • $0.channelName string The name that will be used when creating the BroadcastChannel.
  • $0.headersToCheck [Array<string>] A list of headers that will be used to determine whether the Responses differ. If not provided, the values ['content-length', 'etag', 'last-modified'] are used.
  • $0.source [string] An attribution value that will be used in the broadcast message to indicate where the update originated. If not provided, a default value will be used.

notifyIfUpdated

packages/sw-broadcast-cache-update/src/lib/behavior.js:146-154

An explicit method to call from your own code to trigger the comparison of two Response and fire off a notification via the Broadcast Channel API if they differ.

Parameters

• $0 Object
  • $0.first Response One of the responses to compare. This should not be an opaque response.
  • $0.second Response Another of the respones to compare. This should not be an opaque response.
  • $0.cacheName string Name of the cache the Responses belong to.

broadcastUpdate

packages/sw-broadcast-cache-update/src/lib/broadcast-update.js:51-65

Uses the Broadcast Channel API to notify interested subscribers about a change to a cached resource.

You would not normally call this method directly; it's called automatically by an instance of the Behavior class. It's exposed here for the benefit of developers who would rather not use the full Behavior implementation.

The message that's posted takes the following format, inspired by the Flux standard action format. (Usage of Flux itself is not at all required.)

{
  type: 'CACHE_UPDATED',
  meta: 'sw-broadcast-cache-update',
  payload: {
    cacheName: 'the-cache-name',
    updatedUrl: 'https://example.com/'
  }
}

Parameters

• $0 Object
  • $0.channel BroadcastChannel The BroadcastChannel to use.
  • $0.cacheName string The name of the cache in which the updated Response was stored.
  • $0.url string The URL associated with the updated Response.
  • $0.source string A string identifying this library as the source of the update message.

cacheUpdatedMessageType

packages/sw-broadcast-cache-update/src/lib/constants.js:21-21

responsesAreSame

packages/sw-broadcast-cache-update/src/lib/responses-are-same.js:29-38

Given two Responses, compares several header values to see if they are the same or not.

Parameters

• $0 Object
  • $0.first Response One of the Responses.
  • $0.second Response Another of the Responses.
  • $0.headersToCheck Array<string> A list of headers that will be used to determine whether the Responses differ.

Returns boolean Whether or not the Response objects are assumed to be the same.