How to use the workbox-precaching.precacheAndRoute function in workbox-precaching

};

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

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