TLDR code snippets:
npm create svelte@latest my-offline-app
extract app-icons.zip to /static/
create /static/manifest.json
{
"name": "My offline App!",
"short_name": "Offline App",
"start_url": "/",
"display": "standalone",
"theme_color": "#ff3e00",
"background_color": "#ffffff",
"icons": [
{
"sizes": "192x192",
"src": "icon192.png",
"type": "image/png"
},
{
"sizes": "512x512",
"src": "icon512.png",
"type": "image/png"
}
]
}
edit /src/app.html
<!-- ... -->
<head>
<!-- ... -->
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
<title>My Offline App!</title>
<link rel="icon" href="%sveltekit.assets%/icon.svg" />
</head>
<!-- ... -->
npm install -D workbox-precaching
create /src/service-worker.js
import { build, files, prerendered, version } from "$service-worker";
import { precacheAndRoute } from "workbox-precaching";
const precache_list = [
"/", // Attention: serves stale index, might not be ideal for your use case.
...build,
...files,
...prerendered,
].map((s) => ({
url: s,
revision: version,
}));
precacheAndRoute(precache_list);
edit /vite.config.js
// ...
const config = {
// ...
define: {
"process.env.NODE_ENV": '"production"',
},
// ...
};
// ...
npm run dev
npm run build
and then npm run preview