[Feature] #4 PWA Options

package.json

@@ -11,7 +11,8 @@
     "pwa": "pwa-assets-generator --preset minimal public/test.svg",
     "format": "prettier --check --ignore-path .gitignore \"**/*.{ts,tsx}\"",
     "format:fix": "prettier --write --ignore-path .gitignore \"**/*.{ts,tsx}\"",
-    "build-and-test": "npm run build && lhci autorun"
+    "build-and-test": "npm run build && lhci autorun",
+    "gen-pwa": "pwa-assets-generator --preset minimal public/favicon.svg"
   },
   "dependencies": {
     "@emotion/react": "^11.13.5",
@@ -48,9 +49,7 @@
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
-    "@types/ol": "^7.0.0",
-    "@types/react-textarea-autosize": "^8.0.0",
-    "@vite-pwa/assets-generator": "^0.2.4",
+    "@vite-pwa/assets-generator": "^0.2.6",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^8.57.0",

src/pages/SocialPage/components/ChatItem/index.tsx

@@ -32,9 +32,11 @@ export default function ChatItem({ lastMessage, members, name, unreadMessageCoun
         </S.UserInfoWrapper>
         {lastMessage}
       </S.TypoWrapper>
-      <UnreadChatCount>
-        <Typo11>{unreadMessageCount}</Typo11>
-      </UnreadChatCount>
+      {unreadMessageCount ? (
+        <UnreadChatCount>
+          <Typo11>{unreadMessageCount}</Typo11>
+        </UnreadChatCount>
+      ) : null}
     </S.ChatItem>
   )
 }

vite.config.ts

@@ -41,7 +41,7 @@ export default defineConfig(({ mode }) => {
         strategies: 'injectManifest',
         srcDir: 'src',
         filename: 'sw.ts',
-        registerType: 'prompt',
+        registerType: 'autoUpdate',
         injectRegister: false,
 
         pwaAssets: {
@@ -52,10 +52,44 @@ export default defineConfig(({ mode }) => {
         manifest: {
           name: 'DDang',
           short_name: 'DDang',
+          start_url: '/',
           description: '반려견 산책 서비스',
-          theme_color: '#ffffff',
+          theme_color: '#783D16', //?
+          background_color: '#783D16', //?
+          display: 'standalone',
+          categories: ['lifestyle', 'pets'],
+          icons: [
+            {
+              src: '/icons/pwa-192x192.png',
+              sizes: '192x192',
+              type: 'image/png',
+            },
+            {
+              src: '/icons/pwa-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+            },
+            {
+              src: '/icons/maskable-icon-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'maskable',
+            },
+            {
+              src: '/icons/apple-touch-icon-180x180.png',
+              sizes: '180x180',
+              type: 'image/png',
+              purpose: 'apple touch icon',
+            },
+            {
+              src: '/icons/pwa-64x64.png',
+              sizes: '64x64',
+              type: 'image/png',
+            },
+          ],
         },
 
+        useCredentials: true,
         injectManifest: {
           globPatterns: ['**/*.{js,css,html,svg,png,ico}'],
         },