[#619] PWA 구현 (#621)

* feat: manifest 작성 * feat: PWAServiceWorker 작성 * chore: gitignore 추가 * chore: icon 이미지 추가 * chore: appleSplashScreen 이미지 추가 * feat: appleSplashScreen 적용 * feat: 메타데이터 추가 및 수정 * chore: manifest 불필요한 옵션 제거 * chore: 중복되는 meta태그 제거 * fix: 최상단 상태바 버그 수정 * feat: pwa환경 수직 패딩값 추가 * feat: pwa에서 bottomNavigation pb값 추가 및 statusBarStyle 속성 제거 * fix: BottomNavigation 고정 height값 제거 * feat: pb-safe 속성 추가 * fix: apple-touch-icon 아이콘 버그 수정 * fix: BottomNavigation 비정상적으로 보이던 문제 해결 * fix: 컴포넌트들의 position이 동적으로 바뀌도록 수정 * chore: import문 절대경로로 수정 * chore: 불필요한 className 제거
prgrms-web-devcourse · Jun 17, 2024 · 587f990 · 587f990
1 parent 70af27a
commit 587f990
Show file tree

Hide file tree

Showing 55 changed files with 345 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -34,3 +34,12 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# auto generated pwa files
+# Auto Generated PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map
diff --git a/public/images/icon-128x128.png b/public/images/icon-128x128.png
diff --git a/public/images/icon-192x192.png b/public/images/icon-192x192.png
diff --git a/public/images/icon-256x256.png b/public/images/icon-256x256.png
diff --git a/public/images/icon-384x384.png b/public/images/icon-384x384.png
diff --git a/public/images/icon-512x512.png b/public/images/icon-512x512.png
diff --git a/public/images/splash-screens/10.2__iPad_landscape.png b/public/images/splash-screens/10.2__iPad_landscape.png
diff --git a/public/images/splash-screens/10.2__iPad_portrait.png b/public/images/splash-screens/10.2__iPad_portrait.png
diff --git a/public/images/splash-screens/10.5__iPad_Air_landscape.png b/public/images/splash-screens/10.5__iPad_Air_landscape.png
diff --git a/public/images/splash-screens/10.5__iPad_Air_portrait.png b/public/images/splash-screens/10.5__iPad_Air_portrait.png
diff --git a/public/images/splash-screens/10.9__iPad_Air_landscape.png b/public/images/splash-screens/10.9__iPad_Air_landscape.png
diff --git a/public/images/splash-screens/10.9__iPad_Air_portrait.png b/public/images/splash-screens/10.9__iPad_Air_portrait.png
diff --git a/public/images/splash-screens/11__iPad_Pro_M4_landscape.png b/public/images/splash-screens/11__iPad_Pro_M4_landscape.png
diff --git a/public/images/splash-screens/11__iPad_Pro_M4_portrait.png b/public/images/splash-screens/11__iPad_Pro_M4_portrait.png
diff --git a/public/images/splash-screens/11__iPad_Pro__10.5__iPad_Pro_landscape.png b/public/images/splash-screens/11__iPad_Pro__10.5__iPad_Pro_landscape.png
diff --git a/public/images/splash-screens/11__iPad_Pro__10.5__iPad_Pro_portrait.png b/public/images/splash-screens/11__iPad_Pro__10.5__iPad_Pro_portrait.png
diff --git a/public/images/splash-screens/12.9__iPad_Pro_landscape.png b/public/images/splash-screens/12.9__iPad_Pro_landscape.png
diff --git a/public/images/splash-screens/12.9__iPad_Pro_portrait.png b/public/images/splash-screens/12.9__iPad_Pro_portrait.png
diff --git a/public/images/splash-screens/13__iPad_Pro_M4_landscape.png b/public/images/splash-screens/13__iPad_Pro_M4_landscape.png
diff --git a/public/images/splash-screens/13__iPad_Pro_M4_portrait.png b/public/images/splash-screens/13__iPad_Pro_M4_portrait.png
diff --git a/.../splash-screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png b/.../splash-screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png
diff --git a/...s/splash-screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png b/...s/splash-screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png
diff --git a/public/images/splash-screens/8.3__iPad_Mini_landscape.png b/public/images/splash-screens/8.3__iPad_Mini_landscape.png
diff --git a/public/images/splash-screens/8.3__iPad_Mini_portrait.png b/public/images/splash-screens/8.3__iPad_Mini_portrait.png
diff --git a/...h-screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png b/...h-screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png
diff --git a/...sh-screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png b/...sh-screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png
diff --git a/public/images/splash-screens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png b/public/images/splash-screens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png
diff --git a/public/images/splash-screens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png b/public/images/splash-screens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png
diff --git a/public/images/splash-screens/iPhone_11__iPhone_XR_landscape.png b/public/images/splash-screens/iPhone_11__iPhone_XR_landscape.png
diff --git a/public/images/splash-screens/iPhone_11__iPhone_XR_portrait.png b/public/images/splash-screens/iPhone_11__iPhone_XR_portrait.png
diff --git a/...Phone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png b/...Phone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png
diff --git a/...iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png b/...iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png
diff --git a/...lash-screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png b/...lash-screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png
diff --git a/...plash-screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png b/...plash-screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png
diff --git a/...ens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png b/...ens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png
diff --git a/...eens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png b/...eens/iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png
diff --git a/...lash-screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png b/...lash-screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png
diff --git a/...plash-screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png b/...plash-screens/iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png
diff --git a/public/images/splash-screens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png b/public/images/splash-screens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png
diff --git a/public/images/splash-screens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png b/public/images/splash-screens/iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png
diff --git a/...reens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png b/...reens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png
diff --git a/...creens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png b/...creens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png
diff --git a/...h-screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png b/...h-screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png
diff --git a/...sh-screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png b/...sh-screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png
diff --git a/public/pwaServiceWorker.js b/public/pwaServiceWorker.js
@@ -0,0 +1,7 @@
+self.addEventListener('install', () => {
+  console.log('Service worker installed');
+});
+
+self.addEventListener('activate', () => {
+  console.log('Service worker activated');
+});
diff --git a/src/app/group/page.tsx b/src/app/group/page.tsx
@@ -45,7 +45,7 @@ const GroupPage = () => {
   };
 
   const FLOATING_BUTTON_POSITION =
-    'bottom-[8.3rem] right-[1.7rem] desktop:right-1/2 desktop:translate-x-[19.8rem]';
+    'bottom-[calc(env(safe-area-inset-bottom)+8.3rem)] right-[1.7rem] desktop:right-1/2 desktop:translate-x-[19.8rem]';
 
   return (
     <>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,6 @@
-import { Metadata } from 'next';
+import type { Metadata } from 'next';
+
+import { appleSplashScreens } from '@/constants/metadata';
 
 import ContextProvider from '@/components/ContextProvider';
 import AuthFailedErrorBoundary from '@/components/AuthFailedErrorBoundary';
@@ -14,6 +16,7 @@ export const metadata: Metadata = {
     default: '다독다독',
   },
   description: '책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼',
+  themeColor: '#FFFFFF',
   keywords: [
     '다독다독',
     'dadok',
@@ -25,25 +28,27 @@ export const metadata: Metadata = {
     '책',
     '독서',
   ],
+  viewport:
+    'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover',
   verification: {
     google: '72kN3MWyQHuvSb8V67dVkfPUPMrw102Tm6BsvTvfKmg',
     other: {
       'naver-site-verification': '9046af5eda448309a92e2e923a45cb874df986a0',
     },
   },
+  icons: [
+    { rel: 'apple-touch-icon', url: 'images/icon-192x192.png' },
+    { rel: 'icon', url: 'favicon.ico' },
+  ],
+  appleWebApp: {
+    title: '다독다독',
+    startupImage: appleSplashScreens,
+  },
 };
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="ko">
-      <head>
-        <meta
-          content="width=device-width, initial-scale=1, maximum-scale=1"
-          name="viewport"
-        />
-        <meta charSet="UTF-8" />
-        <link rel="icon" href="/favicon.ico" />
-      </head>
       {/* @todo Chakra 제거시 app-layout 프로퍼티 제거. */}
       <body className={`${LineSeedKR.variable} app-layout font-lineseed`}>
         <Layout>

diff --git a/src/app/manifest.webmanifest b/src/app/manifest.webmanifest
@@ -0,0 +1,36 @@
+{
+  "name": "다독다독",
+  "short_name": "다독다독",
+  "description": "책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼",
+  "theme_color": "#FFA436",
+  "background_color": "#FFFFFF",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "images/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "images/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "images/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "images/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
diff --git a/src/components/ContextProvider.tsx b/src/components/ContextProvider.tsx
@@ -3,19 +3,23 @@
 import { ReactNode } from 'react';
 import { RecoilRoot } from 'recoil';
 
+import PWAServiceWorkerProvider from '@/components/PWAServiceWorkerProvider';
 import ChakraThemeProvider from '@/components/ChakraThemeProvider';
 import ReactQueryProvider from '@/components/ReactQueryProvider';
+
 import ToastProvider from '@/v1/base/Toast/ToastProvider';
 
 const ContextProvider = ({ children }: { children: ReactNode }) => {
   return (
-    <RecoilRoot>
-      <ReactQueryProvider>
-        <ChakraThemeProvider>
-          <ToastProvider>{children}</ToastProvider>
-        </ChakraThemeProvider>
-      </ReactQueryProvider>
-    </RecoilRoot>
+    <PWAServiceWorkerProvider>
+      <RecoilRoot>
+        <ReactQueryProvider>
+          <ChakraThemeProvider>
+            <ToastProvider>{children}</ToastProvider>
+          </ChakraThemeProvider>
+        </ReactQueryProvider>
+      </RecoilRoot>
+    </PWAServiceWorkerProvider>
   );
 };
 

diff --git a/src/components/PWAServiceWorkerProvider.tsx b/src/components/PWAServiceWorkerProvider.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect } from 'react';
+
+const PWAServiceWorkerProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      const registerWorker = async () => {
+        const registration = await navigator.serviceWorker.register(
+          '/pwaServiceWorker.js'
+        );
+        registration.waiting?.postMessage('SKIP_WAITING');
+      };
+
+      try {
+        registerWorker();
+        console.log('register success!');
+      } catch (error) {
+        console.error('register failed: ', error);
+      }
+    }
+  }, []);
+
+  return <>{children}</>;
+};
+
+export default PWAServiceWorkerProvider;