Feature : Next-PWA 설치 및 설정

.gitignore

@@ -4,4 +4,8 @@
 /.next/
 /build
 .DS_Store
-.env
+.env
+
+# Next-PWA
+public/sw.js
+public/workbox-*.js

next.config.js

@@ -1,9 +1,18 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const withPWA = require('next-pwa');
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const config = {
   reactStrictMode: true,
-  images: {
+  configurationimages: {
     domains: ['posepicker-image.s3.ap-northeast-2.amazonaws.com'],
   },
 };
 
+const nextConfig = withPWA({
+  dest: 'public',
+  // disable: !isProduction,
+  runtimeCaching: [],
+})(config);
+
 module.exports = nextConfig;

package.json

@@ -39,6 +39,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.33.1",
     "husky": "^8.0.3",
+    "next-pwa": "^5.6.0",
     "postcss": "^8.4.27",
     "prettier": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.4.1",

public/manifest.json

@@ -0,0 +1,65 @@
+{
+  "name": "PosePicker",
+  "short_name": "PosePicker",
+  "theme_color": "#1976d2",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/pwa-icons/icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/pwa-icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/pwa-icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/pwa-icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/pwa-icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/pwa-icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/pwa-icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/pwa-icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "/pwa-icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

src/app/layout.tsx

@@ -47,6 +47,8 @@ export const metadata: Metadata = {
   icons: {
     shortcut: '/favicon.ico',
   },
+  manifest: '/manifest.json',
+  themeColor: '#ffffff',
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {