SvelteKit PWA

Documentation

Get started with this SvelteKit PWA Boilerplate

Getting Started

Quick setup guide for development

Prerequisites

  • • Node.js 22 (use fnm use 22)
  • • pnpm package manager
  • • Git for version control

Installation

# Clone the repository
git clone <your-repo-url>
# Install dependencies
pnpm install
# Start development server
pnpm dev
Available Scripts

Commands for development and deployment

pnpm dev Development

Start development server with HMR

pnpm build Production

Build optimized production bundle

pnpm preview Preview

Preview production build locally

pnpm test Testing

Run all tests (unit + E2E)

pnpm lint Quality

Lint code with ESLint

pnpm check TypeScript

Check TypeScript types

Project Structure

Understanding the codebase organization

src/
├── lib/
│ ├── components/
│ │ ├── layout/ # Header, Footer, etc.
│ │ ├── pwa/ # PWA-specific components
│ │ ├── ui/ # shadcn-svelte components
│ │ └── index.ts # Component exports
│ ├── stores/ # Svelte stores
│ └── utils/ # Utility functions
├── routes/ # SvelteKit routes
├── service-worker.ts # PWA service worker
└── app.html # HTML template
PWA Configuration

Progressive Web App features and setup

Service Worker

The service worker is implemented using SvelteKit's native service worker support. It handles caching, offline functionality, and automatic updates without the need for additional plugins like VitePWA.

Manifest & Icons

Generate PWA icons from your favicon.svg using the command:

pnpm run icons:generate

Update Strategy

The app automatically checks for updates and prompts users when new versions are available. Updates are applied seamlessly without requiring a page reload.

Deployment

Deploy your PWA to production

Vercel (Recommended)

This project is optimized for Vercel deployment with zero configuration. Simply connect your repository to Vercel and deploy.

Other Platforms

For other deployment platforms, you may need to adjust the adapter in svelte.config.js and ensure service worker paths are correctly configured.