Manifest Injection

/**
 * Creates an instance of InjectManifest plugin
 * @param config - Configuration options for manifest injection
 */
class InjectManifest {
  constructor(config: WebpackInjectManifestOptions);
  
  /**
   * Webpack plugin interface method - called by webpack during compilation
   * @param compiler - Webpack compiler instance
   */
  apply(compiler: webpack.Compiler): void;
}

import { InjectManifest } from "workbox-webpack-plugin";

// Basic configuration
new InjectManifest({
  swSrc: './src/service-worker.js',
  swDest: 'sw.js',
});

// Advanced configuration with compilation options
new InjectManifest({
  swSrc: './src/sw.ts', // TypeScript source
  swDest: 'service-worker.js',
  compileSrc: true,
  exclude: [/\.map$/, /manifest$/],
  maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
  webpackCompilationPlugins: [
    // Additional webpack plugins for service worker compilation
  ],
});

// src/service-worker.js
import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

// This will be replaced with the actual precache manifest
precacheAndRoute(self.__WB_MANIFEST);

// Optional: clean up outdated caches
cleanupOutdatedCaches();

// Add custom caching logic
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [{
      cacheKeyWillBeUsed: async ({ request }) => {
        return `${request.url}?version=1`;
      },
    }],
  })
);

// Custom event listeners
self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

interface WebpackInjectManifestOptions {
  /** Additional entries to include in the precache manifest */
  additionalManifestEntries?: Array<ManifestEntry | string>;
  
  /** Whether to compile the service worker source through webpack */
  compileSrc?: boolean;
  
  /** Files to exclude from precaching */
  exclude?: Array<RegExp | string | ((asset: {name: string}) => boolean)>;
  
  /** Webpack chunks to exclude from precaching */
  excludeChunks?: Array<string>;
  
  /** URL parameters to ignore when matching precached URLs */
  ignoreURLParametersMatching?: Array<RegExp>;
  
  /** String to replace with the precache manifest (defaults to 'self.__WB_MANIFEST') */
  injectionPoint?: string;
  
  /** Functions to transform the precache manifest */
  manifestTransforms?: Array<ManifestTransform>;
  
  /** Maximum file size (in bytes) to include in precache */
  maximumFileSizeToCacheInBytes?: number;
  
  /** Build mode - affects optimization and debugging */
  mode?: 'development' | 'production';
  
  /** Output filename for the compiled service worker */
  swDest?: string;
  
  /** Path to the source service worker file */
  swSrc: string;
  
  /** Additional webpack plugins to apply during service worker compilation */
  webpackCompilationPlugins?: Array<any>;
}

new InjectManifest({
  swSrc: './src/sw.js',
  injectionPoint: 'MY_CUSTOM_MANIFEST',
});

// src/sw.js
import { precacheAndRoute } from 'workbox-precaching';

// Use custom injection point
precacheAndRoute(MY_CUSTOM_MANIFEST);

new InjectManifest({
  swSrc: './src/service-worker.ts',
  swDest: 'sw.js',
  compileSrc: true, // Enable TypeScript compilation
  webpackCompilationPlugins: [
    // Add any additional plugins needed for TS compilation
  ],
});

// src/service-worker.ts
import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';

declare const self: ServiceWorkerGlobalScope;

// Precache and route static assets
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

// Handle navigation requests
const navigationRoute = new NavigationRoute(
  new NetworkFirst({
    cacheName: 'navigations',
  })
);
registerRoute(navigationRoute);

// Type-safe event handling
self.addEventListener('message', (event: ExtendableMessageEvent) => {
  if (event.data?.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

interface ManifestTransform {
  (originalManifest: Array<ManifestEntry>, compilation?: webpack.Compilation): Promise<{
    manifest: Array<ManifestEntry>;
    warnings?: Array<string>;
  }> | {
    manifest: Array<ManifestEntry>;
    warnings?: Array<string>;
  };
}

interface ManifestEntry {
  url: string;
  revision: string | null;
}

const customTransform = (originalManifest, compilation) => {
  // Add cache busting parameter to all URLs
  const manifest = originalManifest.map(entry => ({
    ...entry,
    url: `${entry.url}?v=${Date.now()}`,
  }));
  
  return { manifest };
};

new InjectManifest({
  swSrc: './src/sw.js',
  manifestTransforms: [customTransform],
});