![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)

<br />

From Chrome 123, the Service Worker Static Routing API is available. This API lets you declaratively state how certain resource paths should be fetched, meaning that the browser does not need to run a service worker only to fetch responses from a cache, or directly from the network. This API has been in origin trial since Chrome 116, and this post details the API launching in Chrome 123.

> [!NOTE]
> **Note:** See the original post, [Service Worker Static Routing API Origin Trial](https://developer.chrome.com/blog/service-worker-static-routing-api-origin-trial.md.txt) for the background to the feature.

## Use the API

To use the API call `event.addRoutes` on the service worker `install` event. Pass this method a list of routes, with the following properties:

`condition`
:   Specifies when the rule applies. Accepts the following properties:

    - `urlPattern`: A [URLPattern](https://developer.mozilla.org/docs/Web/API/URL_Pattern_API) instance, or a string representing a valid URLPattern, that can be passed into the `URLPattern` constructor.
    - `requestMethod`: A string containing a Request [method](https://developer.mozilla.org/docs/Web/API/Request/method).
    - `requestMode`: A string containing a Request [mode](https://developer.mozilla.org/docs/Web/API/Request/mode).
    - `requestDestination`: A string containing a Request [destination](https://developer.mozilla.org/docs/Web/API/Request/destination).
    - `runningStatus`: a string, either `"running"` or `"not-running"`. This indicates the running status of the service worker.

`source`
:   Specifies how the resources matching `condition` are loaded. One of the following strings:

    - `"network"`
    - `"cache"`
    - `"fetch-event"`
    - `"race-network-and-fetch-handler"`

> [!NOTE]
> **Note:** `source` can optionally include a cache name, see the example later in this post.

In the following example, URLs that start with "/articles" are routed to the service worker if it is currently running. Where there are multiple conditions, for example `urlPattern` and `runningStatus`, all conditions must be met for the route to be used.

```javascript
addEventListener('install', (event) => {
  event.addRoutes({
    condition: {

          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});
```

In the following example, posts to a form are sent directly to the network and bypass the service worker.

```javascript
addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/form/*",
          requestMethod: "post"
    },
    source: "network"
  });
});
```

In the following example, the cache storage named `"pictures"` is used for fetching files with a file extension of `.png` or `.jpg`.

```javascript
addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
      or: [
        {urlPattern: "*.png"},
        {urlPattern: "*.jpg"}
      ]
    },
    source: {
      cacheName: "pictures"
    }
  });
});
```

## Changes from the origin trial

The original origin trial used `InstallEvent.registerRouter()` instead of `InstallEvent.addRoutes()`, the `registerRouter()` method could only be called once. This change was based on [community feedback to the origin trial](https://github.com/w3c/ServiceWorker/issues/1373#issuecomment-1667123029).

> [!NOTE]
> **Note:** If you have code that uses the deprecated `registerRouter()` method, you should migrate to `addRoutes()`. We plan to remove `registerRouter()` in Chrome 125.

The new API also takes advantage of changes to `URLPattern` introduced in [Chrome 121](https://developer.chrome.com/blog/chrome-121-beta.md.txt#urlpattern_inherit_left_wildcard_right), adds the ability to specify a request method, mode, and destination, and adds additional source options.

## Support in Chrome DevTools

Registered router rules are displayed in the **Service Worker** Tab of the **Application** panel.

![The router rules highlighted in the Application panel.](https://developer.chrome.com/static/blog/service-worker-static-routing/image/devtools1.jpg)

In the **Network** Panel, if the request matches the registered rule, this is indicated in the size column. When holding the pointer over the size column, the registered router ID is shown. Corresponding rules are displayed in the application tab.

![The router ID as displayed in the Network panel.](https://developer.chrome.com/static/blog/service-worker-static-routing/image/devtools2.jpg)