How to use the workbox-strategies/StaleWhileRevalidate.mjs.StaleWhileRevalidate function in workbox-strategies

To help you get started, we’ve selected a few workbox-strategies examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github philipwalton / blog / assets / sw / routes / content.js View on Github external
const addCacheHeadersPlugin = {
  // Add the `X-Cache-Date` header for requests going to the cache
  async cacheWillUpdate({response}) {
    return copyResponse(response, (responseInit) => {
      responseInit.headers.set('X-Cache-Date', new Date().toUTCString());
      return responseInit;
    });
  },
};

const contentMatcher = ({url}) => {
  return url.hostname === location.hostname &&
      url.pathname.endsWith('index.content.html');
};

export const contentStrategy = new StaleWhileRevalidate({
  cacheName: cacheNames.CONTENT,
  plugins: [
    addCacheHeadersPlugin,
    broadcastUpdatePlugin,
    navigationReportPlugin,
  ],
});

export const createContentRoute = () => {
  return new Route(contentMatcher, contentStrategy);
};
github philipwalton / blog / assets / sw / routes / third-party-assets.js View on Github external
import {Route} from 'workbox-routing/Route.mjs';
import {StaleWhileRevalidate} from 'workbox-strategies/StaleWhileRevalidate.mjs';
import {cacheNames} from '../caches.js';

const thirdPartyAssetsMatcher = ({url}) => {
  return url.hostname !== location.hostname &&
      // Just match .js now, consider adding images and stuff later,
      // but we probably don't need to be caching videos.
      url.pathname.match(/\.(?:js)$/);
};

const thirdPartyAssetsStrategy = new StaleWhileRevalidate({
  cacheName: cacheNames.THIRD_PARTY_ASSETS,
});

export const createThirdPartyAssetsRoute = () => {
  return new Route(thirdPartyAssetsMatcher, thirdPartyAssetsStrategy);
};