rayanfer32 · shrivatsabhat · Feb 7, 2022 · Feb 8, 2022 · Feb 12, 2022 · Feb 15, 2022
@@ -43,6 +43,7 @@ yarn-error.log*
 
 # PWA files
 **/public/sw.js
+**/public/fallback-*.js
 **/public/workbox-*.js
 **/public/worker-*.js
 **/public/sw.js.map

@@ -1,8 +1,19 @@
 const path = require('path');
 
-module.exports = {
+const withPWA = require('next-pwa');
+
+module.exports = withPWA({
   reactStrictMode: true,
   sassOptions: {
     includePaths: [path.join(__dirname, 'src', 'styles')],
   },
-};
+  pwa: {
+    dest: 'public',
+    register: true,
+    skipWaiting: true,
+    fallbacks: {
+      image: '/wifi-strike.svg'
+    },
+    disable: process.env.NODE_ENV === 'development',
+  }
+})
@@ -21,6 +21,7 @@
     "http-proxy-middleware": "^2.0.6",
     "js-cookie": "^3.0.1",
     "next": "12.3.0",
+    "next-pwa": "^5.5.2",
     "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-apexcharts": "^1.4.0",
@@ -52,4 +53,4 @@
       "prettier --write --ignore-unknown"
     ]
   }
-}
+}
@@ -0,0 +1,34 @@
+{
+  "name": "Nexus Explorer",
+  "short_name": "Nexplorer",
+  "description": "Nexus Blockchain Explorer V2",
+  "lang": "en-IN",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary",
+  "theme_color": "#0ca4fb",
+  "background_color": "#012235",
+  "icons": [
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
@@ -0,0 +1,17 @@
+.fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 50vh;
+  flex-wrap: wrap;
+  color: var(--theme-page-text);
+  h1 {
+    font-size: var(--font-xxxl, black);
+    margin-bottom: var(--space-xl, 1rem);
+  }
+  small {
+    color: var(--theme-page-text-secondary, grey);
+    opacity: 0.6;
+  }
+}
@@ -0,0 +1,17 @@
+import Image from 'next/image';
+import styles from './fallback.module.scss';
+
+export const Fallback = () => {
+  return (
+    <section className={styles.fallback}>
+      <Image
+        src={'/wifi-strike.svg'}
+        alt="No Internet"
+        width={150}
+        height={150}
+      />
+      <h1>Whoops!!</h1>
+      <small>There seems to be problem with your network connection.</small>
+    </section>
+  );
+};
@@ -11,8 +11,74 @@ class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
+          <link rel="manifest" href="/manifest.json" />
           <link rel="icon" href="/favicon.svg" />
-          <meta name="theme-color" content={TYPES.COLORS.OCEAN_BLUE} />
+          <meta name="theme-color" content={TYPES.COLORS.NEXUS_BLUE} />
+          <meta
+            name="apple-mobile-web-app-status-bar-style"
+            content={TYPES.COLORS.NEXUS_BLUE}
+          />
+          <meta
+            name="msapplication-navbutton-color"
+            content={TYPES.COLORS.NEXUS_BLUE}
+          />
+          <meta name="mobile-web-app-capable" content="yes" />
+          <meta name="apple-mobile-web-app-capable" content="yes" />
+          <meta name="application-name" content="Nexplorer" />
+          <meta name="apple-mobile-web-app-title" content="Nexplorer" />
+          <meta name="msapplication-starturl" content="/" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="192x192"
+            href="/icon-192x192.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            type="image/png"
+            sizes="192x192"
+            href="/icon-192x192.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="256x256"
+            href="/icon-256x256.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            type="image/png"
+            sizes="256x256"
+            href="/icon-256x256.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="384x384"
+            href="/icon-384x384.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            type="image/png"
+            sizes="384x384"
+            href="/icon-384x384.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="512x512"
+            href="/icon-512x512.png"
+          />
+          <link
+            rel="apple-touch-icon"
+            type="image/png"
+            sizes="512x512"
+            href="/icon-512x512.png"
+          />
         </Head>
         <body className={TYPES.THEME.LIGHT}>
           <Main />

@@ -0,0 +1,13 @@
+import { Fallback } from 'components/Views/Fallback';
+import PageHeader from 'components/Header/PageHeader';
+
+const fallback = () => {
+  return (
+    <>
+      <PageHeader />
+      <Fallback />
+    </>
+  );
+};
+
+export default fallback;