gita · Gupta-Anubhav12 · Jun 18, 2022
diff --git a/.gitignore b/.gitignore
@@ -32,3 +32,8 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+**/public/workbox-*.js
+**/public/sw.js
+**/public/worker-*.js
+**/public/fallback-*.js
diff --git a/next.config.js b/next.config.js
@@ -1,9 +1,20 @@
-module.exports = {
+const withPWA = require('next-pwa')
+
+module.exports = withPWA({
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
       use: ["@svgr/webpack"],
     });
     return config;
   },
-};
+  // reactStrictMode:true,
+  pwa: {
+    dest: 'public',
+    register: true,
+    skipWaiting: true,
+    swSrc: 'service-worker.js',
+  }
+});
+
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@svgr/cli": "^6.1.1",
     "graphql": "^16.0.1",
     "next": "latest",
+    "next-pwa": "^5.5.4",
     "next-redux-wrapper": "^7.0.5",
     "next-themes": "^0.0.15",
     "react": "^17.0.2",
@@ -23,7 +24,8 @@
     "react-redux": "^7.2.5",
     "redux": "^4.1.1",
     "redux-devtools-extension": "^2.13.9",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "sharp": "^0.30.6"
   },
   "devDependencies": {
     "autoprefixer": "^10.2.6",

diff --git a/pages/_document.js b/pages/_document.js
@@ -10,6 +10,7 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
+          <link rel="manifest" href="/manifest.json"/>
           <link
             rel="apple-touch-icon"
             sizes="180x180"
@@ -27,7 +28,7 @@ class MyDocument extends Document {
             sizes="16x16"
             href="/favicon/favicon-16x16.png"
           />
-          <link rel="manifest" href="/favicon/site.webmanifest" />
+          {/* <link rel="manifest" href="/favicon/site.webmanifest" /> */}
           <link
             rel="mask-icon"
             href="/favicon/safari-pinned-tab.svg"
@@ -47,3 +48,4 @@ class MyDocument extends Document {
 }
 
 export default MyDocument;
+
diff --git a/pages/fallback.js b/pages/fallback.js
@@ -0,0 +1,35 @@
+import React from "react";
+import HomeLayout from "../layouts/HomeLayout";
+import Head from "next/head";
+import AboutBanner from "../components/Shared/AboutBanner";
+import Image from "next/image";
+
+export default function Fallback() {
+  return (
+    <div>
+      <Head>
+        <title>No Internet</title>
+      </Head>
+      <div className="text-center">
+      <Image
+          src="/fallback.jpeg"
+          alt="BG Home Banner Image"
+          height="500"
+          width="1100"
+          className="xl:rounded-lg block m-auto"
+          priority
+        />
+      </div>
+      <div className="text-center max-w-5xl font-inter py-12 mx-auto  px-4 sm:px-6">
+        <h1 className="mt-8 text-xl  ">
+          It seems your internet connection is broken,
+          Please come back with active internet connection 
+        </h1>
+      </div>
+    </div>
+  );
+}
+
+Fallback.getLayout = function getLayout(page) {
+  return <HomeLayout>{page}</HomeLayout>;
+};
diff --git a/public/fallback.jpeg b/public/fallback.jpeg
diff --git a/public/icon-192x192.png b/public/icon-192x192.png
diff --git a/public/icon-256x256.png b/public/icon-256x256.png
diff --git a/public/icon-384x384.png b/public/icon-384x384.png
diff --git a/public/icon-512x512.png b/public/icon-512x512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,32 @@
+{
+    "theme_color": "#f69435",
+    "background_color": "#f69435",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "/",
+    "name": "Bhagavad Gita",
+    "short_name": "Gita",
+    "description": "A non-profit initiative to help spread the transcendental wisdom from the Bhagavad Gita to people around the world.",
+    "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"
+        }
+    ]
+}
diff --git a/service-worker.js b/service-worker.js
@@ -0,0 +1,189 @@
+
+import { skipWaiting, clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { NetworkOnly, NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
+import { registerRoute, setDefaultHandler, setCatchHandler } from 'workbox-routing';
+import { matchPrecache, precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
+
+skipWaiting();
+clientsClaim();
+
+// must include following lines when using inject manifest module from workbox
+// https://developers.google.com/web/tools/workbox/guides/precache-files/workbox-build#add_an_injection_point
+const WB_MANIFEST = self.__WB_MANIFEST;
+// Precache fallback route and image
+WB_MANIFEST.push({
+  url: '/fallback',
+  revision: '1234567890',
+});
+precacheAndRoute(WB_MANIFEST);
+
+cleanupOutdatedCaches();
+registerRoute(
+  '/',
+  new NetworkFirst({
+    cacheName: 'start-url',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 1,
+        maxAgeSeconds: 86400,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+registerRoute(
+  /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
+  new CacheFirst({
+    cacheName: 'google-fonts',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 4,
+        maxAgeSeconds: 31536e3,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+registerRoute(
+  /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
+  new StaleWhileRevalidate({
+    cacheName: 'static-font-assets',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 4,
+        maxAgeSeconds: 604800,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+// disable image cache, so we could observe the placeholder image when offline
+registerRoute(
+  /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+  new NetworkOnly({
+    cacheName: 'static-image-assets',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 64,
+        maxAgeSeconds: 86400,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+registerRoute(
+  /\.(?:js)$/i,
+  new StaleWhileRevalidate({
+    cacheName: 'static-js-assets',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 32,
+        maxAgeSeconds: 86400,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+registerRoute(
+  /\.(?:css|less)$/i,
+  new StaleWhileRevalidate({
+    cacheName: 'static-style-assets',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 32,
+        maxAgeSeconds: 86400,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+registerRoute(
+  /\.(?:json|xml|csv)$/i,
+  new NetworkFirst({
+    cacheName: 'static-data-assets',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 32,
+        maxAgeSeconds: 86400,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+registerRoute(
+  /\/api\/.*$/i,
+  new NetworkFirst({
+    cacheName: 'apis',
+    networkTimeoutSeconds: 10,
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 16,
+        maxAgeSeconds: 86400,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+registerRoute(
+  /.*/i,
+  new NetworkFirst({
+    cacheName: 'others',
+    networkTimeoutSeconds: 10,
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 32,
+        maxAgeSeconds: 86400,
+        purgeOnQuotaError: !0,
+      }),
+    ],
+  }),
+  'GET'
+);
+
+// following lines gives you control of the offline fallback strategies
+// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks
+
+// Use a stale-while-revalidate strategy for all other requests.
+setDefaultHandler(new StaleWhileRevalidate());
+
+// This "catch" handler is triggered when any of the other routes fail to
+// generate a response.
+setCatchHandler(({ event }) => {
+  // The FALLBACK_URL entries must be added to the cache ahead of time, either
+  // via runtime or precaching. If they are precached, then call
+  // `matchPrecache(FALLBACK_URL)` (from the `workbox-precaching` package)
+  // to get the response from the correct cache.
+  //
+  // Use event, request, and url to figure out how to respond.
+  // One approach would be to use request.destination, see
+  // https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c
+  switch (event.request.destination) {
+    case 'document':
+      // If using precached URLs:
+      return matchPrecache('/fallback');
+      // return caches.match('/fallback')
+      break;
+    case 'image':
+      // If using precached URLs:
+      return matchPrecache('/static/images/fallback.png');
+      // return caches.match('/static/images/fallback.png')
+      break;
+    case 'font':
+    // If using precached URLs:
+    // return matchPrecache(FALLBACK_FONT_URL);
+    // return caches.match('/static/fonts/fallback.otf')
+    // break
+    default:
+      // If we don't have a fallback, just return an error response.
+      return Response.error();
+  }
+});