Project Generation

/**
 * Vue CLI generator function for PWA plugin installation
 * @param {GeneratorAPI} api - Vue CLI generator API for project modification
 */
function pwaGenerator(api: GeneratorAPI): void;

# Adds PWA plugin to existing Vue project
vue add pwa

# The generator function runs automatically and:
# 1. Adds register-service-worker dependency
# 2. Injects service worker import into main entry file
# 3. Renders PWA template files
# 4. Converts files to TypeScript if TypeScript plugin is present

/**
 * Dependencies added by the PWA generator
 */
const pwaDependencies = {
  dependencies: {
    'register-service-worker': '^1.7.2'
  }
};

// Applied via api.extendPackage()
api.extendPackage(pwaDependencies);

/**
 * Injects service worker import into main entry file
 * @param {string} entryFile - Main entry file path (main.js or main.ts)
 */
api.injectImports(api.entryFile, `import './registerServiceWorker'`);

// Results in the following import being added:
// import './registerServiceWorker'

/**
 * Renders template files from generator/template directory
 * Template files include:
 * - src/registerServiceWorker.js
 * - public/img/icons/* (various PWA icons)
 * - public/manifest.json (if not already present)
 */
api.render('./template');

// Template files structure
generator/template/
├── src/
│   └── registerServiceWorker.js    // Service worker registration script
└── public/
    ├── img/icons/
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   ├── android-chrome-maskable-192x192.png
    │   ├── android-chrome-maskable-512x512.png
    │   ├── apple-touch-icon-152x152.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon.svg
    │   ├── msapplication-icon-144x144.png
    │   └── safari-pinned-tab.svg
    └── manifest.json                // PWA manifest file

// src/registerServiceWorker.js template content
import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n' +
        'For more details, visit https://goo.gl/AFskqB'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    }
  });
}

/**
 * TypeScript file conversion during PWA plugin installation
 * Converts generated .js files to .ts when @vue/cli-plugin-typescript is present
 */
if (api.invoking && api.hasPlugin('typescript')) {
  const convertFiles = require('@vue/cli-plugin-typescript/generator/convert');
  convertFiles(api);
}

// Converts:
// src/registerServiceWorker.js → src/registerServiceWorker.ts  
// src/main.js → src/main.ts (if needed)

interface GeneratorAPI {
  /** Extends package.json with additional dependencies and configuration */
  extendPackage(packageChanges: object): void;
  
  /** Injects import statements into specified file */
  injectImports(file: string, imports: string): void;
  
  /** Renders template files from generator template directory */
  render(templatePath: string): void;
  
  /** Main entry file path (e.g., 'src/main.js') */
  entryFile: string;
  
  /** Whether generator is being invoked (vs. during create) */
  invoking: boolean;
  
  /** Checks if specific plugin is present in project */
  hasPlugin(pluginName: string): boolean;
}

/**
 * PWA Plugin Installation Process
 * 1. User runs: vue add pwa
 * 2. Vue CLI downloads @vue/cli-plugin-pwa
 * 3. Runs generator/index.js with project API
 * 4. Generator performs these actions:
 */

// Step 1: Add register-service-worker dependency
api.extendPackage({
  dependencies: {
    'register-service-worker': '^1.7.2'
  }
});

// Step 2: Inject service worker import
api.injectImports(api.entryFile, `import './registerServiceWorker'`);

// Step 3: Copy template files to project
api.render('./template');

// Step 4: Convert to TypeScript if needed
if (api.invoking && api.hasPlugin('typescript')) {
  const convertFiles = require('@vue/cli-plugin-typescript/generator/convert');
  convertFiles(api);
}

// src/main.js (after generator runs)
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'  // <- Added by generator

createApp(App).mount('#app')

// public/manifest.json (template file)
{
  "name": "My PWA App",
  "short_name": "PWA",
  "theme_color": "#4DBA87",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000000"
}

// package.json (after generator runs)
{
  "dependencies": {
    "register-service-worker": "^1.7.2"  // <- Added by generator
  }
}