build: pwa setting

manifest.json

@@ -0,0 +1,25 @@
+{
+  "background_color": "#ffffff",
+  "description": "카공 및 친목 동아리",
+  "dir": "ltr",
+  "display": "standalone",
+  "name": "ABOUT",
+  "orientation": "any",
+  "scope": "/",
+  "short_name": "ABOUT",
+  "start_url": "https://studyabout.herokuapp.com/",
+  "theme_color": "#ffffff",
+  "icons": [
+    {
+      "src": "/ogImage.png",
+      "type": "image/png",
+      "sizes": "977x498"
+    },
+    {
+      "src": "/favicon.ico",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "lang": "ko"
+}

pageTemplates/layout/BaseScript.tsx

@@ -10,7 +10,12 @@ function BaseScript() {
         strategy="afterInteractive"
       />
       <Script src="https://kit.fontawesome.com/4071928605.js" crossOrigin="anonymous" />
-      <Script src="https://developers.kakao.com/sdk/js/kakao.js" strategy="lazyOnload" />
+      <Script src="https://developers.kakao.com/sdk/js/kakao.js" strategy="lazyOnload" />{" "}
+      <Script
+        src="https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate"
+        type="module"
+        strategy="afterInteractive"
+      />
     </>
   );
 }

pageTemplates/layout/Layout.tsx

@@ -2,8 +2,8 @@
 import { config } from "@fortawesome/fontawesome-svg-core";
 import { GoogleAnalytics } from "@next/third-parties/google";
 import axios from "axios";
-import { usePathname, useRouter } from "next/navigation";
 import { signOut, useSession } from "next-auth/react";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useSetRecoilState } from "recoil";
 

pages/_document.tsx

@@ -44,6 +44,7 @@ export default class MyDocument extends Document {
           <meta property="og:image" content="/ogImage.png" />
           <meta property="og:locale" content="ko_KR" />
           <meta property="og:site_name" content="https://studyabout.herokuapp.com" />
+          <link rel="manifest" href="manifest.json" />
           <meta charSet="utf-8" key="charset" />{" "}
           <Script src="https://kit.fontawesome.com/4071928605.js" crossOrigin="anonymous"></Script>
         </Head>

pages/offline.tsx

@@ -0,0 +1,5 @@
+function Offline() {
+  return <>오프라인 연결 안됨</>;
+}
+
+export default Offline;

pwabuilder-sw.js

@@ -0,0 +1,52 @@
+// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
+
+const CACHE = "pwabuilder-offline-page";
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js");
+
+// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
+const offlineFallbackPage = "offline.tsx";
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener("install", async (event) => {
+  event.waitUntil(caches.open(CACHE).then((cache) => cache.add(offlineFallbackPage)));
+});
+
+if (workbox.navigationPreload.isSupported()) {
+  workbox.navigationPreload.enable();
+}
+
+workbox.routing.registerRoute(
+  new RegExp("/*"),
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: CACHE,
+  }),
+);
+
+self.addEventListener("fetch", (event) => {
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          const preloadResp = await event.preloadResponse;
+
+          if (preloadResp) {
+            return preloadResp;
+          }
+
+          const networkResp = await fetch(event.request);
+          return networkResp;
+        } catch (error) {
+          const cache = await caches.open(CACHE);
+          const cachedResp = await cache.match(offlineFallbackPage);
+          return cachedResp;
+        }
+      })(),
+    );
+  }
+});