How to use workbox-precaching - 3 common examples

};

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
);

/* 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,
  });
};

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()
);