tessl/npm-vuepress--plugin-pwa

Progressive Web App plugin for VuePress that adds service worker support and offline functionality

—

Pending

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-vuepress--plugin-pwa
Author: tessl

Core plugin configuration functionality for adding PWA capabilities to VuePress sites with service worker generation, offline caching, and update notifications.

Capabilities

PWA Plugin Function

Main plugin factory function that configures VuePress with PWA functionality.

/**
 * VuePress PWA Plugin
 * @param {PluginConfig4PWA} options - Plugin configuration options (default: {})
 * @param {VuePressContext} context - VuePress build context
 * @returns {VuePressPlugin} VuePress plugin object with PWA enhancements
 */
function pwaPlugin(options = {}, context): VuePressPlugin;

interface PluginConfig4PWA {
  /** Enable/disable service worker generation (default: true) */
  serviceWorker?: boolean;
  /** Enable update popup notifications (default: false) */
  updatePopup?: boolean | UpdatePopupConfig;
  /** Name of popup component to use (default: 'SWUpdatePopup') */
  popupComponent?: string;
  /** Configuration passed to workbox-build for service worker generation */
  generateSWConfig?: WorkboxConfig;
}

interface VuePressPlugin {
  /** Module aliases for internal components */
  alias: Record<string, string>;
  /** Function to define global constants */
  define: () => Record<string, any>;
  /** Global UI components to register */
  globalUIComponents?: string;
  /** Path to client-side app enhancement file */
  enhanceAppFiles: string;
  /** Hook called after site generation to create service worker */
  generated: () => Promise<void>;
}

Usage Examples:

// .vuepress/config.js - Basic configuration with default popup
module.exports = {
  plugins: [
    ['@vuepress/pwa', {
      serviceWorker: true,
      updatePopup: true  // Uses default messages
    }]
  ]
}

// .vuepress/config.js - Custom popup messages
module.exports = {
  plugins: [
    ['@vuepress/pwa', {
      serviceWorker: true,
      updatePopup: {
        message: "New content is available.",
        buttonText: "Refresh"
      }
    }]
  ]
}

// Advanced configuration with custom options
module.exports = {
  plugins: [
    ['@vuepress/pwa', {
      serviceWorker: true,
      updatePopup: {
        message: "New content is available.",
        buttonText: "Refresh",
        '/zh/': {
          message: '发现新内容可用',
          buttonText: '刷新'
        }
      },
      popupComponent: 'CustomSWUpdatePopup',
      generateSWConfig: {
        globPatterns: [
          '**/*.{js,css,html,png,jpg,jpeg,gif,svg,woff,woff2,eot,ttf,otf}'
        ],
        runtimeCaching: [{
          urlPattern: /^https:\/\/fonts\.googleapis\.com\//,
          handler: 'StaleWhileRevalidate'
        }]
      }
    }]
  ]
}

Update Popup Configuration

Configuration options for service worker update notifications. Can be a boolean to enable/disable with defaults, or an object for custom configuration.

interface UpdatePopupConfig {
  /** Default update notification message (default: 'New content is available.') */
  message?: string;
  /** Default refresh button text (default: 'Refresh') */
  buttonText?: string;
  /** Localized messages for different routes */
  [locale: string]: {
    message: string;
    buttonText: string;
  };
}

Supported locales with default messages:

/ (English): "New content is available." / "Refresh"
/zh/ (Chinese): "发现新内容可用" / "刷新"
/ru/ (Russian): "Доступен новый контент." / "Обновить"
/uk/ (Ukrainian): "Доступний новий контент." / "Оновити"
/ja/ (Japanese): "新しいコンテンツがあります。" / "更新する"
/es/ (Spanish): "Hay nuevo contenido disponible." / "Actualizar"

Workbox Configuration

Configuration passed to workbox-build for service worker generation.

interface WorkboxConfig {
  /** Destination path for generated service worker (auto-generated to outDir/service-worker.js) */
  swDest?: string;
  /** Directory to search for files to cache (defaults to VuePress outDir) */
  globDirectory?: string;
  /** Patterns matching files to cache (default: ['**/*.{js,css,html,png,jpg,jpeg,gif,svg,woff,woff2,eot,ttf,otf}']) */
  globPatterns?: string[];
  /** Maximum file size to include in precache (in bytes) */
  maximumFileSizeToCacheInBytes?: number;
  /** Runtime caching configuration for dynamic content */
  runtimeCaching?: RuntimeCachingEntry[];
  /** Skip waiting for service worker activation */
  skipWaiting?: boolean;
  /** Take control of clients immediately */
  clientsClaim?: boolean;
  /** Additional workbox-build configuration options */
  [key: string]: any;
}

interface RuntimeCachingEntry {
  /** URL pattern to match for caching */
  urlPattern: RegExp | string;
  /** Caching strategy to use */
  handler: 'CacheFirst' | 'NetworkFirst' | 'NetworkOnly' | 'CacheOnly' | 'StaleWhileRevalidate';
  /** Cache configuration options */
  options?: {
    cacheName?: string;
    expiration?: {
      maxEntries?: number;
      maxAgeSeconds?: number;
    };
  };
}

Default caching patterns:

**/*.{js,css,html,png,jpg,jpeg,gif,svg,woff,woff2,eot,ttf,otf}

Global Constants

Constants defined at build time and available in client code.

interface GlobalConstants {
  /** Base URL for service worker registration (defaults to context.base || '/') */
  SW_BASE_URL: string;
  /** Boolean indicating if service worker is enabled (derived from !!serviceWorker) */
  SW_ENABLED: boolean;
  /** Update popup configuration (from plugin options) */
  SW_UPDATE_POPUP: boolean | UpdatePopupConfig;
  /** Name of popup component (from plugin options) */
  SW_POPUP_COMPONENT: string;
}

These constants are automatically injected and available in client-side code without imports.

Types

interface VuePressContext {
  /** Build output directory */
  outDir: string;
  /** Site base URL (default: '/') */
  base?: string;
}

Install with Tessl CLI

npx tessl i tessl/npm-vuepress--plugin-pwa

docs

index.md

plugin-configuration.md

service-worker-events.md

update-notifications.md

tile.json

tessl/npm-vuepress--plugin-pwa