Workbox Cacheable Response

import { CacheableResponse, CacheableResponsePlugin, CacheableResponseOptions } from "workbox-cacheable-response";

const { CacheableResponse, CacheableResponsePlugin } = require("workbox-cacheable-response");

import { CacheableResponse, CacheableResponsePlugin, CacheableResponseOptions } from "workbox-cacheable-response";

// Direct usage for response evaluation
const cacheableResponse = new CacheableResponse({
  statuses: [0, 200],
  headers: { 'X-Is-Cacheable': 'true' }
});

// Check if a response is cacheable
const response = await fetch('/api/data');
const isCacheable = cacheableResponse.isResponseCacheable(response);

// Plugin usage with Workbox strategies
const plugin = new CacheableResponsePlugin({
  statuses: [0, 200, 404]
});

/**
 * Core class that allows setting up rules determining what status codes 
 * and/or headers need to be present for a Response to be considered cacheable
 */
class CacheableResponse {
  /**
   * Creates a new CacheableResponse instance. At least one of statuses or headers must be provided.
   * @param config - Configuration options for cacheability rules (defaults to empty object)
   * @throws WorkboxError when neither statuses nor headers are provided
   */
  constructor(config: CacheableResponseOptions = {});
  
  /**
   * Checks a response to see whether it's cacheable based on configuration
   * @param response - The response whose cacheability is being checked
   * @returns true if the Response is cacheable, false otherwise
   */
  isResponseCacheable(response: Response): boolean;
}

/**
 * A class implementing the cacheWillUpdate lifecycle callback for integration 
 * with Workbox's built-in strategies
 */
class CacheableResponsePlugin implements WorkboxPlugin {
  /**
   * Creates a new CacheableResponsePlugin instance
   * @param config - Configuration options for cacheability rules
   */
  constructor(config: CacheableResponseOptions);
  
  /**
   * Workbox lifecycle callback that determines if a response should be cached
   * @param options - Object containing the response to evaluate
   * @param options.request - The request object
   * @param options.response - The response object to evaluate
   * @param options.event - The ExtendableEvent associated with the request
   * @param options.state - Plugin state object
   * @returns Promise resolving to the response if cacheable, null otherwise
   */
  cacheWillUpdate(options: {
    request: Request;
    response: Response;
    event: ExtendableEvent;
    state?: PluginState;
  }): Promise<Response | null>;
}

/**
 * Configuration options for both CacheableResponse and CacheableResponsePlugin.
 * At least one of statuses or headers must be provided.
 */
interface CacheableResponseOptions {
  /** 
   * One or more status codes that a Response can have and be considered cacheable
   * @example [0, 200, 404]
   */
  statuses?: number[];
  
  /** 
   * A mapping of header names and expected values that a Response can have 
   * and be considered cacheable. If multiple headers are provided, only one needs to be present
   * @example { 'X-Is-Cacheable': 'true', 'Cache-Control': 'public' }
   */
  headers?: {[headerName: string]: string};
}

/**
 * Type representing plugin state object for Workbox plugins
 */
type PluginState = {[key: string]: any};

/**
 * Workbox plugin interface with lifecycle callbacks
 */
interface WorkboxPlugin {
  cacheWillUpdate?: (options: {
    request: Request;
    response: Response;
    event: ExtendableEvent;
    state?: PluginState;
  }) => Promise<Response | void | null | undefined>;
}

import { CacheableResponse, CacheableResponseOptions } from "workbox-cacheable-response";

// Create instance with status code rules
const config: CacheableResponseOptions = {
  statuses: [0, 200]
};
const cacheableResponse = new CacheableResponse(config);

// Evaluate a response
const response = await fetch('/api/users');
if (cacheableResponse.isResponseCacheable(response)) {
  // Cache the response
  await cache.put(request, response);
}

import { CacheableResponse } from "workbox-cacheable-response";

// Create instance with header rules
const cacheableResponse = new CacheableResponse({
  headers: { 'X-Is-Cacheable': 'true' }
});

const response = await fetch('/api/dynamic-content');
if (cacheableResponse.isResponseCacheable(response)) {
  // Only cache responses with the specific header
  await cache.put(request, response);
}

import { CacheableResponse } from "workbox-cacheable-response";

// Both status and header conditions must be met
const cacheableResponse = new CacheableResponse({
  statuses: [200, 404],
  headers: { 'Content-Type': 'application/json' }
});

import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

// Use with Workbox caching strategy
registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200]
      })
    ]
  })
);