tessl/npm-vue--cli-plugin-pwa

Vue CLI plugin that adds Progressive Web App capabilities including service workers, manifests, and PWA meta tags

—

Pending

Overview

Eval results

Files

HTML Integration

Name: tessl/npm-vue--cli-plugin-pwa
Author: tessl

Webpack plugin that injects PWA-specific HTML meta tags, icons, and manifest links during the build process. Integrates with html-webpack-plugin to modify generated HTML output.

Capabilities

HtmlPwaPlugin Class

Webpack plugin that handles PWA HTML meta tag injection and manifest generation.

/**
 * Webpack plugin for PWA HTML integration
 * @param {HtmlPwaOptions} options - Configuration options for PWA HTML integration
 */
class HtmlPwaPlugin {
  constructor(options?: HtmlPwaOptions);
  
  /**
   * Apply plugin to webpack compiler
   * @param {Compiler} compiler - Webpack compiler instance
   */
  apply(compiler: Compiler): void;
}

Usage Example:

const HtmlPwaPlugin = require('@vue/cli-plugin-pwa/lib/HtmlPwaPlugin');

// In webpack configuration
module.exports = {
  plugins: [
    new HtmlPwaPlugin({
      name: 'My PWA',
      themeColor: '#4DBA87',
      iconPaths: {
        favicon32: 'assets/icon-32x32.png'
      }
    })
  ]
};

HTML PWA Options

Configuration interface for HTML PWA integration.

interface HtmlPwaOptions {
  /** App name for meta tags (default: 'PWA app') */
  name?: string;
  /** Theme color for PWA (default: '#4DBA87') */
  themeColor?: string;
  /** Microsoft tile color (default: '#000000') */
  msTileColor?: string;
  /** Apple mobile web app capable (default: 'no') */
  appleMobileWebAppCapable?: string;
  /** Apple status bar style (default: 'default') */
  appleMobileWebAppStatusBarStyle?: string;
  /** Version string for asset cache busting (default: '') */
  assetsVersion?: string;
  /** Manifest file path (default: 'manifest.json') */
  manifestPath?: string;
  /** Custom manifest content */
  manifestOptions?: ManifestOptions;
  /** Crossorigin attribute for manifest link */
  manifestCrossorigin?: 'anonymous' | 'use-credentials';
  /** Custom icon file paths */
  iconPaths?: IconPaths;
}

Default Configuration

Default settings applied by the plugin.

const defaults = {
  name: 'PWA app',
  themeColor: '#4DBA87',
  msTileColor: '#000000',
  appleMobileWebAppCapable: 'no',
  appleMobileWebAppStatusBarStyle: 'default',
  assetsVersion: '',
  manifestPath: 'manifest.json',
  manifestOptions: {},
  manifestCrossorigin: undefined
};

const defaultIconPaths = {
  faviconSVG: 'img/icons/favicon.svg',
  favicon32: 'img/icons/favicon-32x32.png',
  favicon16: 'img/icons/favicon-16x16.png',
  appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
  maskIcon: 'img/icons/safari-pinned-tab.svg',
  msTileImage: 'img/icons/msapplication-icon-144x144.png'
};

Icon Paths Configuration

Interface for customizing PWA icon file paths.

interface IconPaths {
  /** SVG favicon path (default: 'img/icons/favicon.svg') */
  faviconSVG?: string;
  /** 32x32 PNG favicon (default: 'img/icons/favicon-32x32.png') */
  favicon32?: string;
  /** 16x16 PNG favicon (default: 'img/icons/favicon-16x16.png') */
  favicon16?: string;
  /** Apple touch icon (default: 'img/icons/apple-touch-icon-152x152.png') */
  appleTouchIcon?: string;
  /** Safari pinned tab icon (default: 'img/icons/safari-pinned-tab.svg') */
  maskIcon?: string;
  /** Microsoft tile image (default: 'img/icons/msapplication-icon-144x144.png') */
  msTileImage?: string;
}

Usage Example:

// Custom icon paths - set to null to exclude specific icons
const customIconPaths = {
  faviconSVG: 'assets/favicon.svg',
  favicon32: 'assets/favicon-32.png',
  favicon16: 'assets/favicon-16.png',
  appleTouchIcon: null, // Exclude Apple touch icon
  maskIcon: 'assets/safari-icon.svg',
  msTileImage: 'assets/ms-tile.png'
};

Generated HTML Tags

The plugin injects various PWA-specific HTML tags:

// Favicon tags
<link rel="icon" type="image/svg+xml" href="/img/icons/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">

// Manifest link
<link rel="manifest" href="/manifest.json">

// Theme color
<meta name="theme-color" content="#4DBA87">

// Apple meta tags
<meta name="apple-mobile-web-app-capable" content="no">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="My PWA App">
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87">

// Microsoft meta tags
<meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">

Manifest Generation

The plugin automatically generates manifest.json when manifestPath is relative.

interface ManifestOptions {
  /** App name (defaults to options.name) */
  name?: string;
  /** Short app name (defaults to options.name) */
  short_name?: string;
  /** App start URL (default: '.') */
  start_url?: string;
  /** Display mode (default: 'standalone') */
  display?: string;
  /** Background color (default: '#000000') */
  background_color?: string;
  /** Theme color (defaults to options.themeColor) */
  theme_color?: string;
  /** App icons array */
  icons?: ManifestIcon[];
}

interface ManifestIcon {
  /** Icon file path */
  src: string;
  /** Icon sizes (e.g., '192x192') */
  sizes: string;
  /** MIME type (e.g., 'image/png') */
  type: string;
  /** Icon purpose (e.g., 'maskable') */
  purpose?: string;
}

Default Manifest Content

const defaultManifest = {
  icons: [
    {
      src: './img/icons/android-chrome-192x192.png',
      sizes: '192x192',
      type: 'image/png'
    },
    {
      src: './img/icons/android-chrome-512x512.png',
      sizes: '512x512',
      type: 'image/png'
    },
    {
      src: './img/icons/android-chrome-maskable-192x192.png',
      sizes: '192x192',
      type: 'image/png',
      purpose: 'maskable'
    },
    {
      src: './img/icons/android-chrome-maskable-512x512.png',
      sizes: '512x512',
      type: 'image/png',
      purpose: 'maskable'
    }
  ],
  start_url: '.',
  display: 'standalone',
  background_color: '#000000'
};

Usage Example:

// Custom manifest configuration
const manifestOptions = {
  name: 'My Progressive Web App',
  short_name: 'MyPWA',
  description: 'A sample PWA built with Vue CLI',
  start_url: '/',
  display: 'standalone',
  orientation: 'portrait',
  background_color: '#ffffff',
  theme_color: '#4DBA87',
  icons: [
    {
      src: './img/custom-icon-192.png',
      sizes: '192x192',
      type: 'image/png'
    }
  ]
};

Install with Tessl CLI

npx tessl i tessl/npm-vue--cli-plugin-pwa

docs

html-integration.md

index.md

plugin-configuration.md

project-generation.md

service-worker.md

tile.json

tessl/npm-vue--cli-plugin-pwa