CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.3.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.2.3...v0.3.0) (2026-09-20)
+
+### Features
+
+* add installable PWA [#30](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/30) ([bb30935](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/bb30935f73bfcbb77c10663cf6c683d8f0caca85))
+
 ## [0.2.3](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v0.2.2...v0.2.3) (2026-09-19)
 
 ### Bug Fixes

README.md

@@ -51,6 +51,25 @@ Compose topology принадлежит workspace, эксплуатационн
 Проверка публикации требует настроенного registry/runner; локальный build
 не доказывает package permissions.
 
+## Установка как приложение (PWA)
+
+Production-сборка поддерживает установку WealthLedger в отдельное окно через
+`vite-plugin-pwa`. Нужен HTTPS или localhost. В Chrome/Edge выберите «Установить
+WealthLedger» в меню браузера или значок установки в адресной строке; на iPhone
+и iPad — Safari → «Поделиться» → «На экран Домой». Доступность установки зависит
+от браузера и ОС.
+
+Service worker кеширует только статическую оболочку, включая страницы SPA.
+Вход, финансовые данные и сохранение изменений требуют сети: API, токены и
+ответы API не сохраняются в Cache Storage. Это не автономный финансовый
+клиент. Новая версия загружается в фоне и применяется после закрытия всех
+вкладок и окон WealthLedger и повторного открытия; открытые формы автоматически
+не перезагружаются.
+
+Локальная проверка: `nvm use --silent`, `npm run build`, `npm run preview`.
+В DevTools → Application проверьте Manifest, Service Workers и Cache Storage.
+В режиме `npm run dev` и в Storybook service worker не включается.
+
 ## Проверка
 
 ```bash

index.html

@@ -1,8 +1,10 @@
 <!doctype html>
-<html lang="en">
+<html lang="ru">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <meta name="theme-color" content="#ffffff" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WealthLedger</title>
   </head>

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "wealth-ledger-frontend",
 	"private": true,
-	"version": "0.2.3",
+	"version": "0.3.0",
 	"type": "module",
 	"engines": {
 		"node": "24.21.0"
@@ -82,6 +82,7 @@
 		"storybook": "10.6.0",
 		"typescript": "5.9.3",
 		"vite": "8.3.0",
+		"vite-plugin-pwa": "1.3.0",
 		"vitest": "5.0.0"
 	},
 	"allowScripts": {

vite.config.ts

@@ -2,10 +2,55 @@ import { fileURLToPath, URL } from "node:url";
 import babel from "@rolldown/plugin-babel";
 import react, { reactCompilerPreset } from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vite.dev/config/
 export default defineConfig({
-	plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
+	plugins: [
+		react(),
+		babel({ presets: [reactCompilerPreset()] }),
+		VitePWA({
+			injectRegister: "script-defer",
+			// Let the waiting worker activate after all app windows close.
+			registerType: "prompt",
+			includeAssets: ["favicon.svg", "icons.svg", "apple-touch-icon.png"],
+			manifest: {
+				id: "/",
+				name: "WealthLedger",
+				short_name: "WealthLedger",
+				description: "Личные финансы и инвестиции",
+				lang: "ru",
+				start_url: "/",
+				scope: "/",
+				display: "standalone",
+				theme_color: "#ffffff",
+				background_color: "#ffffff",
+				icons: [
+					{ src: "/pwa-192x192.png", sizes: "192x192", type: "image/png" },
+					{ src: "/pwa-512x512.png", sizes: "512x512", type: "image/png" },
+					{
+						src: "/pwa-512x512.png",
+						sizes: "512x512",
+						type: "image/png",
+						purpose: "maskable",
+					},
+				],
+			},
+			workbox: {
+				globPatterns: ["**/*.{js,css,html,woff2}"],
+				// Only the static shell is cached; API requests always use the network.
+				navigateFallbackDenylist: [/^\/api(?:\/|$)/],
+			},
+			integration: {
+				configureOptions(config, options) {
+					// Storybook loads this Vite config but must not install an app worker.
+					options.disable = config.plugins.some((plugin) =>
+						plugin.name.startsWith("storybook:"),
+					);
+				},
+			},
+		}),
+	],
 	resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)) } },
 	server: {
 		proxy: {