Constructor

Strategies

new Strategies()

This constructor will configure shared options across each strategy.

Parameter

input.cacheId

Optional

String

The cacheId to be applied to the run time strategies cache names.

Methods

cacheFirst

cacheFirst(options) returns module:workbox-runtime-caching.CacheFirst

A cache first run-time caching strategy.

Parameter

options

Optional

module:workbox-sw.Strategies.StrategyOptions

To define any additional caching or broadcast plugins pass in option values.

Returns

module:workbox-runtime-caching.CacheFirst An instance of a CacheFirst handler.

Example

const = new WorkboxSW();
const cacheFirstStrategy = workboxSW.strategies.cacheFirst();

workboxSW.router.registerRoute('/styles/*', cacheFirstStrategy);

cacheOnly

cacheOnly(options) returns module:workbox-runtime-caching.CacheOnly

A cache only run-time caching strategy.

Parameter

options

Optional

module:workbox-sw.Strategies.StrategyOptions

To define any additional caching or broadcast plugins pass in option values.

Returns

module:workbox-runtime-caching.CacheOnly An instance of a CacheOnly handler.

Example

const workboxSW = new WorkboxSW();
const cacheOnlyStrategy = workboxSW.strategies.cacheOnly();

workboxSW.router.registerRoute('/styles/*', cacheOnlyStrategy);

networkFirst

networkFirst(options) returns module:workbox-runtime-caching.NetworkFirst

A network first run-time caching strategy.

Parameter

options

Optional

module:workbox-sw.Strategies.StrategyOptions

To define any additional caching or broadcast plugins pass in option values.

Returns

module:workbox-runtime-caching.NetworkFirst An instance of a NetworkFirst handler.

Example

const workboxSW = new WorkboxSW();
const networkFirstStrategy = workboxSW.strategies.networkFirst();

workboxSW.router.registerRoute('/blog/', networkFirstStrategy);

networkOnly

networkOnly(options) returns module:workbox-runtime-caching.NetworkOnly

A network only run-time caching strategy.

Parameter

options

Optional

module:workbox-sw.Strategies.StrategyOptions

To define any additional caching or broadcast plugins pass in option values.

Returns

module:workbox-runtime-caching.NetworkOnly An instance of a NetworkOnly handler.

Example

const workboxSW = new WorkboxSW();
const networkOnlyStrategy = workboxSW.strategies.networkOnly();

workboxSW.router.registerRoute('/admin/', networkOnlyStrategy);

staleWhileRevalidate

staleWhileRevalidate(options) returns module:workbox-runtime-caching.StaleWhileRevalidate

A stale while revalidate run-time caching strategy.

Parameter

options

Optional

module:workbox-sw.Strategies.StrategyOptions

To define any additional caching or broadcast plugins pass in option values.

Returns

module:workbox-runtime-caching.StaleWhileRevalidate An instance of a StaleWhileRevalidate handler.

Example

const workboxSW = new WorkboxSW();
const staleWhileRevalidateStrategy =
 workboxSW.strategies.staleWhileRevalidate();

workboxSW.router.registerRoute('/styles/*', staleWhileRevalidateStrategy);

Abstract type

StrategyOptions

static

Object

StrategyOptions is just a JavaScript object, but the structure explains the options for runtime strategies used in workbox-sw.

See the example of how this can be used with the cacheFirst() caching strategy.

Properties

Parameter

cacheName

String

Name of cache to use for caching (both lookup and updating).

cacheExpiration

Object

Defining this object will add a cache expiration plugins to this strategy.

broadcastCacheUpdate

Object

Defining this object will add a broadcast cache update plugin.

plugins

Array of plugins

For any additional plugins you wish to add, simply include them in this array.

cacheableResponse

Object

Specifies types of responses to cache by status codes, headers, or both.

Example

const workboxSW = new WorkboxSW();
const cacheFirstStrategy = workboxSW.strategies.cacheFirst({
  cacheName: 'example-cache',
  cacheExpiration: {
    maxEntries: 10,
    maxAgeSeconds: 7 * 24 * 60 * 60
  },
  broadcastCacheUpdate: {
    channelName: 'example-channel-name'
  },
  cacheableResponse: {
    statuses: [0, 200, 404],
    headers: {
      'Example-Header-1': 'Header-Value-1',
      'Example-Header-2': 'Header-Value-2'
    }
  }
  plugins: [
    // Additional Plugins
  ]
});