gridaco · softmarshmallow · Nov 4, 2022 · Aug 3, 2022 · Nov 4, 2022 · Nov 4, 2022
diff --git a/editor/.gitignore b/editor/.gitignore
@@ -32,3 +32,8 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# pwa
+public/sw.js
+public/workbox*.js
+public/fallback*.js
diff --git a/editor/next.config.js b/editor/next.config.js
@@ -1,4 +1,6 @@
-const TerserPlugin = require("terser-webpack-plugin");
+const IS_DEV = process.env.NODE_ENV === "development";
+
+const withPlugins = require("next-compose-plugins");
 const withTM = require("next-transpile-modules")([
   // region @editor-app
   "@editor-app/live-session",
@@ -58,49 +60,52 @@ const withTM = require("next-transpile-modules")([
   // -----------------------------
 ]);
 
-module.exports = withTM({
-  webpack: (config) => {
-    config.module.rules.push({
-      type: "javascript/auto",
-      test: /\.mjs$/,
-      include: /node_modules/,
-    });
-
-    config.resolve.fallback = {
-      fs: false, // used by handlebars
-      path: false, // used by handlebars
-      crypto: false, // or crypto-browserify (used for totp auth)
-      stream: false, // or stream-browserify (used for totp auth)
-    };
-
-    // -----------------------------
-    // for @flutter-builder classname issue
-    config.optimization.minimizer.push(
-      new TerserPlugin({
-        parallel: true,
-        terserOptions: {
-          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-          keep_classnames: true,
-        },
-      })
-    );
-    // -----------------------------
-
-    return config;
+const withPWA = require("next-pwa")({
+  register: true,
+  dest: "public",
+  disable: IS_DEV,
+  fallbacks: {
+    image: "/images/fallback.png",
+    document: "/_offline",
   },
-  async redirects() {
-    return [
-      {
-        // typo gaurd
-        source: "/preference",
-        destination: "/preferences",
-        permanent: true,
-      },
+});
+
+module.exports = withPlugins(
+  [
+    [withTM],
+    [
+      withPWA,
       {
-        source: "/files/:key/:id",
-        destination: "/files/:key?node=:id",
-        permanent: false,
+        pwa: {
+          dest: "public",
+          // swSrc: "sw.js",
+        },
       },
-    ];
-  },
-});
+    ],
+  ],
+  {
+    webpack: (config) => {
+      config.resolve.fallback = {
+        fs: false, // used by handlebars
+        path: false, // used by handlebars
+      };
+
+      return config;
+    },
+    async redirects() {
+      return [
+        {
+          // typo gaurd
+          source: "/preference",
+          destination: "/preferences",
+          permanent: true,
+        },
+        {
+          source: "/files/:key/:id",
+          destination: "/files/:key?node=:id",
+          permanent: false,
+        },
+      ];
+    },
+  }
+);
diff --git a/editor/package.json b/editor/package.json
@@ -44,6 +44,7 @@
     "moment": "^2.29.1",
     "monaco-editor": "^0.33.0",
     "next": "^12.1.4",
+    "next-pwa": "^5.6.0",
     "pouchdb-adapter-idb": "^7.2.2",
     "re-resizable": "^6.9.1",
     "react": "^18.2.0",
@@ -72,6 +73,7 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "css-loader": "^5.2.4",
     "next-transpile-modules": "^9.0.0",
+    "next-compose-plugins": "^2.2.1",
     "raw-loader": "^4.0.2",
     "typescript": "^4.2.3"
   }

diff --git a/editor/pages/_app.tsx b/editor/pages/_app.tsx
@@ -32,18 +32,6 @@ function HeadInjection() {
       <meta property="title" content="Design to Codes" />
       <meta property="description" content="Design to Codes description" />
 
-      {/* safari 15 color */}
-      <meta
-        name="theme-color"
-        content="white"
-        media="(prefers-color-scheme: light)"
-      />
-      <meta
-        name="theme-color"
-        content={colors.color_editor_bg_on_dark}
-        media="(prefers-color-scheme: dark)"
-      />
-
       {/* disable zoom */}
       <meta
         name="viewport"

diff --git a/editor/pages/_document.tsx b/editor/pages/_document.tsx
@@ -1,13 +1,46 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import { colors } from "theme";
 
 export default function Document() {
   return (
     <Html>
       <Head>
+        {/* PWA manifest */}
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="application-name" content="PWA App" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <meta name="apple-mobile-web-app-title" content="PWA App" />
+        <meta name="description" content="Best PWA App in the world" />
+        <meta name="format-detection" content="telephone=no" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="msapplication-config" content="/icons/browserconfig.xml" />
+        <meta name="msapplication-TileColor" content="#2B5797" />
+        <meta name="msapplication-tap-highlight" content="no" />
+
+        {/* region Font */}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          crossOrigin=""
+        />
+        {/* (en) Nanum Pen Script (+ ko), Roboto Mono, Inter */}
         <link
-          href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Nanum+Pen+Script&family=Roboto+Mono:wght@400;500;600;700&display=swap"
           rel="stylesheet"
-          type="text/css"
+        />
+
+        {/* safari 15 color */}
+        <meta
+          name="theme-color"
+          content="white"
+          media="(prefers-color-scheme: light)"
+        />
+        <meta
+          name="theme-color"
+          content={colors.color_editor_bg_on_dark}
+          media="(prefers-color-scheme: dark)"
         />
       </Head>
       <body>

diff --git a/editor/pages/_offline.tsx b/editor/pages/_offline.tsx
@@ -0,0 +1,7 @@
+/// https://www.npmjs.com/package/next-pwa
+/// offline fallback
+
+import React from "react";
+export default function PWAOfflineFallbackPage() {
+  return <></>;
+}
diff --git a/editor/public/icons/icon-192x192.png b/editor/public/icons/icon-192x192.png
diff --git a/editor/public/icons/icon-256x256.png b/editor/public/icons/icon-256x256.png
diff --git a/editor/public/icons/icon-384x384.png b/editor/public/icons/icon-384x384.png
diff --git a/editor/public/icons/icon-512x512.png b/editor/public/icons/icon-512x512.png
diff --git a/editor/public/images/fallback.png b/editor/public/images/fallback.png
diff --git a/editor/public/manifest.json b/editor/public/manifest.json
@@ -0,0 +1,33 @@
+{
+    "theme_color": "#000000",
+    "background_color": "#000000",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "/",
+    "orientation": "portrait",
+    "id": "code.grida.co",
+    "name": "Grida Code",
+    "short_name": "Code",
+    "icons": [
+        {
+            "src": "/icons/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/icon-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/icon-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}