feat(service-worker): precaching and offline mode (#1149)

Co-authored-by: Andrejs <Leitans>

Author: dr-leevsey

package.json

@@ -138,7 +138,8 @@
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.10.0",
-    "webpack-merge": "^5.7.3"
+    "webpack-merge": "^5.7.3",
+    "workbox-webpack-plugin": "^7.1.0"
   },
   "dependencies": {
     "@apollo/client": "^3.9.4",
@@ -251,6 +252,11 @@
     "videostream": "^3.2.2",
     "web3": "1.2.4",
     "web3-utils": "^4.2.1",
+    "workbox-core": "^7.1.0",
+    "workbox-expiration": "^7.1.0",
+    "workbox-precaching": "^7.1.0",
+    "workbox-routing": "^7.1.0",
+    "workbox-strategies": "^7.1.0",
     "worker-url": "^1.1.0"
   },
   "prec-commit": [

src/components/loader/loader.js

@@ -209,6 +209,23 @@ const Bootloader = () => {
 };
 
 function bootstrap() {
+  if ('serviceWorker' in navigator) {
+    console.log('Going to install service worker');
+    window.addEventListener('load', () => {
+      console.log('Starting to load service worker');
+      navigator.serviceWorker
+        .register('/service-worker.js')
+        .then((registration) => {
+          console.log('service worker registered: ', registration);
+        })
+        .catch((registrationError) => {
+          console.log('service worker registration failed: ', registrationError);
+        });
+    });
+  } else {
+    console.log('No service worker is available');
+  }
+
   let _a;
   const assets =
     ((_a =
@@ -229,9 +246,8 @@ function bootstrap() {
 
       progressData.innerHTML = `Loading: <span>${Math.round(
         progress * 100
-      )}%</span>. <br/> Network speed: <span>${
-        Math.round(e.networkSpeed * 100) / 100
-      } kbps</span>`;
+      )}%</span>. <br/> Network speed: <span>${Math.round(e.networkSpeed * 100) / 100
+        } kbps</span>`;
 
       // console.log(e.loaded, e.loaded / e.totalSize); // @TODO
     })

src/containers/Search/SearchResults.tsx

@@ -1,27 +1,32 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { useDevice } from 'src/contexts/device';
-import { IpfsContentType } from 'src/services/ipfs/types';
+import { useParams } from 'react-router-dom';
+import Display from 'src/components/containerGradient/Display/Display';
 import Spark from 'src/components/search/Spark/Spark';
 import Loader2 from 'src/components/ui/Loader2';
-import { getIpfsHash } from 'src/utils/ipfs/helpers';
 import { PATTERN_IPFS_HASH } from 'src/constants/patterns';
-import Display from 'src/components/containerGradient/Display/Display';
+import { useDevice } from 'src/contexts/device';
+import { IpfsContentType } from 'src/services/ipfs/types';
+import { getIpfsHash } from 'src/utils/ipfs/helpers';
 
+import useIsOnline from 'src/hooks/useIsOnline';
 import { encodeSlash } from '../../utils/utils';
 import ActionBarContainer from './ActionBarContainer';
-import FirstItems from './_FirstItems.refactor';
-import useSearchData from './hooks/useSearchData';
-import { LinksTypeFilter, SortBy } from './types';
 import Filters from './Filters/Filters';
 import styles from './SearchResults.module.scss';
+import FirstItems from './_FirstItems.refactor';
 import { initialContentTypeFilterState } from './constants';
+import useSearchData from './hooks/useSearchData';
+import { LinksTypeFilter, SortBy } from './types';
 
 const sortByLSKey = 'search-sort';
 
 function SearchResults() {
   const { query: q, cid } = useParams();
+  const isOnline = useIsOnline();
+  const defaultMessage = isOnline
+    ? 'there are no answers or questions to this particle <br /> be the first and create one'
+    : "ther's nothing to show, wait until you're online";
 
   const query = q || cid || '';
 
@@ -156,10 +161,7 @@ function SearchResults() {
             <p>{error.message}</p>
           </Display>
         ) : (
-          <Display color="white">
-            there are no answers or questions to this particle <br /> be the
-            first and create one
-          </Display>
+          <Display color="white">{defaultMessage}</Display>
         )}
       </div>
 

src/containers/application/Header/SwitchAccount/SwitchAccount.tsx

@@ -1,24 +1,25 @@
-import React, { useMemo, useRef } from 'react';
 import cx from 'classnames';
-import { Link, useLocation } from 'react-router-dom';
+import React, { useMemo, useRef } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
+import { Link, useLocation } from 'react-router-dom';
 import { Transition } from 'react-transition-group';
 
+import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 import useOnClickOutside from 'src/hooks/useOnClickOutside';
 import { routes } from 'src/routes';
-import usePassportByAddress from 'src/features/passport/hooks/usePassportByAddress';
 
-import { useAppSelector } from 'src/redux/hooks';
 import Pill from 'src/components/Pill/Pill';
+import { useBackend } from 'src/contexts/backend/backend';
 import { useSigningClient } from 'src/contexts/signerClient';
+import useIsOnline from 'src/hooks/useIsOnline';
+import { useAppSelector } from 'src/redux/hooks';
 import BroadcastChannelSender from 'src/services/backend/channels/BroadcastChannelSender';
-import { useBackend } from 'src/contexts/backend/backend';
-import { AvataImgIpfs } from '../../../portal/components/avataIpfs';
-import styles from './SwitchAccount.module.scss';
-import networkStyles from '../SwitchNetwork/SwitchNetwork.module.scss';
 import useMediaQuery from '../../../../hooks/useMediaQuery';
 import robot from '../../../../image/temple/robot.png';
+import { AvataImgIpfs } from '../../../portal/components/avataIpfs';
 import Karma from '../../Karma/Karma';
+import networkStyles from '../SwitchNetwork/SwitchNetwork.module.scss';
+import styles from './SwitchAccount.module.scss';
 
 // should be refactored
 function AccountItem({
@@ -91,6 +92,7 @@ function AccountItem({
 function SwitchAccount() {
   const { signerReady } = useSigningClient();
   const { isIpfsInitialized } = useBackend();
+  const isOnline = useIsOnline();
   const mediaQuery = useMediaQuery('(min-width: 768px)');
 
   const [controlledVisible, setControlledVisible] = React.useState(false);
@@ -179,9 +181,10 @@ function SwitchAccount() {
               </button>
             )}
             {isReadOnly && <Pill color="yellow" text="read only" />}
-            {!isReadOnly && !signerReady && (
+            {!isReadOnly && !signerReady && isOnline && (
               <Pill color="red" text="switch keplr" />
             )}
+            {!isOnline && <Pill color="red" text="offline" />}
             <Karma address={useGetAddress} />
           </div>
         )}
@@ -195,8 +198,10 @@ function SwitchAccount() {
         >
           <div
             className={cx(styles.containerAvatarConnect, {
-              [styles.containerAvatarConnectFalse]: !isIpfsInitialized,
-              [styles.containerAvatarConnectTrueGreen]: isIpfsInitialized,
+              [styles.containerAvatarConnectFalse]:
+                !isIpfsInitialized || !isOnline,
+              [styles.containerAvatarConnectTrueGreen]:
+                isIpfsInitialized && isOnline,
             })}
           >
             <AvataImgIpfs

src/hooks/useIsOnline.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+function useIsOnline() {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    function handleOnline() {
+      console.log('isOnline', true);
+      setIsOnline(true);
+    }
+
+    function handleOffline() {
+      console.log('isOnline', false);
+      setIsOnline(false);
+    }
+
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  return isOnline;
+}
+
+export default useIsOnline;

src/index.tsx

@@ -40,6 +40,7 @@ import DeviceProvider from './contexts/device';
 import IbcDenomProvider from './contexts/ibcDenom';
 import NetworksProvider from './contexts/networks';
 import BackendProvider from './contexts/backend/backend';
+
 import AdviserProvider from './features/adviser/context';
 import HubProvider from './contexts/hub';
 

src/services/service-worker/service-worker.ts

@@ -0,0 +1,102 @@
+/* eslint-disable import/no-unused-modules */
+import { clientsClaim, setCacheNameDetails } from 'workbox-core';
+import { matchPrecache, precacheAndRoute } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { CacheFirst, NetworkFirst } from 'workbox-strategies';
+import { ExpirationPlugin } from 'workbox-expiration';
+
+declare const self: ServiceWorkerGlobalScope;
+
+const prefix = 'cyb.ai';
+const suffix = 'v1';
+const precache = 'app-precache';
+
+setCacheNameDetails({
+  prefix,
+  suffix,
+  precache,
+});
+
+self.skipWaiting();
+clientsClaim();
+precacheAndRoute(self.__WB_MANIFEST);
+
+registerRoute(
+  ({ request }) =>
+    request.destination === 'image' ||
+    request.destination === 'style' ||
+    request.destination === 'audio' ||
+    request.destination === 'video' ||
+    request.destination === 'font',
+  new CacheFirst({
+    cacheName: 'assets',
+    plugins: [
+      new ExpirationPlugin({
+        maxAgeSeconds: 24 * 60 * 60,
+      }),
+    ],
+  })
+);
+
+registerRoute(
+  ({ request }) => !navigator.onLine && request.mode === 'navigate',
+  async ({ event }) => {
+    const request = (event as any).request as Request;
+    console.log('[Service worker] fecth document', request);
+
+    const cachedDocument = await matchPrecache('/index.html');
+
+    if (cachedDocument) {
+      return cachedDocument;
+    }
+
+    return new Response(
+      `<body style="color: white; background-color: black; display: flex; justify-content: center; width: 100wv; height: 100hv; align-items: center">
+        <div style="display: flex; flex-direction: column;">
+          <div>We're sorry</div>
+          <div>Cyb.ai is down</div>
+        </div>
+      </body>`,
+      {
+        headers: { 'Content-Type': 'text/html' },
+      }
+    );
+  }
+);
+
+registerRoute(
+  ({ request }) =>
+    request.method === 'GET' &&
+    request.destination !== 'document' &&
+    !(
+      request.destination === 'image' ||
+      request.destination === 'style' ||
+      request.destination === 'audio' ||
+      request.destination === 'video' ||
+      request.destination === 'font'
+    ),
+  new NetworkFirst({ cacheName: 'api-responses' })
+);
+
+function generateCacheKey(request: Request) {
+  return request.url + JSON.stringify(request.body);
+}
+registerRoute(
+  ({ request }) => request.method === 'POST',
+  async ({ event }) => {
+    const request = (event as any).request as Request;
+    const cacheKey = generateCacheKey(request);
+    const cachedResponse = await caches.match(cacheKey);
+
+    if (cachedResponse) {
+      return cachedResponse;
+    }
+
+    const response = await fetch(request);
+
+    const cache = await caches.open('api-responses-post');
+    await cache.put(cacheKey, response.clone());
+
+    return response;
+  }
+);

webpack.config.common.js

@@ -4,8 +4,9 @@ const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const BootloaderPlugin = require('./src/components/loader/webpack-loader');
 const WorkerUrlPlugin = require('worker-url/plugin');
+const WorkboxPlugin = require('workbox-webpack-plugin');
+const BootloaderPlugin = require('./src/components/loader/webpack-loader');
 
 require('dotenv').config();
 
@@ -116,6 +117,11 @@ const config = {
       // ProvidePlugin configuration
       cyblog: ['src/utils/logging/cyblog.ts', 'default'],
     }),
+    new WorkboxPlugin.InjectManifest({
+      swSrc: 'src/services/service-worker/service-worker.ts',
+      swDest: 'service-worker.js',
+      maximumFileSizeToCacheInBytes: 50 * 1024 * 1024,
+    }),
   ],
   module: {
     rules: [