shinokada / vite-svelte-pwa

Create a Progressive Web App (PWA) using the popular JavaScript framework Svelte and the fast-build tool Vite.

Svelte + Vite + PWA

Installation

Install Vite with Svelte template:

npm create vite@latest vite-svelte-pwa -- --template svelte
cd vite-svelte-pwa
pnpm i

Create the following files and update accoring to your repo

• service-worker.js
• manifest.webmanifest
• icons
• maskable icon
• CNAME file for GitHub Pages

Install gh-pages

pnpm i -D gh-pages

Update package.json scripts

 "scripts": {
    "dev": "vite",
    "build": "vite build && cp service-worker.js CNAME ./dist ",
    "preview": "vite preview",
    "deploy": "npx gh-pages -d dist"
  },

Update vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  build: {
    assetsInlineLimit: 0, // 0 means all files will be inlined
  },
})

Run command

npm run build && npm run deploy

Check the site with Lighthouse