gerzhan-scanner-crcode_vite-sveltekit-pwa Svelte Themes

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

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

Top categories

Loading Svelte Themes