Plugin Configuration

/**
 * Main Vue CLI plugin function that configures PWA capabilities
 * @param {Object} api - Vue CLI plugin API providing webpack and dev server configuration
 * @param {Object} options - Plugin configuration options containing pwa settings
 */
function vuePwaPlugin(api, options);

// This function is automatically called by Vue CLI when the plugin is registered
// Configuration is provided through vue.config.js
module.exports = {
  pwa: {
    name: 'My PWA App',
    themeColor: '#4DBA87',
    workboxPluginMode: 'GenerateSW'
  }
}

interface PWAOptions {
  /** Service worker generation mode: 'GenerateSW' (default) or 'InjectManifest' */
  workboxPluginMode?: 'GenerateSW' | 'InjectManifest';
  /** Options passed directly to Workbox webpack plugin */
  workboxOptions?: WorkboxOptions;
  /** App name used in meta tags and manifest (defaults to package.json name) */
  name?: string;
  /** Theme color for PWA (default: '#4DBA87') */
  themeColor?: string;
  /** Microsoft tile color (default: '#000000') */
  msTileColor?: string;
  /** Apple mobile web app capable setting (default: 'no') */
  appleMobileWebAppCapable?: string;
  /** Apple status bar style (default: 'default') */
  appleMobileWebAppStatusBarStyle?: string;
  /** Version string appended to asset URLs for cache busting (default: '') */
  assetsVersion?: string;
  /** Path to manifest file (default: 'manifest.json') */
  manifestPath?: string;
  /** Custom manifest.json content (default: {}) */
  manifestOptions?: ManifestOptions;
  /** Crossorigin attribute for manifest link (default: undefined) */
  manifestCrossorigin?: 'anonymous' | 'use-credentials';
  /** Custom paths for PWA icon files */
  iconPaths?: IconPaths;
}

interface WorkboxOptions {
  /** Regex patterns for files to exclude from precaching */
  exclude?: RegExp[];
  /** Cache identifier for service worker (defaults to app name) */
  cacheId?: string;
  /** Path to existing service worker for InjectManifest mode */
  swSrc?: string;
  /** Whether service worker should skip waiting */
  skipWaiting?: boolean;
  /** Whether service worker should claim clients immediately */
  clientsClaim?: boolean;
  /** Additional Workbox plugin options */
  [key: string]: any;
}

const defaultWorkboxOptions = {
  exclude: [
    /\.map$/,
    /img\/icons\//,
    /favicon\.ico$/,
    /^manifest.*\.js?$/
  ]
};

const defaultGenerateSWOptions = {
  cacheId: 'app-name' // Uses actual app name from package.json
};

// vue.config.js
module.exports = {
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'src/service-worker.js',
      exclude: [/\.map$/, /manifest$/, /\.htaccess$/],
      skipWaiting: true,
      clientsClaim: true,
      runtimeCaching: [{
        urlPattern: /^https:\/\/api\.example\.com\//,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache',
          networkTimeoutSeconds: 3
        }
      }]
    }
  }
}

/**
 * Webpack chain configuration applied by the plugin
 * @param {ChainableConfig} webpackConfig - Webpack chain configuration
 */
api.chainWebpack(webpackConfig => {
  // Adds HtmlPwaPlugin after html-webpack-plugin
  webpackConfig
    .plugin('pwa')
    .use(HtmlPwaPlugin, [userOptions])
    .after('html');

  // In production, adds Workbox plugin
  if (process.env.NODE_ENV === 'production') {
    webpackConfig
      .plugin('workbox')
      .use(WorkboxPlugin, [workboxConfig]);
  }
});

/**
 * Development server configuration applied by the plugin
 * @param {Express} app - Express application instance
 */
api.configureDevServer(app => {
  app.use(createNoopServiceWorkerMiddleware());
});

// Webpack chain configuration type
interface ChainableConfig {
  plugin(name: string): {
    use(plugin: any, options?: any[]): {
      after(name: string): ChainableConfig;
    };
  };
}