gerzhan/gerzhan-scanner-crcode_vite-sveltekit-pwa

Scaner QRCode PWA (vite+ts+SvelteKit)

Gerzhan | Scanner QRCode

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.

• фиксация информации о версии NodeJs

$node --version > .nvmrc

Настройка PWA

Простой способ

@see Simple native-like App in SvelteKit!

• создать файл site.webmanifest в директории static указав содержание согласно developer.mozilla.org/ru/docs/Web/Manifest
• добавить app.html файл путь до манифеста

+    <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />

• использовать генератор манифеста для генерации иконок
• или использовать генератор favicon для генерации манифеста и иконок
• создать файл src/service-worker.ts
• используем workbox-precachhing для кэширования ресурсов для работы в offline режиме

$npm i -D workbox-precaching

• добавление в service-worker.ts кода формирвоания кэша

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

Первоисточник

• developer.mozilla.org - Progressive web apps (PWAs)
• Simple native-like App in SvelteKit!
• SvelteKit: PWA and deployment on Netlify. video
• Официальная инструкция vite-pwa-org + sveltekit
• github.com/vite-pwa/sveltekit
• github.com/vite-pwa/sveltekit/tree/main/examples/sveltekit-ts