feat(web): initial pwa implement

Apkawa · Feb 21, 2024 · 6d092d4 · 6d092d4
1 parent 4e2f337
commit 6d092d4
Show file tree

Hide file tree

Showing 13 changed files with 1,246 additions and 63 deletions.
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="./favicon.ico">
+    <link rel="apple-touch-icon" href="./apple-touch-icon-180x180.png" sizes="180x180">
+    <link rel="mask-icon" href="./maskable-icon-512x512.png" color="#FFFFFF">
+
     <title>Кухонный калькулятор</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <meta name="theme-color" content="#ffffff">
+
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -16,7 +16,9 @@
     "format": "prettier --write src/",
     "dev:storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build",
-    "test:storybook": "test-storybook"
+    "test:storybook": "test-storybook",
+    "generate-pwa-assets": "pwa-assets-generator --preset minimal-2023 public/food_recipe_calculator_icon.png"
+
   },
   "dependencies": {
     "@repo/food-recipe-core": "*",
@@ -39,6 +41,7 @@
     "@tsconfig/node20": "^20.1.2",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.11.10",
+    "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-prettier": "^8.0.0",
@@ -63,6 +66,7 @@
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-favicon2": "^1.1.5",
     "vite-plugin-nightwatch": "^0.4.6",
+    "vite-plugin-pwa": "^0.19.0",
     "vitest": "^1.2.2",
     "vue-tsc": "^1.8.27"
   }

diff --git a/apps/web/public/apple-touch-icon-180x180.png b/apps/web/public/apple-touch-icon-180x180.png
diff --git a/apps/web/public/favicon.ico b/apps/web/public/favicon.ico
diff --git a/apps/web/public/maskable-icon-512x512.png b/apps/web/public/maskable-icon-512x512.png
diff --git a/apps/web/public/pwa-192x192.png b/apps/web/public/pwa-192x192.png
diff --git a/apps/web/public/pwa-512x512.png b/apps/web/public/pwa-512x512.png
diff --git a/apps/web/public/pwa-64x64.png b/apps/web/public/pwa-64x64.png
diff --git a/apps/web/public/pwa/screenshot_1_narrow.png b/apps/web/public/pwa/screenshot_1_narrow.png
diff --git a/apps/web/public/pwa/screenshot_1_wide.png b/apps/web/public/pwa/screenshot_1_wide.png
diff --git a/apps/web/public/pwa/screenshot_2_narrow.png b/apps/web/public/pwa/screenshot_2_narrow.png
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
@@ -4,8 +4,59 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import nightwatchPlugin from 'vite-plugin-nightwatch'
-import { ViteFaviconsPlugin } from 'vite-plugin-favicon2'
+// import { ViteFaviconsPlugin } from 'vite-plugin-favicon2'
 import checker from 'vite-plugin-checker'
+import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
+
+const PWAOptions: Partial<VitePWAOptions> = {
+  registerType: 'autoUpdate',
+  workbox: {
+    globPatterns: ['**/*.{js,css,html,ico,png,svg}']
+  },
+  includeAssets: ['favicon.ico', 'apple-touch-icon-180x180.png', 'maskable-icon-512x512.png'],
+  manifest: {
+    name: 'Кухонный калькулятор',
+    short_name: 'Кухонный калькулятор',
+    description: 'Калькулятор рецептов и не только',
+    theme_color: '#ffffff',
+    screenshots: [
+      {
+        src: 'pwa/screenshot_1_wide.png',
+        sizes: "1422x1363",
+        type: "image/png",
+        form_factor:"wide",
+        label: "Основной интерфейс"
+      },
+      {
+        src: 'pwa/screenshot_1_narrow.png',
+        sizes: "430x932",
+        type: "image/png",
+        form_factor:"narrow",
+        label: "Основной интерфейс"
+      },
+      {
+        src: 'pwa/screenshot_2_narrow.png',
+        sizes: "430x932",
+        type: "image/png",
+        form_factor:"narrow",
+        label: "Окно валидации ошибки =3"
+      },
+    ],
+    icons: [
+      {
+        src: 'pwa-192x192.png',
+        sizes: '192x192',
+        type: 'image/png'
+      },
+      {
+        src: 'pwa-512x512.png',
+        sizes: '512x512',
+        type: 'image/png'
+      }
+    ]
+  }
+}
+
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -14,7 +65,9 @@ export default defineConfig({
     vueJsx(),
     nightwatchPlugin(),
     checker({ typescript: true }),
-    ViteFaviconsPlugin('./public/food_recipe_calculator_icon.png')
+    // ViteFaviconsPlugin('./public/food_recipe_calculator_icon.png'),
+    VitePWA(PWAOptions)
+
   ],
   base: './',
   resolve: {