tessl/npm-nuxtjs--pwa

Zero config PWA solution for Nuxt.js applications with service worker management, manifest generation, and meta tag optimization

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Icon Generation

Name: tessl/npm-nuxtjs--pwa
Author: tessl

Automatic icon generation and resizing functionality that creates multiple icon sizes from a source image for various device requirements and iOS splash screens.

Capabilities

Icon Generation Function

Handles the complete icon generation pipeline from source image to generated assets.

/**
 * Main icon generation function
 * @param nuxt - Nuxt instance
 * @param pwa - PWA context containing configuration
 * @param moduleContainer - Nuxt module container for plugins
 */
async function icon(nuxt: any, pwa: PWAContext, moduleContainer: any): Promise<void>;

interface IconOptions {
  /** Path to source icon image */
  source: string;
  /** Default filename to search for icon */
  fileName: string;
  /** Array of sizes to generate (square icons) */
  sizes: number[];
  /** iOS splash screen sizes with device types */
  iosSizes: iOSSize[];
  /** Directory for generated icons */
  targetDir: string;
  /** Enable runtime icon plugin */
  plugin: boolean;
  /** Name of the injected icon plugin */
  pluginName: string;
  /** Icon purpose for manifest (any, maskable, badge) */
  purpose: string[] | string;
  /** Cache directory for processed icons */
  cacheDir: string;
  /** Public path for icon URLs */
  publicPath: string;
}

type iOSSize = [number, number, iOSType];
type iOSType = 'ipad' | 'ipadpro9' | 'ipadpro10' | 'ipadpro12' | 'iphonese' | 'iphone6' | 'iphoneplus' | 'iphonex' | 'iphonexr' | 'iphonexsmax';

Usage Example:

// nuxt.config.ts
export default {
  pwa: {
    icon: {
      source: 'static/app-icon.png',
      sizes: [64, 120, 144, 152, 192, 384, 512],
      purpose: ['any', 'maskable'],
      targetDir: 'icons'
    }
  }
}

Icon Discovery

Automatically locates source icon files from multiple potential locations.

/**
 * Find icon source file from various locations
 * @param nuxt - Nuxt instance
 * @param options - Icon options containing potential sources
 * @returns Path to found icon or undefined
 */
function findIcon(nuxt: any, options: IconOptions): Promise<string | undefined>;

The function searches in this order:

Explicitly configured source path
[srcDir]/[staticDir]/[fileName] (e.g., static/icon.png)
[srcDir]/[assetsDir]/[fileName] (e.g., assets/icon.png)

Icon Generation Process

Generates multiple icon sizes using image processing.

/**
 * Generate all required icon sizes from source
 * @param nuxt - Nuxt instance  
 * @param options - Icon options with sizes and configuration
 */
function generateIcons(nuxt: any, options: IconOptions): Promise<void>;

The process:

Calculates hash of source image for cache invalidation
Creates icon assets for each specified size
Generates iOS splash screens for different device types
Updates manifest with generated icon references

Runtime Icon Plugin

Provides runtime access to generated icons through Vue plugin injection.

/**
 * Add Vue plugin for runtime icon access
 * @param nuxt - Nuxt instance
 * @param options - Icon options with generated assets
 * @param moduleContainer - Nuxt module container for plugin registration
 */
function addPlugin(nuxt: any, options: IconOptions, moduleContainer: any): void;

/**
 * Icon plugin injected into Vue context
 * @param size - Icon size as string (e.g., '192x192')
 * @returns URL to the generated icon of specified size
 */
interface IconPlugin {
  (size: string): string;
}

Usage Example:

// In Vue components
export default {
  mounted() {
    // Access generated icons
    const icon192 = this.$icon('192x192');
    const icon512 = this.$icon('512x512');
    
    console.log('Large icon URL:', icon512);
  }
}

Icon Processing

Background icon resizing using optimized image processing.

/**
 * Resize source icon to multiple target sizes
 * @param nuxt - Nuxt instance
 * @param options - Icon options with size specifications
 */
function resizeIcons(nuxt: any, options: IconOptions): Promise<void>;

Features:

Uses jimp-compact for efficient image processing
Maintains aspect ratio with contain strategy
Processes in background using child processes
Implements caching to avoid redundant processing
Generates integrity files for cache validation

Manifest Integration

Automatically integrates generated icons into the web app manifest.

/**
 * Add generated icons to PWA manifest
 * @param nuxt - Nuxt instance
 * @param options - Icon options with generated assets
 * @param pwa - PWA context for manifest updates
 */
function addManifest(nuxt: any, options: IconOptions, pwa: PWAContext): void;

Creates manifest icon entries:

{
  "icons": [
    {
      "src": "/icons/icon_64x64.abc123.png",
      "sizes": "64x64",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

iOS Splash Screen Support

Generates splash screens for iOS devices with proper media queries.

Default iOS sizes include:

iPad (1536x2048)
iPad Pro 9.7" (1536x2048)
iPad Pro 10.5" (1668x2224)
iPad Pro 12.9" (2048x2732)
iPhone SE (640x1136)
iPhone 6/7/8 (750x1334)
iPhone Plus (1080x1920)
iPhone X (1125x2436)
iPhone XR (828x1792)
iPhone XS Max (1242x2688)

Note: The source code contains a typo with an incorrect iPhone 6 width (50 instead of 750), which should be corrected in implementation.

Asset Emission

Manages webpack asset emission for generated icons.

/**
 * Emit generated icons as webpack assets
 * @param nuxt - Nuxt instance
 * @param options - Icon options with asset specifications
 */
function emitAssets(nuxt: any, options: IconOptions): void;

Handles: