NetworkFirst

First added

Workbox

About

An implementation of the network first request strategy.

By default, this strategy will cache responses with a 200 status code as well as opaque responses. Opaque responses are are cross-origin requests where the response doesn’t support CORS.

If the network request fails, and there is no cache match, this will throw a SerwistError exception.

Parameters

• cacheName — Cache name to store and retrieve requests. Defaults to Serwist’s default cache names.
• plugins — Plugins to use in conjunction with this caching strategy.
• fetchOptions — Options passed to non-navigation fetch() calls made by this strategy.
• matchOptions — The CacheQueryOptions passed to any cache.match() or cache.put() call made by this strategy.
• networkTimeoutSeconds — If set, any network requests that fail to respond within the timeout will fallback to the cache.

Usage

sw.ts

import { NetworkFirst, Serwist } from "serwist";

const serwist = new Serwist({
  runtimeCaching: [
    {
      matcher: ({ url }) => url.pathname.startsWith("/social-timeline/"),
      handler: new NetworkFirst(),
    },
  ],
});

More resources

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

• Runtime caching
• Using plugins