add caching service worker

.gitignore

@@ -52,3 +52,13 @@ site*/
 
 # venv
 .venv/
+
+# Service Worker
+**/public/workbox-*.js
+**/public/workbox-*.js.map
+**/public/sw.js
+**/public/sw.js.map
+**/public/worker-*.js
+**/public/worker-*.js.map
+**/public/fallback-*.js
+**/public/fallback-*.js.map

next-pwa.config.js

@@ -0,0 +1,13 @@
+const withPWA = require("@ducanh2912/next-pwa").default({
+  dest: "public",
+  // TODO: add option to disable offline mode
+  // disable: typeof settings.offline === "boolean" ? !settings.offline : false,
+  reloadOnOnline: false,
+  fallbacks: {
+    document: "/_offline",
+  },
+  cacheStartUrl: true,
+  dynamicStartUrl: false,
+});
+
+module.exports.withPWA = withPWA;

next.config.js

@@ -1,4 +1,5 @@
 const { i18n } = require("./next-i18next.config");
+const { withPWA } = require("./next-pwa.config");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -11,4 +12,4 @@ const nextConfig = {
   i18n,
 };
 
-module.exports = nextConfig;
+module.exports = withPWA(nextConfig);

package.json

@@ -10,6 +10,7 @@
     "telemetry": "next telemetry disable"
   },
   "dependencies": {
+    "@ducanh2912/next-pwa": "^9.7.2",
     "@headlessui/react": "^1.7.2",
     "@kubernetes/client-node": "^0.17.1",
     "cal-parser": "^1.0.2",

src/pages/_app.jsx

@@ -24,7 +24,7 @@ function MyApp({ Component, pageProps }) {
         {/* https://nextjs.org/docs/messages/no-document-viewport-meta */}
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover"
         />
       </Head>
       <ColorProvider>

src/utils/hooks/offline.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+export default function useOffline() {
+  const [isOffline, setOffline] = useState();
+
+  useEffect(() => {
+    setOffline(!window.navigator.onLine);
+
+    function handleOfflineChange() {
+      setOffline(!window.navigator.onLine);
+    }
+
+    window.addEventListener("online", handleOfflineChange);
+    window.addEventListener("offline", handleOfflineChange);
+
+    return () => {
+      window.removeEventListener("online", handleOfflineChange);
+      window.removeEventListener("offline", handleOfflineChange);
+    };
+  }, []);
+
+  return {
+    isOffline,
+  };
+}

worker/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-underscore-dangle,no-restricted-globals
+self.__WB_DISABLE_DEV_LOGS = true;