[#19] PWA setting (#32)

- lighthouse통과 Co-authored-by: cloud <[email protected]>
sanghunlee-711 · Oct 23, 2023 · 4620141 · 4620141
1 parent b222317
commit 4620141
Show file tree

Hide file tree

Showing 29 changed files with 2,124 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,10 +8,12 @@
 # testing
 /coverage
 
-# next.js > ec2 내 빌드 시 cpu딸림으로 인해 로컬 빌드 후 푸쉬하는 전략 선택
+# next.js
 /.next/
 /out/
 
+
+
 # production
 /build
 
@@ -34,3 +36,17 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# yarn
+yarn-error.log
+
+# pwa
+**/public/precache.*.*.js
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/fallback-*.js
+**/public/precache.*.*.js.map
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map
+**/public/fallback-*.js
diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+// dev warning : https://github.com/GoogleChrome/workbox/issues/1790
+const prod = process.env.NODE_ENV === 'production';
 
-module.exports = nextConfig
+const withPWA = require('next-pwa')({
+  disable: prod ? false : true,
+  dest: 'public',
+});
+
+module.exports = withPWA;
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "eslint-config-next": "13.4.12",
     "eslint-plugin-testing-library": "^6.0.2",
     "next": "13.4.12",
+    "next-pwa": "^5.6.0",
     "react": "18.2.0",
     "react-day-picker": "^8.8.0",
     "react-dom": "18.2.0",

diff --git a/public/images/favicon-16x16.png b/public/images/favicon-16x16.png
diff --git a/public/images/favicon-32x32.png b/public/images/favicon-32x32.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/muscle-logo.svg → public/images/logo/muscle-logo.svg b/public/muscle-logo.svg → public/images/logo/muscle-logo.svg
diff --git a/public/images/splashscreens/ipad_splash.png b/public/images/splashscreens/ipad_splash.png
diff --git a/public/images/splashscreens/ipadpro1_splash.png b/public/images/splashscreens/ipadpro1_splash.png
diff --git a/public/images/splashscreens/ipadpro2_splash.png b/public/images/splashscreens/ipadpro2_splash.png
diff --git a/public/images/splashscreens/ipadpro3_splash.png b/public/images/splashscreens/ipadpro3_splash.png
diff --git a/public/images/splashscreens/iphone5_splash.png b/public/images/splashscreens/iphone5_splash.png
diff --git a/public/images/splashscreens/iphone6_splash.png b/public/images/splashscreens/iphone6_splash.png
diff --git a/public/images/splashscreens/iphoneplus_splash.png b/public/images/splashscreens/iphoneplus_splash.png
diff --git a/public/images/splashscreens/iphonex_splash.png b/public/images/splashscreens/iphonex_splash.png
diff --git a/public/images/splashscreens/iphonexr_splash.png b/public/images/splashscreens/iphonexr_splash.png
diff --git a/public/images/splashscreens/iphonexsmax_splash.png b/public/images/splashscreens/iphonexsmax_splash.png
diff --git a/public/start-icon.svg → public/images/start-icon.svg b/public/start-icon.svg → public/images/start-icon.svg
diff --git a/public/stop-icon.svg → public/images/stop-icon.svg b/public/stop-icon.svg → public/images/stop-icon.svg
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,38 @@
+{
+  "theme_color": "#fffff",
+  "background_color": "#fffff",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "name": "iron-mate",
+  "short_name": "iron-mate",
+  "description": "webapp for do ironing",
+  "icons": [
+    {
+      "src": "images/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "images/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/components/Timer.tsx b/src/app/components/Timer.tsx
@@ -148,7 +148,12 @@ const Timer: React.FC<ITimerProps> = ({
           role="button"
           type="button"
         >
-          <Image src="/stop-icon.svg" alt="stop" width={12} height={12} />
+          <Image
+            src="/images/stop-icon.svg"
+            alt="stop"
+            width={12}
+            height={12}
+          />
         </button>
       ) : (
         <button
@@ -158,7 +163,12 @@ const Timer: React.FC<ITimerProps> = ({
           role="button"
           type="button"
         >
-          <Image src="/start-icon.svg" alt="start" width={12} height={12} />
+          <Image
+            src="/images/start-icon.svg"
+            alt="start"
+            width={12}
+            height={12}
+          />
         </button>
       )}
     </div>

diff --git a/src/app/components/layout/BasicLayout.tsx b/src/app/components/layout/BasicLayout.tsx
@@ -27,7 +27,7 @@ const BasicLayout: React.FC<PropsWithChildren<{}>> = ({ children }) => {
         <BurgerButton isToggled={isToggle} handleToggle={handleToggle} />
         <Image
           className="icon"
-          src="/muscle-logo.svg"
+          src="/images/logo/muscle-logo.svg"
           alt="logo"
           width={42}
           height={36}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,6 +19,72 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <link rel="manifest" href="/manifest.json" />
+      <link
+        href="images/favicon-16x16.png"
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+      />
+      <link
+        href="images/favicon-32x32.png"
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+      />
+      <link rel="apple-touch-icon" href="images/icon-192x192.png"></link>
+      <meta name="msapplication-TileColor" content="#fffff"></meta>
+      <link
+        href="images/splashscreens/iphone5_splash.png"
+        media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/iphone6_splash.png"
+        media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/iphoneplus_splash.png"
+        media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/iphonex_splash.png"
+        media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/iphonexr_splash.png"
+        media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/iphonexsmax_splash.png"
+        media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/ipad_splash.png"
+        media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/ipadpro1_splash.png"
+        media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/ipadpro3_splash.png"
+        media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)"
+        rel="apple-touch-startup-image"
+      />
+      <link
+        href="images/splashscreens/ipadpro2_splash.png"
+        media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)"
+        rel="apple-touch-startup-image"
+      />
+      <meta name="theme-color" content="#fffff" />
       <body className={inter.className} suppressHydrationWarning={true}>
         <BasicLayout>{children}</BasicLayout>
       </body>