Svelte Project Setup for Progressive Web Apps (PWAs): A Complete Tutorial

Progressive Web Apps (PWAs) are transforming the way users interact with websites by offering a mobile-app-like experience. Svelte, a modern JavaScript framework, simplifies building fast and efficient PWAs. This tutorial guides you through setting up a Svelte project optimized for PWAs, from initial setup to deployment.

Prerequisites

Node.js installed (version 14 or higher)
Basic knowledge of JavaScript and Svelte
Text editor (VS Code recommended)
Command line interface familiarity

Creating a New Svelte Project

Start by creating a new Svelte project using the official template.

npx degit sveltejs/template svelte-pwa
cd svelte-pwa
npm install

Installing PWA Dependencies

To enable PWA features, install the Vite plugin for PWA support.

npm install vite-plugin-pwa --save-dev

Configuring Vite for PWA

Edit vite.config.js to include the PWA plugin with your configuration.

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    svelte(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My Svelte PWA',
        short_name: 'SveltePWA',
        start_url: '.',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#4DBA87',
        icons: [
          {
            src: 'icon-192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'icon-512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
});

Adding a Web App Manifest

The manifest is configured within the Vite plugin, but you should also add icons and metadata to your public directory. Create a manifest.json file with your app details.

{
  "name": "My Svelte PWA",
  "short_name": "SveltePWA",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4DBA87",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Building the Svelte App

Develop your app as usual. The default App.svelte file can be customized to include PWA-specific features like offline support or splash screens.

Registering Service Worker

The Vite PWA plugin automatically registers a service worker. Ensure your main.js includes the registration code if needed.

Example:

import App from './App.svelte';

const app = new App({
  target: document.body
});

export default app;

Testing Your PWA

Run the development server to test your PWA locally.

npm run dev

Open your browser and use developer tools to simulate offline mode and check the service worker registration under the Application tab.

Building for Production

When ready to deploy, build your app with:

npm run build

The build output will include the service worker and manifest files, ready for deployment to your web server.

Conclusion

With these steps, you have set up a Svelte project optimized for Progressive Web Apps. This setup ensures your app is fast, reliable, and installable across devices, providing a seamless experience for users.

Table of Contents