How to use workbox-precaching - 3 common examples

To help you get started, we’ve selected a few workbox-precaching 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 GoogleChrome / samples / web-share / src / js / service-worker.js View on Github external
};

const cachedMediaHandler = new CacheOnly({
  cacheName,
  plugins: [
    // Support for cache requests that include a Range: header.
    new RangeRequestsPlugin(),
  ],
});

skipWaiting();
clientsClaim();

// This will be replaced by the list of files to precache by
// the `workbox injectManifest` build step.
precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  '/_share-target',
  shareTargetHandler,
  'POST'
);

registerRoute(
  new RegExp(urlPrefix),
  cachedMediaHandler
);
github philipwalton / blog / assets / sw / precache.js View on Github external
/* global __PRECACHE_MANIFEST__ */

import {PrecacheController} from 'workbox-precaching/PrecacheController.mjs';
import {Route} from 'workbox-routing/Route.mjs';
import {CacheFirst} from 'workbox-strategies/CacheFirst.mjs';
import {cacheNames} from './caches.js';


const pc = new PrecacheController(cacheNames.SHELL);

const precacheMatcher = ({url}) => {
  return Boolean(pc.getCacheKeyForURL(url.href));
};

const cacheFirst = new CacheFirst({cacheName: cacheNames.SHELL});

export const precacheHandler = ({request, event}) => {
  const cacheKey = pc.getCacheKeyForURL(request.url);

  return cacheFirst.handle({
    request: new Request(cacheKey),
    event,
  });
};
github BeWelcome / rox / assets / js / sw.js View on Github external
import {precacheAndRoute} from 'workbox-precaching';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute} from 'workbox-routing';

precacheAndRoute(self.__WB_MANIFEST);

addEventListener("message", event => {
    if (event.data && event.data.type === "SKIP_WAITING") {
        skipWaiting();
    }
});

registerRoute(
    ({url}) => url.pathname === '/',
    new NetworkFirst()
);

registerRoute(
    ({url}) => url.pathname.startsWith('/message'),
    new NetworkFirst()
);

workbox-precaching

This module efficiently precaches assets.

MIT
Latest version published 4 months ago

Package Health Score

89 / 100
Full package analysis