Merge pull request #508 from LEEJW1953/fe-pwa

[Feat] pwa 세팅
boostcampwm2023 · Jan 28, 2024 · 721c8b0 · 721c8b0
2 parents 897f78f + 4c37649
commit 721c8b0
Show file tree

Hide file tree

Showing 9 changed files with 2,338 additions and 148 deletions.
diff --git a/app/frontend/index.html b/app/frontend/index.html
@@ -16,6 +16,7 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css"
     />
+    <link rel="manifest" href="manifest.json" />
     <title>morak</title>
     <meta
       name="description"
@@ -30,6 +31,7 @@
       content="함께라서 더 빛나는 코드의 세계, 모락과 함께하세요"
     />
     <meta name="og:image" content="/morak-meta-image.png" />
+    <meta name="theme-color" content="#1FAB70" />
   </head>
 
   <body>

diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -72,6 +72,7 @@
     "msw": "^2.0.8",
     "prettier": "^3.0.3",
     "vite": "^4.4.5",
+    "vite-plugin-pwa": "^0.17.5",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^0.34.6"
   }

diff --git a/app/frontend/public/manifest.json b/app/frontend/public/manifest.json
@@ -0,0 +1,37 @@
+{
+  "theme_color": "#1FAB70",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "start_url": "/",
+  "name": "morak",
+  "short_name": "morak",
+  "icons": [
+    {
+      "src": "/morak-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/morak-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/morak-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/morak-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/morak-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}
diff --git a/app/frontend/public/morak-192x192.png b/app/frontend/public/morak-192x192.png
diff --git a/app/frontend/public/morak-256x256.png b/app/frontend/public/morak-256x256.png
diff --git a/app/frontend/public/morak-384x384.png b/app/frontend/public/morak-384x384.png
diff --git a/app/frontend/public/morak-512x512.png b/app/frontend/public/morak-512x512.png
diff --git a/app/frontend/vite.config.ts b/app/frontend/vite.config.ts
@@ -4,11 +4,17 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 /// <reference types="vite-plugin-svgr/client" />
 import svgr from 'vite-plugin-svgr';
 import path from 'path';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 
 export default defineConfig({
-  plugins: [react(), vanillaExtractPlugin(), svgr()],
+  plugins: [
+    react(),
+    vanillaExtractPlugin(),
+    svgr(),
+    VitePWA({ registerType: 'autoUpdate' }),
+  ],
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
     extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.css.ts'],