github.com/gerzhan/gerzhan-scanner-crcode_vite-sveltekit-pwa
$node --version
18.15.0
$npm create vite@latest
✔ Project name: … gerzhan-scanner-crcode_vite-sveltekit-pwa
✔ Select a framework: › Svelte
✔ Select a variant: › SvelteKit ↗
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
create-svelte version 5.0.5
┌ Welcome to SvelteKit!
│
◇ Which Svelte app template?
│ Skeleton project
│
◇ Add type checking with TypeScript?
│ Yes, using TypeScript syntax
│
◇ Select additional options (use arrow keys/space bar)
│ Add ESLint for code linting, Add Prettier for code formatting, Add Playwright for browser testing, Add Vitest for unit testing
│
└ Your project is ready!
NOTE: репозиторий сгененрирован с использованием
create-svelte v5.0.5
.
$node --version > .nvmrc
@see Simple native-like App in SvelteKit!
site.webmanifest
в директории static
указав содержание согласно developer.mozilla.org/ru/docs/Web/Manifestapp.html
файл путь до манифеста+ <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
src/service-worker.ts
workbox-precachhing
для кэширования ресурсов для работы в offline режиме$npm i -D workbox-precaching
import { build, files, prerendered, version } from '$service-worker';
import { precacheAndRoute } from 'workbox-precaching';
// NOTE: все файлы приложения сгенерированные SvelteKit
const precache_list = [...build, ...files, ...prerendered].map((file) => {
return {
url: file,
reversion: version,
};
});
// NOTE: формирование кэша файлов согласно путей/
precacheAndRoute(precache_list);
vite.config.ts
в описание окружения значение producation
для корректной работы workbox-precaching
# vite.config.ts
+ define: {
+ 'process.env.NODE_ENV': '"production"',
+ },
});
+page.ts
с добавление параметра export const prerender = true;
$npm run build
$npm run preview
!!НЕ РЕАЛИЗОВАН!!
@see https://vite-pwa-org.netlify.app/frameworks/sveltekit.html
$npm install -D @vite-pwa/sveltekit
# NOTE: установка основного модуля
$npm install -D vite-plugin-pwa
vite.config.ts
+// @see https://github.com/vite-pwa/sveltekit#-usage
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
export default defineConfig({
- plugins: [sveltekit()],
+ plugins: [sveltekit(), SvelteKitPWA()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}'],
},
# запуск в режиме разработки
$npm run dev
# сборка проекта для публикации
$npm run build
# запуск собранного проекта
$npm run preview
# форматирование всего кода
$npm run format