SveltekitPWA screenshot

SveltekitPWA

Author Avatar Theme by Funmiles
Updated: 6 Jul 2022
18 Stars

An experimental Progressive Web App based on Svelte-kit

Overview

The Svelte-kit Progressive Web App skeleton is a project that provides everything you need to build a Progressive Web App using Svelte-kit. It is designed to simplify the process of creating and developing a PWA, allowing users to easily get started with their project.

Features

  • Easy project creation with npm install
  • Development server for real-time code changes
  • Testing of service worker code and obtaining a lighthouse score
  • Production app building with adapter installation
  • Preview of built app with npm run preview
  • Ability to adjust and modify the list of routes for the PWA
  • Customization of manifest, icons, and meta description for app publishing

Installation

To install the Svelte-kit Progressive Web App skeleton, follow these steps:

  1. Create a new project and install dependencies:

    npm install
    
  2. Start a development server:

    npm run dev
    
  3. Test the service worker code and obtain a lighthouse score:

    • Perform necessary operations to test the service worker code.
  4. Build a production version of your app:

    npm run build
    
  5. (Optional) Install an adapter for your target environment:

    • Install a suitable adapter for your specific requirements.
  6. Preview the built app:

    npm run preview
    
  7. Adjust the list of routes for your PWA:

    • Edit the service-worker.js file and modify the line specifying the routes to cache according to your own list of routes.
  8. Customize the manifest, icons, and description meta-data:

    • Modify the manifest.webmanifest file in the static directory.
    • Replace the icon files with your own icons (refer to https://github.com/onderceylan/pwa-asset-generator for an easy generator).
    • Update the meta description tag in the src/routes/__layout.svelte file.

Summary

The Svelte-kit Progressive Web App skeleton is a comprehensive tool for building Progressive Web Apps using Svelte-kit. It provides a range of features, including easy project creation, real-time code development, testing, production app building, and customization options. By following the installation and usage guide, users can quickly get started with their PWA project and tailor it to their specific needs.