Skip to main content

NavigationRoute

First added

Workbox

About

NavigationRoute makes it easy to create a Route object that matches navigation requests.

It will only match incoming Requests whose mode is set to "navigate".

You can optionally only apply this route to a subset of navigation requests by using one or both of the denylist and allowlist parameters.

If both denylist and allowlist are provided, denylist will take precedence.

The regular expressions in allowlist and denylist are matched against the concatenated pathname and search portions of the requested URL.

Parameters

  • handler — A callback function that returns a Promise resolving to a Response.
  • options — Options for NavigationRoute:
    • allowlist — A list of RegExp objects matching URLs that should match this route.
    • denylist — A list of RegExp objects matching URLs that should not match this route.

Usage

// Example: handling all navigations using an app shell.
import { NavigationRoute, Serwist } from "serwist";

const serwist = new Serwist({
  // Assuming that your precache list includes "/app-shell.html".
  precacheEntries: self.__SW_MANIFEST,
});

// This assumes that "/app-shell.html" has been precached.
serwist.registerRoute(new NavigationRoute(serwist.createHandlerBoundToUrl("/app-shell.html")));

serwist.addEventListeners();

More resources

Here is a list of resources you can read to learn more about NavigationRoute: