RuntimeCaching.strategyOptions.cacheExpiration is deprecated in Workbox v3

[Yihao-G]

Workbox has deprecated the use of cacheExpiration as a parameter of the strategies classes in workbox-strategies module. The constructor style Plugins are suggested. As described on this page:

The syntax for specifying plugins when configuring a strategy has changed. Each plugin needs to be explicitly listed in the plugins property of the strategy's configuration.

In our sw.js template, we are still using the old-style way to set up plugins using JSON.stringify to serialise the entire strategyOptions (not sure whether this is still working in v5). Also because of the use of JSON.stringify, incorporating the new way is not possible in the Nuxt config file.

Furthermore, the TypeScript declaration also contains the old cacheExpiration field.

The documentation also contains the old way to set up plugins for Workbox Strategies.

[pi0]

Hi @Yihao-G. Do you mind making a PR for updating?

[Yihao-G]

@pi0 I'm happy to make a PR but how would we implement it?

Currently I have this type declaration:

import { Plugin as BackgroundSyncPlugin } from 'workbox-background-sync'
import { Plugin as BroadcastUpdatePlugin } from 'workbox-broadcast-update'
import { Plugin as CacheableResponsePlugin } from 'workbox-cacheable-response'
import { Plugin as ExpirationPlugin } from 'workbox-expiration'
import { Plugin as RangeRequestsPlugin } from 'workbox-range-requests'
import { WorkboxPlugin } from 'workbox-core'

export type RuntimeCaching = {
  urlPattern: string,
  handler?: CachingStrategy,
  methods?: HTTPMethod,
  strategyOptions?: {
    cacheName: string,
    plugins?: StrategyPlugin[]
  }
}

export type StrategyPlugin = BackgroundSync
  | BroadcastUpdate
  | CacheableResponse
  | Expiration
  | RangeRequests
  | WorkboxPlugin

export interface BackgroundSync {
  use: 'BackgroundSync',
  config: ConstructorParameters<typeof BackgroundSyncPlugin>
}

export interface BroadcastUpdate {
  use: 'BroadcastUpdate',
  config: ConstructorParameters<typeof BroadcastUpdatePlugin>
}

export interface CacheableResponse {
  use: 'CacheableResponse',
  config: ConstructorParameters<typeof CacheableResponsePlugin>
}

export interface Expiration {
  use: 'Expiration',
  config: ConstructorParameters<typeof ExpirationPlugin>
}

export interface RangeRequests {
  use: 'RangeRequests',
  config: ConstructorParameters<typeof RangeRequestsPlugin>
}

By doing so, users don't need to import these plugins, and the sw.js template will generate code using new workbox.module-name.SomePlugin(...config). However, at the same time, this approach is limited, because there are some built-in plugins with methods that could be helpful, such as CacheableResponse#isResponseCacheable and ExpirationPlugin#deleteCacheAndMetadata. Of course, letting the user directly pass in an object that is built using the new keyword on their side would be the most flexible option, but that means they need to import { SomePlugin } from 'workbox-some-module' in their Nuxt config, and that won't work in the generated sw.js.

Am I worried too much? The current config implementation doesn't allow users to access plugin methods anyway...

What do you think?