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

Manifest Generation

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

Web app manifest generation with customizable PWA metadata and configuration options for creating standards-compliant manifest files.

Capabilities

Manifest Generation Function

Creates and emits web app manifest files with proper PWA metadata.

/**
 * Generate web app manifest file
 * @param nuxt - Nuxt instance
 * @param pwa - PWA context containing manifest configuration
 */
function manifest(nuxt: any, pwa: PWAContext): void;

interface ManifestOptions {
  /** Application name */
  name: string;
  /** Short application name for limited space */
  short_name: string;
  /** Application description */
  description: string;
  /** Array of icon objects */
  icons: Record<string, any>[];
  /** URL to load when app is launched */
  start_url: string;
  /** Display mode (standalone, fullscreen, minimal-ui, browser) */
  display: string;
  /** Background color for splash screen */
  background_color: string;
  /** Theme color for browser UI */
  theme_color: string;
  /** Text direction (ltr or rtl) */
  dir: 'ltr' | 'rtl';
  /** Primary language */
  lang: string;
  /** Use .webmanifest extension instead of .json */
  useWebmanifestExtension: boolean;
  /** Public path for manifest URL */
  publicPath: string;
  /** Filename pattern for generated manifest */
  fileName: string;
  /** CORS setting for manifest file */
  crossorigin: boolean;
}

Usage Example:

// nuxt.config.ts
export default {
  pwa: {
    manifest: {
      name: 'My Progressive Web App',
      short_name: 'My PWA',
      description: 'A modern web application',
      start_url: '/?standalone=true',
      display: 'standalone',
      background_color: '#ffffff',
      theme_color: '#2196f3',
      lang: 'en',
      useWebmanifestExtension: false
    }
  }
}

Manifest Generation Process

The manifest generation follows these steps:

Option Merging: Combines defaults with user configuration
Icon Integration: Includes icons generated by the icon module
File Generation: Creates manifest JSON with proper formatting
Asset Emission: Emits manifest as webpack asset
Meta Integration: Provides manifest meta tag for HTML head

Default Configuration

The module provides sensible defaults for all manifest options:

const defaults: ManifestOptions = {
  name: process.env.npm_package_name,
  short_name: process.env.npm_package_name,
  description: process.env.npm_package_description,
  publicPath: /* derived from Nuxt config */,
  icons: [],
  start_url: /* routerBase + '?standalone=true' */,
  display: 'standalone',
  background_color: '#ffffff',
  theme_color: /* inherited from meta.theme_color */,
  lang: 'en',
  useWebmanifestExtension: false,
  fileName: 'manifest.[hash].[ext]',
  dir: undefined,
  crossorigin: undefined
};

Manifest File Naming

Dynamic filename generation with content hashing for cache busting.

/**
 * Generate manifest filename with hash and extension
 * @param options - Manifest options
 * @param manifestContent - Serialized manifest content for hashing
 * @returns Generated filename
 */
function generateManifestFileName(
  options: ManifestOptions, 
  manifestContent: string
): string;

Filename pattern supports:

[hash] - Content hash for cache invalidation
[ext] - File extension (json or webmanifest)

Example: manifest.abc12345.json

Icon Integration

Automatically integrates icons generated by the icon module.

The manifest receives icon data from the icon generation process:

{
  "icons": [
    {
      "src": "/icons/icon_192x192.abc123.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon_512x512.abc123.png", 
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Start URL Configuration

Configures the app start URL with optional query parameters.

/**
 * Default start URL generation
 * @param routerBase - Nuxt router base path
 * @returns Start URL with standalone parameter
 */
function generateStartUrl(routerBase: string): string;
// Returns: routerBase + '?standalone=true'

The ?standalone=true parameter helps detect PWA installations:

// In your app
const isStandalone = new URLSearchParams(location.search).has('standalone');

Display Modes

Supports all standard web app manifest display modes:

standalone - Looks like a native app (default)
fullscreen - Full screen without browser UI
minimal-ui - Minimal browser UI
browser - Regular browser tab

Theme Integration

Automatically inherits theme color from meta module configuration:

// Automatic theme color inheritance
const options: ManifestOptions = {
  theme_color: pwa.meta.theme_color, // Inherited from meta config
  // ... other options
};

CORS Support

Optional CORS configuration for manifest files:

// nuxt.config.ts
export default {
  pwa: {
    manifest: {
      crossorigin: 'use-credentials' // or 'anonymous'
    }
  }
}

Manifest Meta Tag

Automatically generates the manifest link tag for HTML head:

<link rel="manifest" href="/manifest.abc12345.json" hid="manifest">

With CORS support:

<link rel="manifest" href="/manifest.abc12345.json" crossorigin="use-credentials" hid="manifest">

Asset Emission

Integrates with Nuxt.js webpack build process for proper asset handling:

/**
 * Emit manifest as webpack asset
 * @param nuxt - Nuxt instance
 * @param fileName - Generated manifest filename
 * @param manifestSource - Serialized manifest content
 */
function emitAsset(nuxt: any, fileName: string, manifestSource: string): void;

The manifest is emitted to the appropriate build directory and becomes available at the configured public path.

Install with Tessl CLI