### Basic Setup Example

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/SvelteKitPWA.md

Demonstrates the minimal configuration required to enable PWA support in a SvelteKit project using SvelteKitPWA.

```typescript
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA()
  ]
}
```

--------------------------------

### Start Svelte Development Server

Source: https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts/README.md

Run this command to start the development server after installing dependencies. The `-- --open` flag will automatically open the application in your default browser.

```bash
npm run dev
```

```bash
npm run dev -- --open
```

--------------------------------

### Basic SvelteKitPWA Setup

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/SvelteKitPWA.md

Use this basic setup to integrate SvelteKitPWA with default configurations into your Vite project. Ensure you have @sveltejs/kit and @vite-pwa/sveltekit installed.

```typescript
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA()
  ]
}
```

--------------------------------

### Start SvelteKit Development Server

Source: https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts-assets-generator/README.md

Run `npm run dev` to start the development server. Use the `-- --open` flag to automatically open the application in your browser.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Basic KitOptions Configuration Example

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/types.md

Demonstrates a basic configuration for KitOptions, setting essential paths like assets, outDir, and appDir.

```typescript
const config = {
  kit: {
    assets: 'static',
    outDir: '.svelte-kit',
    appDir: '_app'
  }
}
```

--------------------------------

### SvelteKit PWA Configuration Example

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/configureSkelteKitOptions.md

This example demonstrates how to integrate SvelteKitPWA into your Vite configuration. It shows the typical placement of the plugin and common options for SvelteKit integration, including asset handling and Workbox strategies.

```typescript
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';

export default defineConfig({
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      kit: {
        assets: 'static',
        outDir: '.svelte-kit',
        appDir: '_app',
        includeVersionFile: true,
      },
      strategies: 'generateSW',
      workbox: {
        globPatterns: ['client/**/*.{js,css,ico,png,svg,webp}']
      }
    })
  ]
});

```

--------------------------------

### Custom Configuration Example

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/SvelteKitPWA.md

Illustrates how to provide custom options to SvelteKitPWA, including strategies, manifest details, SvelteKit-specific settings, and Workbox configurations.

```typescript
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      strategies: 'injectManifest',
      filename: 'my-sw.ts',
      manifest: {
        name: 'My App',
        short_name: 'App',
        display: 'standalone',
        start_url: '/',
      },
      kit: {
        includeVersionFile: true,
        appDir: '_app',
        outDir: '.svelte-kit',
      },
      workbox: {
        globPatterns: ['client/**/*.{js,css,ico,png,svg,webp}'],
        navigateFallback: '/',
      }
    })
  ]
}
```

--------------------------------

### Basic SvelteKitPWA Setup

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/README.md

This snippet shows the most basic configuration for the SvelteKitPWA plugin, primarily setting up the web app manifest name.

```typescript
SvelteKitPWA({
  manifest: { name: 'My App' }
})
```

--------------------------------

### Basic Vite PWA SvelteKit Setup

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/00_START_HERE.txt

Integrate the SvelteKitPWA plugin into your Vite configuration file for basic PWA functionality. This setup includes a minimal manifest configuration.

```javascript
import { sveltekit } from '@sveltejs/kit/vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      manifest: { name: 'My App' }
    })
  ]
}
```

--------------------------------

### Install @vite-pwa/sveltekit

Source: https://github.com/vite-pwa/sveltekit/blob/main/README.md

Install the @vite-pwa/sveltekit package as a development dependency using npm, yarn, or pnpm.

```bash
npm i @vite-pwa/sveltekit -D

# yarn
yarn add @vite-pwa/sveltekit -D

# pnpm
pnpm add @vite-pwa/sveltekit -D
```

--------------------------------

### SvelteKitPWA Configuration for generateSW Strategy

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/BUILD_LIFECYCLE.md

Example configuration for SkelteKitPWA using the 'generateSW' strategy. This setup specifies glob patterns for client assets and defines runtime caching rules.

```typescript
SkelteKitPWA({
  strategies: 'generateSW',
  workbox: {
    globPatterns: ['client/**/*.{js,css,...}'],
    runtimeCaching: [/* ... */]
  }
})
```

--------------------------------

### Install Playwright Chromium browser

Source: https://github.com/vite-pwa/sveltekit/blob/main/CONTRIBUTING.md

Before running tests, install the Playwright Chromium browser using pnpm.

```shell
pnpm playwright install chromium
```

--------------------------------

### Complete Vite PWA Configuration for SvelteKit

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

This snippet shows a full configuration for Vite PWA in SvelteKit, including SvelteKit-specific options and PWA manifest details. Use this as a starting point for your project's PWA setup.

```typescript
import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default defineConfig({
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      // SkelteKit options
      kit: {
        assets: 'static',
        outDir: '.svelte-kit',
        appDir: '_app',
        includeVersionFile: true,
        adapterFallback: 'fallback.html',
        trailingSlash: 'never'
      },
      
      // PWA options
      strategies: 'generateSW',
      scope: '/',
      base: '/',
      manifest: {
        name: 'SkelteKit PWA',
        short_name: 'SKitPWA',
        description: 'A progressive web app built with SkelteKit',
        theme_color: '#ffffff',
        background_color: '#ffffff',
        display: 'standalone',
        scope: '/',
        start_url: '/',
        icons: [
          {
            src: '/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable'
          }
        ]
      },
      workbox: {
        globPatterns: ['client/**/*.{js,css,ico,png,svg,webp}'],
        navigateFallback: '/',
        skipWaiting: true,
        clientsClaim: true
      },
      devOptions: {
        enabled: true,
        suppressWarnings: false,
        type: 'module',
        navigateFallback: '/'
      }
    })
  ]
})
```

--------------------------------

### SvelteKitPWA with Custom Configuration

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/SvelteKitPWA.md

Configure SvelteKitPWA with custom strategies, manifest details, and SvelteKit-specific options. This example demonstrates setting 'injectManifest' strategy, custom filename, manifest properties, and kit-related configurations.

```typescript
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      strategies: 'injectManifest',
      filename: 'my-sw.ts',
      manifest: {
        name: 'My App',
        short_name: 'App',
        display: 'standalone',
        start_url: '/',
      },
      kit: {
        includeVersionFile: true,
        appDir: '_app',
        outDir: '.svelte-kit',
      },
      workbox: {
        globPatterns: ['client/**/*.{js,css,ico,png,svg,webp}'],
        navigateFallback: '/',
      }
    })
  ]
}
```

--------------------------------

### Usage Example with Build Result

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/logWorkboxResult.md

Demonstrates manual invocation of logWorkboxResult with a buildResult object, showing precache details and generated files.

```typescript
import { logWorkboxResult } from '@vite-pwa/sveltekit'
import { defineConfig } from 'vite'

// Example with buildResult
const buildResult = {
  count: 42,
  size: 256000,
  filePaths: [
    '/workspace/home/sveltekit/.svelte-kit/output/client/sw.js',
    '/workspace/home/sveltekit/.svelte-kit/output/client/workbox-abc123.js'
  ],
  warnings: []
}

const viteConfig = {
  root: '/workspace/home/sveltekit',
  logLevel: 'info'
}

// Outputs:
// SvelteKit VitePWA v1.1.0
// mode      generateSW
// precache  42 entries (250.00 KiB)
// files generated
//   .svelte-kit/output/client/sw.js
//   .svelte-kit/output/client/workbox-abc123.js
logWorkboxResult('generateSW', viteConfig, buildResult)

// Example with warnings
const resultWithWarnings = {
  count: 30,
  size: 200000,
  filePaths: ['/path/to/sw.js'],
  warnings: [
    'Maximum precache size exceeded',
    'Font file not optimized'
  ]
}

logWorkboxResult('injectManifest', viteConfig, resultWithWarnings)
// Outputs warnings in yellow
```

--------------------------------

### KitOptions Configuration with SPA Mode and Adapter Fallback

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/types.md

Provides an example of configuring SPA mode with custom fallback mapping and revision, alongside specifying an adapter fallback file.

```typescript
const config = {
  kit: {
    spa: {
      fallbackMapping: '/app',
      fallbackRevision: async () => {
        return require('./package.json').version
      }
    },
    adapterFallback: 'fallback.html'
  }
}
```

--------------------------------

### Precache Manifest Structure Example

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/BUILD_LIFECYCLE.md

Illustrates the structure of a generated precache manifest, showing entries with their URLs and revisions. Immutable assets may not have a revision.

```javascript
// Generated precache manifest
[
  {
    url: '/index.js',
    revision: 'abc123def456'
  },
  {
    url: '/_app/app-xyz789.js',
    revision: '...'  // No revision for immutable assets
  },
  {
    url: '/about/',
    revision: 'page-revision-hash'
  }
]
```

--------------------------------

### Configure Vite with @vite-pwa/sveltekit

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/README.md

Add the SvelteKitPWA plugin to your vite.config.ts file. This example includes basic manifest configuration.

```typescript
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      manifest: {
        name: 'My App',
        short_name: 'App',
        display: 'standalone'
      }
    })
  ]
}
```

--------------------------------

### Usage Example: Initialization Log Only

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/logWorkboxResult.md

Shows how to call logWorkboxResult without a buildResult to log only the initialization phase details.

```typescript
// When called without buildResult (initialization phase)
logWorkboxResult('generateSW', viteConfig)

// Outputs:
// SvelteKit VitePWA v1.1.0
// mode      generateSW
```

--------------------------------

### Minimal SvelteKit PWA Configuration

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/types.md

Use this minimal configuration for basic PWA setup with the 'generateSW' strategy. It requires defining the service worker strategy and basic manifest details.

```typescript
const options: SvelteKitPWAOptions = {
  strategies: 'generateSW',
  manifest: {
    name: 'My App',
    short_name: 'App'
  }
}
```

--------------------------------

### Basic Vite Config with SvelteKitPWA

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/IMPLEMENTATION_GUIDE.md

Integrate the SvelteKitPWA plugin into your Vite configuration to enable PWA features. This example shows basic manifest configuration.

```typescript
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      manifest: {
        name: 'My App',
        short_name: 'App',
        display: 'standalone'
      }
    })
  ]
}
```

--------------------------------

### Configure Runtime Caching

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/IMPLEMENTATION_GUIDE.md

Use runtime caching to store responses from specific API endpoints. This example caches responses from 'api.example.com' using the NetworkFirst strategy.

```typescript
SvelteKitPWA({
  strategies: 'generateSW',
  workbox: {
    runtimeCaching: [
      {
        urlPattern: /^https:\/\/api\.example\.com\/.*/i,
        handler: 'NetworkFirst',
        options: {
          cacheName: 'api-cache'
        }
      }
    ]
  }
})
```

--------------------------------

### SvelteKitPWA with generateSW Strategy

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/SvelteKitPWA.md

Utilize the 'generateSW' strategy for SvelteKitPWA, providing manifest details and SvelteKit-specific asset and app directory configurations. This is suitable for simpler PWA setups.

```typescript
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      strategies: 'generateSW',
      manifest: {
        name: 'SvelteKit PWA',
        short_name: 'SKitPWA',
        theme_color: '#ffffff',
        background_color: '#ffffff',
        display: 'standalone',
        scope: '/',
        start_url: '/',
        icons: [
          { src: '/pwa-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: '/pwa-512x512.png', sizes: '512x512', type: 'image/png' }
        ]
      },
      kit: {
        assets: 'static',
        appDir: '_app',
      }
    })
  ]
}
```

--------------------------------

### SvelteKitPWA with SPA Mode Configuration

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/SvelteKitPWA.md

Configure SvelteKitPWA for Single Page Application (SPA) mode. This example sets up SPA-specific fallback mappings and revision generation, along with manifest and asset configurations.

```typescript
import { sveltekit } from '@sveltejs/kit/vite'
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      strategies: 'generateSW',
      kit: {
        spa: {
          fallbackMapping: '/app',
          fallbackRevision: async () => 'v1.0.0'
        },
        adapterFallback: 'app.html',
        assets: 'static'
      },
      manifest: {
        name: 'SvelteKit SPA',
        display: 'standalone',
        start_url: '/app'
      }
    })
  ]
}
```

--------------------------------

### Optimize Asset Precatching with Glob Patterns

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/IMPLEMENTATION_GUIDE.md

Use specific glob patterns to precache only critical assets and avoid including unnecessary files. This example precaches client-side JavaScript, CSS, icons, and images while ignoring source maps.

```typescript
workbox: {
  globPatterns: ['client/**/*.{js,css,ico,png,svg,webp}'],
  globIgnores: ['**/*.map']
}
```

--------------------------------

### Complete SvelteKit PWA Configuration

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/types.md

This comprehensive configuration includes 'injectManifest' strategy, custom service worker settings, detailed manifest, development options, and SvelteKit-specific configurations. It's suitable for advanced PWA setups requiring fine-grained control.

```typescript
const options: SvelteKitPWAOptions = {
  strategies: 'injectManifest',
  filename: 'my-sw.ts',
  srcDir: './src',
  scope: '/',
  base: '/',
  manifest: {
    name: 'SkelteKit PWA',
    short_name: 'SKitPWA',
    description: 'A progressive web app built with SkelteKit',
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
    scope: '/',
    start_url: '/',
    icons: [
      {
        src: '/pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png'
      }
    ]
  },
  injectManifest: {
    globPatterns: ['client/**/*.{js,css,ico,png,svg}'],
    injectionPoint: 'self.__WB_MANIFEST'
  },
  devOptions: {
    enabled: true,
    type: 'module',
    navigateFallback: '/'
  },
  kit: {
    assets: 'static',
    outDir: '.svelte-kit',
    appDir: '_app',
    includeVersionFile: true
  }
}
```

--------------------------------

### Create a New SvelteKit Project

Source: https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts-assets-generator/README.md

Use `npx sv create` to initialize a new SvelteKit project. You can create it in the current directory or specify a project name.

```bash
npx sv create

# create a new project in my-app
npx sv create my-app
```

--------------------------------

### Initialization Log Format

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/logWorkboxResult.md

Displays the PWA plugin name, version, and the selected generation strategy when no build result is provided.

```text
SvelteKit VitePWA v1.1.0
mode      generateSW
```

--------------------------------

### TypeScript Configuration with SvelteKitPWAOptions

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/README.md

Demonstrates how to use TypeScript for fully typed configuration of the SvelteKitPWA plugin. Imports the necessary types for configuration.

```typescript
import type { SvelteKitPWAOptions, KitOptions } from '@vite-pwa/sveltekit'

const config: SvelteKitPWAOptions = {
  // Type-safe configuration
}
```

--------------------------------

### Build Complete Log Format

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/logWorkboxResult.md

Shows comprehensive build information including plugin version, strategy, precache entries, size, generated file paths, and any warnings.

```text
SvelteKit VitePWA v1.1.0
mode      generateSW
precache  X entries (Y KiB)
files generated
  src/service-worker.js
  .svelte-kit/output/client/sw.js
  .svelte-kit/output/client/workbox-abc123.js
```

--------------------------------

### Configure kit.outDir

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Specify the output directory for SvelteKit build artifacts. The plugin requires specific subdirectories for client assets and prerendered pages.

```typescript
kit: {
  outDir: '.svelte-kit'
}
```

--------------------------------

### Build Svelte Project for Production

Source: https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts/README.md

Execute this command to create an optimized production build of your Svelte application. Preview the build using `npm run preview`.

```bash
npm run build
```

--------------------------------

### Vite-PWA SvelteKit Architecture Overview

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/README.md

Illustrates the flow from user configuration in vite.config.ts through the Vite build process to the final output files, including service worker and manifest generation.

```plaintext
User vite.config.ts
    ↓
SvelteKitPWA() [plugin factory]
    ├─→ configureSkelteKitOptions() [option transform]
    ├─→ Returns: [VitePWA plugins, SkelteKitPlugin]
    ↓
Vite build process
    ├─→ Client build: bundling, asset processing
    ├─→ Server build: service worker generation
    ├─→ SkelteKitPlugin: file operations, manifest injection
    ↓
Output files
    ├─→ .svelte-kit/output/client/sw.js
    ├─→ .svelte-kit/output/client/manifest.webmanifest
    └─→ .svelte-kit/output/client/** [precached assets]
```

--------------------------------

### Regular Imports for SvelteKit Options

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Demonstrates importing SvelteKitPWAOptions and KitOptions as regular imports, as they are re-exported.

```typescript
import { SvelteKitPWAOptions, KitOptions } from '@vite-pwa/sveltekit'
```

--------------------------------

### Custom Service Worker with Manifest Injection

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/BUILD_LIFECYCLE.md

A custom service worker template that includes an event listener for installation and a placeholder for the precache manifest to be injected by the build process.

```typescript
// src/service-worker.ts
declare const self: ServiceWorkerGlobalScope

self.addEventListener('install', () => {
  console.log('Service worker installed')
})

// Precache manifest injected here
precacheAndRoute(self.__WB_MANIFEST)
```

--------------------------------

### Create a New Svelte Project

Source: https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts/README.md

Use these commands to create a new Svelte project. The first creates a project in the current directory, and the second creates a project in a specified directory.

```bash
npx sv create
```

```bash
npx sv create my-app
```

--------------------------------

### Plugin Initialization in Vite Config

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/BUILD_LIFECYCLE.md

This snippet shows how to initialize the SvelteKit and PWA plugins within the Vite configuration file. Ensure the PWA plugin is placed after the SvelteKit plugin.

```typescript
export default {
  plugins: [
    sveltekit(),         // 1. SkelteKit plugin initializes
    SvelteKitPWA()       // 2. PWA plugin factory called
  ]
}
```

--------------------------------

### KitOptions

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Interface for SvelteKit-specific configuration options within SvelteKitPWAOptions.

```APIDOC
## KitOptions

### Description

SvelteKit-specific configuration options that can be provided within the `kit` property of `SvelteKitPWAOptions`.

### Interface Definition

```typescript
interface KitOptions {
  base?: string
  assets?: string
  outDir?: string
  adapterFallback?: string
  trailingSlash?: 'never' | 'always' | 'ignore'
  appDir?: string
  includeVersionFile?: boolean
  spa?: true | { fallbackMapping?: string, fallbackRevision?: () => Promise<string> }
}
```

### Properties

- **base** (`string`) - Optional - Base path for the application.
- **assets** (`string`) - Optional - Path to assets directory.
- **outDir** (`string`) - Optional - Output directory for build artifacts.
- **adapterFallback** (`string`) - Optional - Fallback route for adapter.
- **trailingSlash** (`'never' | 'always' | 'ignore'`) - Optional - Controls trailing slash behavior.
- **appDir** (`string`) - Optional - Directory for SvelteKit app.
- **includeVersionFile** (`boolean`) - Optional - Whether to include a version file.
- **spa** (`true | { fallbackMapping?: string, fallbackRevision?: () => Promise<string> }`) - Optional - SPA mode configuration.
```

--------------------------------

### File Organization Structure

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/INDEX.md

This snippet shows the directory structure for the SvelteKit PWA plugin project. It outlines the purpose of each key file and directory.

```tree
output/
├── INDEX.md                              ← You are here
├── README.md                             ← Start here
├── IMPLEMENTATION_GUIDE.md               ← Implementation patterns
├── CONFIGURATION.md                      ← Configuration reference
├── BUILD_LIFECYCLE.md                    ← Build process details
├── types.md                              ← Type definitions
├── MODULE_EXPORTS.md                     ← Public API
└── api-reference/
    ├── SvelteKitPWA.md                  ← Plugin factory
    ├── configureSkelteKitOptions.md     ← Config transformer
    ├── SkelteKitPlugin.md               ← Build plugin
    ├── logWorkboxResult.md              ← Logger
    └── internal-utilities.md            ← Helper functions
```

--------------------------------

### SvelteKitPWA Basic Configuration

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/IMPLEMENTATION_GUIDE.md

A minimal configuration for the SvelteKitPWA plugin, focusing on manifest properties like name and display mode.

```typescript
SvelteKitPWA({
  manifest: {
    name: 'My App',
    display: 'standalone'
  }
})
```

--------------------------------

### Configure kit.appDir

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Define the directory name for SvelteKit's application code bundles and version information. This is used for generating service worker precache manifests.

```typescript
kit: {
  appDir: '_app'
}
```

--------------------------------

### Initialize SvelteKit PWA in Standalone Script

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Use the SvelteKit PWA plugin in a standalone script context. This snippet demonstrates a minimal configuration for the PWA plugin.

```typescript
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

const plugins = SvelteKitPWA({
  manifest: { name: 'My App' }
})
```

--------------------------------

### Using SvelteKitPWA Plugin Factory

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Demonstrates how to import and use the SvelteKitPWA plugin factory in your vite.config.ts file.

```typescript
import { SvelteKitPWA } from '@vite-pwa/sveltekit'

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({ /* options */ })
  ]
}
```

--------------------------------

### Inspect Build Output and Logs

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/BUILD_LIFECYCLE.md

Commands to inspect the generated service worker and manifest files after the build, and to filter build logs for precache and manifest details.

```bash
# After build, inspect generated files
cat .svelte-kit/output/client/service-worker.js | head -50
cat .svelte-kit/output/client/manifest.webmanifest

# View build logs for precache details
npm run build 2>&1 | grep -i 'precache|manifest'
```

--------------------------------

### Importing VitePWAOptions Type

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Shows how to import the base PWA plugin options type from @vite-pwa/sveltekit.

```typescript
import type { VitePWAOptions } from '@vite-pwa/sveltekit'
```

--------------------------------

### SPA Mode Configuration Details

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/types.md

Illustrates the structure for configuring SPA mode within KitOptions, allowing for custom fallback mapping and revision generation.

```typescript
spa: {
  fallbackMapping?: string        // Logical path for fallback routing
  fallbackRevision?: () => Promise<string>  // Custom revision generator
}
```

--------------------------------

### Configure kit.base Path (Deprecated)

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Set the base path for application URLs. This option is deprecated; use Vite's `base` configuration instead.

```typescript
kit: {
  base: '/'
}
```

--------------------------------

### Type Imports for SvelteKit Options

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Shows how to import TypeScript types for SvelteKitPWAOptions and KitOptions using the 'type' keyword.

```typescript
import type { SvelteKitPWAOptions, KitOptions } from '@vite-pwa/sveltekit'
```

--------------------------------

### KitOptions Interface Definition

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/types.md

Defines the configuration interface for SvelteKit-specific PWA plugin behavior, including options for base paths, output directories, and SPA mode.

```typescript
interface KitOptions {
  base?: string
  assets?: string
  outDir?: string
  adapterFallback?: string
  trailingSlash?: 'never' | 'always' | 'ignore'
  appDir?: string
  includeVersionFile?: boolean
  spa?: true | {
    fallbackMapping?: string
    fallbackRevision?: () => Promise<string>
  }
}
```

--------------------------------

### Client Build Asset Processing

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/BUILD_LIFECYCLE.md

During the production client build, Vite bundles and optimizes application code, CSS, and assets, outputting them to the .svelte-kit/output/client directory. The SkelteKitPlugin's `generateBundle` hook is triggered for client builds to inject manifest icons and allow the PWA plugin to process the bundle.

```bash
1. Vite processes client code
   ├─ Bundling application code
   ├─ CSS processing
   ├─ Asset optimization
   └─ Output to .svelte-kit/output/client
```

--------------------------------

### KitOptions Interface

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Defines SvelteKit-specific configuration options for the PWA plugin.

```typescript
interface KitOptions {
  base?: string
  assets?: string
  outDir?: string
  adapterFallback?: string
  trailingSlash?: 'never' | 'always' | 'ignore'
  appDir?: string
  includeVersionFile?: boolean
  spa?: true | { fallbackMapping?: string, fallbackRevision?: () => Promise<string> }
}
```

--------------------------------

### Configure Web App Manifest

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Provide configuration for the Web App Manifest, which includes details like app name, description, display mode, and icons. This uses the standard manifest.json structure.

```typescript
SvelteKitPWA({
  manifest: {
    name: 'My App',
    short_name: 'App',
    description: 'A progressive web app',
    start_url: '/',
    scope: '/',
    display: 'standalone',
    theme_color: '#ffffff',
    background_color: '#ffffff',
    icons: [
      {
        src: '/pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png'
      }
    ]
  }
})
```

--------------------------------

### Enable SPA Mode

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/IMPLEMENTATION_GUIDE.md

Configure SvelteKit to run in SPA mode by setting 'spa' to true and specifying an 'adapterFallback' file. This is useful for single-page applications.

```typescript
SvelteKitPWA({
  kit: {
    spa: true,
    adapterFallback: 'app.html'
  },
  strategies: 'generateSW'
})
```

--------------------------------

### Package.json Exports Configuration

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Defines the export paths for the @vite-pwa/sveltekit package in package.json, specifying entry points for types and default module.

```json
{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.mjs"
    },
    "./package.json": "./package.json"
  },
  "types": "dist/index.d.ts"
}
```

--------------------------------

### SvelteKitPWA with PWA Assets Configuration

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/README.md

Configure the SvelteKitPWA plugin to include PWA assets. The 'config: true' option indicates that PWA assets should be automatically configured.

```typescript
SvelteKitPWA({
  pwaAssets: {
    config: true
  }
})
```

--------------------------------

### Import SvelteKitPWA Plugin

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/00_START_HERE.txt

Import the SvelteKitPWA plugin to use it in your Vite configuration.

```javascript
import { SvelteKitPWA } from '@vite-pwa/sveltekit'
```

--------------------------------

### Configure kit.spa with Custom Fallback Mapping

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Enable SPA mode with a custom fallback mapping. The server will redirect the fallback page to the specified application route.

```typescript
kit: {
  spa: {
    fallbackMapping: '/app'  // Server redirects app.html to /app
  },
  adapterFallback: 'app.html'
}
```

--------------------------------

### KitOptions Configuration with Trailing Slash Handling

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/types.md

Illustrates how to configure trailing slash behavior for URLs, affecting HTML file transformations in the precache manifest.

```typescript
const config = {
  kit: {
    trailingSlash: 'always',
    appDir: '_app',
    outDir: '.svelte-kit'
  }
}
```

--------------------------------

### SvelteKitPWAOptions

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Configuration interface for the SvelteKitPWA plugin. It extends VitePWAOptions and adds SvelteKit-specific settings.

```APIDOC
## SvelteKitPWAOptions

### Description

Configuration interface for the `SvelteKitPWA` plugin. It extends `VitePWAOptions` from `vite-plugin-pwa` and includes additional `kit` options for SvelteKit-specific settings.

### Interface Definition

```typescript
interface SvelteKitPWAOptions extends Partial<VitePWAOptions> {
  kit?: KitOptions
  // ... inherited from VitePWAOptions
}
```

### Properties

- **kit** (`KitOptions`) - Optional - SvelteKit-specific configuration options.
- Inherits all properties from `VitePWAOptions` (from `vite-plugin-pwa`).
```

--------------------------------

### Configure kit.spa Mode

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Enable Single Page App mode. When active, the configured fallback page is added to the service worker precache manifest for correct offline navigation.

```typescript
kit: {
  spa: true,
  adapterFallback: 'app.html'
}
```

--------------------------------

### Main Exports from @vite-pwa/sveltekit

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/module-exports.md

Defines the main plugin factory function and configuration interfaces exported by the package.

```typescript
export function SvelteKitPWA(userOptions?: Partial<SvelteKitPWAOptions>): Plugin[]
export interface SvelteKitPWAOptions extends Partial<VitePWAOptions> { ... }
export interface KitOptions { ... }
```

--------------------------------

### Configure Development Options

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Enable and configure development mode options for testing service workers locally. This includes suppressing warnings and setting a navigate fallback for development.

```typescript
SvelteKitPWA({
  devOptions: {
    enabled: true,
    suppressWarnings: true,
    navigateFallback: '/',
    type: 'module'
  }
})
```

--------------------------------

### Enable Version File for Cache Updates

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/IMPLEMENTATION_GUIDE.md

Enable the 'includeVersionFile' option in the SvelteKit configuration to allow for efficient cache updates. This is crucial for ensuring users receive the latest version of your PWA.

```typescript
kit: {
  includeVersionFile: true
}
```

--------------------------------

### Configure kit.adapterFallback

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Specify the fallback page name for SvelteKit's static adapter. This page is included in the service worker precache manifest for offline support.

```typescript
kit: {
  adapterFallback: 'app.html'
}
```

--------------------------------

### Build Warnings Log Format

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/logWorkboxResult.md

Specifically logs any warnings generated during the Workbox build process, displayed in yellow.

```text
warnings
  Warning message 1
  Warning message 2
```

--------------------------------

### Configure PWA Assets Generation

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Enable PWA asset generation using `@vite-pwa/assets-generator`. Set `config: true` to auto-detect `pwa-assets.config.ts` for configuration.

```typescript
SvelteKitPWA({
  pwaAssets: {
    config: true  // Auto-detect pwa-assets.config.ts
  }
})
```

--------------------------------

### Configure kit.trailingSlash

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/configuration.md

Control how trailing slashes are handled in URL transformations for the precache manifest. Ensure this matches your SvelteKit configuration.

```typescript
kit: {
  trailingSlash: 'always'
}
```

--------------------------------

### logWorkboxResult

Source: https://github.com/vite-pwa/sveltekit/blob/main/_autodocs/api-reference/logWorkboxResult.md

Logs formatted build information about the PWA plugin execution. It displays the plugin version, selected strategy, precache entry count, file size, generated file paths, and any build warnings. The output is controlled by Vite's logLevel configuration.

```APIDOC
## Function Signature

```typescript
function logWorkboxResult(
  strategy: string,
  viteOptions: ResolvedConfig,
  buildResult?: BuildResult
): void
```

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| strategy | `string` | Yes | — | The PWA generation strategy being used (e.g., `'generateSW'`, `'injectManifest'`). Displayed prominently in the log output. |
| viteOptions | `ResolvedConfig` | Yes | — | Resolved Vite configuration object. Used to access the root directory and `logLevel` setting to determine output verbosity. |
| buildResult | `BuildResult` | No | — | Result object from Workbox build containing entry count, size, file paths, and warnings. When omitted, outputs initialization log only. |

### Description

The function outputs colored, formatted build information to the console. Output is controlled by Vite's `logLevel` configuration:

- **`silent`** — No output
- **`warn`** — Only warnings displayed (if any)
- **`info`** (default) — Full output including plugin version, strategy, entry count, size, generated files, and warnings

### Output Format Examples

#### Initialization Log (no buildResult)

```
SvelteKit VitePWA v1.1.0
mode      generateSW
```

#### Build Complete Log (with buildResult)

```
SvelteKit VitePWA v1.1.0
mode      generateSW
precache  X entries (Y KiB)
files generated
  src/service-worker.js
  .svelte-kit/output/client/sw.js
  .svelte-kit/output/client/workbox-abc123.js
```

#### Build Warnings

```
warnings
  Warning message 1
  Warning message 2
```

### Color Coding

- **Cyan** — Plugin name and version
- **Magenta** — Strategy name
- **Green** — Precache entry count
- **Dim (gray)** — File sizes and relative paths
- **Yellow** — Warning messages

### Configuration Details

#### Log Level Behavior

The function respects Vite's build configuration:

- **`logLevel: 'silent'`** — Function returns immediately, no output
- **`logLevel: 'info'`** — Full details with entry counts, sizes, and file paths
- **`logLevel: 'warn'`** — Only warnings displayed

The `logLevel` is extracted from `viteOptions.logLevel` with a default of `'info'`.

#### File Path Formatting

Generated file paths are displayed relative to the project root:
- Absolute paths are converted to relative paths for readability
- Uses the `relative()` function from Node.js `path` module
- Paths are displayed dimmed/grayed for visual hierarchy

#### Size Formatting

Precache size is calculated in KiB (kilobytes):
- Raw size in bytes is divided by 1024
- Displayed with two decimal places

### Usage Example

This function is typically called automatically by the build system. Manual invocation example:

```typescript
import { logWorkboxResult } from '@vite-pwa/sveltekit'
import { defineConfig } from 'vite'

// Example with buildResult
const buildResult = {
  count: 42,
  size: 256000,
  filePaths: [
    '/workspace/home/sveltekit/.svelte-kit/output/client/sw.js',
    '/workspace/home/sveltekit/.svelte-kit/output/client/workbox-abc123.js'
  ],
  warnings: []
}

const viteConfig = {
  root: '/workspace/home/sveltekit',
  logLevel: 'info'
}

// Outputs:
// SvelteKit VitePWA v1.1.0
// mode      generateSW
// precache  42 entries (250.00 KiB)
// files generated
//   .svelte-kit/output/client/sw.js
//   .svelte-kit/output/client/workbox-abc123.js
logWorkboxResult('generateSW', viteConfig, buildResult)

// Example with warnings
const resultWithWarnings = {
  count: 30,
  size: 200000,
  filePaths: ['/path/to/sw.js'],
  warnings: [
    'Maximum precache size exceeded',
    'Font file not optimized'
  ]
}

logWorkboxResult('injectManifest', viteConfig, resultWithWarnings)
// Outputs warnings in yellow
```

### Initialization Log Only

```typescript
// When called without buildResult (initialization phase)
logWorkboxResult('generateSW', viteConfig)

// Outputs:
// SvelteKit VitePWA v1.1.0
// mode      generateSW
```

### Throws

Does not throw errors. If file paths cannot be resolved to relative paths, they are displayed as-is.

### Source Reference

- **File:** `src/plugins/log.ts`
- **Lines:** 8-42

### Related

- [`SkelteKitPlugin`](./SkelteKitPlugin.md) — Build plugin that calls this function
- Vite `ResolvedConfig` type — Vite configuration interface

### Dependencies

- `kolorist` — Terminal color output library
- `node:path` — Node.js path utilities
```

--------------------------------

### Create a new Git branch

Source: https://github.com/vite-pwa/sveltekit/blob/main/CONTRIBUTING.md

Use this command to check out a new branch for your work and commits.

```shell
git checkout -b my-new-branch
```