How to use workbox-routing - 10 common examples
To help you get started, we’ve selected a few workbox-routing 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.
ampproject / amp-sw / src / modules / amp-caching / index.ts View on Github 
ampAssetsCaching() {
// Versioned Assets
router.registerRoute(
VERSIONED_ASSETS_RE,
new CacheFirst({
cacheName: VERSIONED_CACHE_NAME,
plugins: [
new Plugin({
maxAgeSeconds: 14 * 24 * 60 * 60, // 14 days
}),
],
}),
);
// Unversioned runtimes
router.registerRoute(
UNVERSIONED_RUNTIME_RE,
new StaleWhileRevalidate({
cacheName: UNVERSIONED_CACHE_NAME,// Unversioned runtimes
router.registerRoute(
UNVERSIONED_RUNTIME_RE,
new StaleWhileRevalidate({
cacheName: UNVERSIONED_CACHE_NAME,
plugins: [
new Plugin({
maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
}),
],
}),
);
// Unversioned Extensions
router.registerRoute(
UNVERSIONED_EXTENSIONS_RE,
new StaleWhileRevalidate({
cacheName: UNVERSIONED_CACHE_NAME,
plugins: [
new Plugin({
maxAgeSeconds: 24 * 60 * 60, // 1 day
}),
],
}),
);
}ampAssetsCaching() {
// Versioned Assets
router.registerRoute(
VERSIONED_ASSETS_RE,
new CacheFirst({
cacheName: VERSIONED_CACHE_NAME,
plugins: [
new Plugin({
maxAgeSeconds: 14 * 24 * 60 * 60, // 14 days
}),
],
}),
);
// Unversioned runtimes
router.registerRoute(
UNVERSIONED_RUNTIME_RE,
new StaleWhileRevalidate({
cacheName: UNVERSIONED_CACHE_NAME,
plugins: [
new Plugin({
maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
}),
],
}),
);
// Unversioned Extensions
router.registerRoute(
UNVERSIONED_EXTENSIONS_RE,
new StaleWhileRevalidate({
cacheName: UNVERSIONED_CACHE_NAME,export const init = () => {
const precacheRouter = new Router();
registerRoutes(precacheRouter, precacheRoutes);
precacheRouter.addFetchListener();
const runtimeRouter = new Router();
registerRoutes(runtimeRouter, runtimeRoutes);
runtimeRouter.addFetchListener();
// Only add the cache listener for runtime routes.
runtimeRouter.addCacheListener();
const logRouter = new Router();
registerRoutes(logRouter, logRoutes);
logRouter.addFetchListener();
};export const init = () => {
const precacheRouter = new Router();
registerRoutes(precacheRouter, precacheRoutes);
precacheRouter.addFetchListener();
const runtimeRouter = new Router();
registerRoutes(runtimeRouter, runtimeRoutes);
runtimeRouter.addFetchListener();
// Only add the cache listener for runtime routes.
runtimeRouter.addCacheListener();
const logRouter = new Router();
registerRoutes(logRouter, logRoutes);
logRouter.addFetchListener();
};export const init = () => {
const precacheRouter = new Router();
registerRoutes(precacheRouter, precacheRoutes);
precacheRouter.addFetchListener();
const runtimeRouter = new Router();
registerRoutes(runtimeRouter, runtimeRoutes);
runtimeRouter.addFetchListener();
// Only add the cache listener for runtime routes.
runtimeRouter.addCacheListener();
const logRouter = new Router();
registerRoutes(logRouter, logRoutes);
logRouter.addFetchListener();
};const createCollectRoutes = (bgSyncPlugin: BackgroundSyncPlugin) => {
const match = ({url}: RouteMatchCallbackOptions) =>
url.hostname === GOOGLE_ANALYTICS_HOST &&
COLLECT_PATHS_REGEX.test(url.pathname);
const handler = new NetworkOnly({
plugins: [bgSyncPlugin],
});
return [
new Route(match, handler, 'GET'),
new Route(match, handler, 'POST'),
];
};const createCollectRoutes = (bgSyncPlugin: BackgroundSyncPlugin) => {
const match = ({url}: RouteMatchCallbackOptions) =>
url.hostname === GOOGLE_ANALYTICS_HOST &&
COLLECT_PATHS_REGEX.test(url.pathname);
const handler = new NetworkOnly({
plugins: [bgSyncPlugin],
});
return [
new Route(match, handler, 'GET'),
new Route(match, handler, 'POST'),
];
};/.*cdn\.jsdelivr\.net/,
new CacheFirst({
cacheName: 'jsdelivr-v1',
fetchOptions: {
credentials: 'omit',
mode: 'cors',
},
plugins: [
new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
],
}),
)
//#endregion
//#region JavaScript files
registerRoute(
/.+\/app\/\w{2,3}\.\w{7}\.js$/,
new CacheFirst({
cacheName: 'javascript-v1',
fetchOptions: {
credentials: 'omit',
mode: 'cors',
},
plugins: [
new ExpirationPlugin({ maxAgeSeconds: oneWeek, purgeOnQuotaError: true }),
],
}),
)
registerRoute(
/.+\/plugins\/.+\.js$/,
new StaleWhileRevalidate({
cacheName: 'javascript-v1',new AmpDocumentCachablePlugin({
maxEntries: documentCachingOptions.maxDocumentsInCache || 10,
maxAgeSeconds:
documentCachingOptions.maxAgeSecondsforDocumentsInCache ||
5 * 24 * 60 * 60,
allowedNonAMPPages: documentCachingOptions.allowedNonAMPPages,
}),
],
networkTimeoutSeconds: documentCachingOptions.timeoutSeconds,
},
fallbackOfflinePageUrl,
),
navigationPreloadOptions,
);
router.registerRoute(navRoute);
return navRoute;
}workbox-routing
A service worker helper library to route request URLs to handlers.
