fix(app): avoid to cache shared worker requests in service worker (#1173)

Co-authored-by: Andrejs <Leitans>

Author: dr-leevsey

src/components/loader/loader.js

@@ -211,18 +211,18 @@ const Bootloader = () => {
 function bootstrap() {
   if ('serviceWorker' in navigator) {
     console.log('Going to install service worker');
-    // TODO: tmp disabled
-    // 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);
-    //     });
-    // });
+
+    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');
   }
@@ -247,9 +247,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/services/QueueManager/QueueManager.ts

@@ -1,43 +1,43 @@
 import {
   BehaviorSubject,
-  map,
-  timeout,
-  throwError,
-  of,
-  catchError,
   EMPTY,
   Observable,
-  mergeMap,
+  catchError,
   debounceTime,
-  merge,
-  tap,
-  interval,
   filter,
+  interval,
+  map,
+  merge,
+  mergeMap,
+  of,
+  throwError,
+  timeout,
 } from 'rxjs';
 
 import * as R from 'ramda';
 
-import { fetchIpfsContent } from 'src/services/ipfs/utils/utils-ipfs';
 import { CybIpfsNode, IpfsContentSource } from 'src/services/ipfs/types';
+import { fetchIpfsContent } from 'src/services/ipfs/utils/utils-ipfs';
 import { ParticleCid } from 'src/types/base';
 
 import { promiseToObservable } from '../../utils/rxjs/helpers';
 
 import type {
+  IDeferredDbSaver,
   QueueItem,
-  QueueItemResult,
+  QueueItemAsyncResult,
   QueueItemCallback,
   QueueItemOptions,
-  QueueStats,
+  QueueItemResult,
   QueueSource,
-  IDeferredDbSaver,
-  QueueItemAsyncResult,
+  QueueStats,
 } from './types';
 
 import { QueueStrategy } from './QueueStrategy';
 
-import { QueueItemTimeoutError } from './QueueItemTimeoutError';
 import BroadcastChannelSender from '../backend/channels/BroadcastChannelSender';
+import { QueueItemTimeoutError } from './QueueItemTimeoutError';
+import { CustomHeaders, XCybSourceValues } from './constants';
 
 const QUEUE_DEBOUNCE_MS = 33;
 const CONNECTION_KEEPER_RETRY_MS = 5000;
@@ -70,7 +70,7 @@ const strategies = {
   helia: new QueueStrategy(
     {
       db: { timeout: 5000, maxConcurrentExecutions: 999 },
-      node: { timeout: 6 * 1000, maxConcurrentExecutions: 50 }, //TODO: set to 60
+      node: { timeout: 6 * 1000, maxConcurrentExecutions: 50 }, // TODO: set to 60
       gateway: { timeout: 3 * 1000, maxConcurrentExecutions: 11 },
     },
     ['db', 'node', 'gateway']
@@ -168,6 +168,9 @@ class QueueManager {
         const res = await fetchIpfsContent(cid, source, {
           controller,
           node: this.node,
+          headers: {
+            [CustomHeaders.XCybSource]: XCybSourceValues.sharedWorker,
+          },
         }).then((content) => {
           this.defferedDbSaver?.enqueueIpfsContent(content);
 

src/services/QueueManager/constants.ts

@@ -0,0 +1,8 @@
+/* eslint-disable import/prefer-default-export */
+export const CustomHeaders = {
+  XCybSource: 'X-Cyb-Source',
+};
+
+export enum XCybSourceValues {
+  sharedWorker = 'shared-worker',
+}

src/services/ipfs/utils/utils-ipfs.ts

@@ -101,7 +101,7 @@ const fetchIPFSContentFromNode = async (
       }
       default: {
         // Get sample of content
-        const { value: firstChunk, done } = await node
+        const { value: firstChunk } = await node
           .cat(cid, { signal, length: 2048, offset: 0 })
           [Symbol.asyncIterator]()
           .next();
@@ -154,7 +154,8 @@ const fetchIPFSContentFromNode = async (
 const fetchIPFSContentFromGateway = async (
   cid: string,
   node?: IpfsNode,
-  controller?: AbortController
+  controller?: AbortController,
+  headers?: Record<string, string>
 ): Promise<IPFSContentMaybe> => {
   // fetch META only from external node(toooo slow), TODO: fetch meta from cybernode
   const isExternalNode = node?.nodeType === 'external';
@@ -166,6 +167,7 @@ const fetchIPFSContentFromGateway = async (
   const response = await fetch(contentUrl, {
     method: 'GET',
     signal: controller?.signal,
+    headers,
   });
 
   if (response && response.body) {
@@ -210,14 +212,15 @@ const fetchIPFSContentFromGateway = async (
 type fetchContentOptions = {
   controller?: AbortController;
   node?: IpfsNode;
+  headers?: Record<string, string>;
 };
 
 async function fetchIpfsContent(
   cid: string,
   source: IpfsContentSource,
   options: fetchContentOptions
 ): Promise<IPFSContentMaybe> {
-  const { node, controller } = options;
+  const { node, controller, headers } = options;
 
   try {
     switch (source) {
@@ -226,7 +229,7 @@ async function fetchIpfsContent(
       case 'node':
         return fetchIPFSContentFromNode(cid, node, controller);
       case 'gateway':
-        return fetchIPFSContentFromGateway(cid, node, controller);
+        return fetchIPFSContentFromGateway(cid, node, controller, headers);
       default:
         return undefined;
     }

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

@@ -4,6 +4,7 @@ import { matchPrecache, precacheAndRoute } from 'workbox-precaching';
 import { registerRoute } from 'workbox-routing';
 import { CacheFirst, NetworkFirst } from 'workbox-strategies';
 import { ExpirationPlugin } from 'workbox-expiration';
+import { CustomHeaders, XCybSourceValues } from '../QueueManager/constants';
 
 declare const self: ServiceWorkerGlobalScope;
 
@@ -68,6 +69,8 @@ registerRoute(
   ({ request }) =>
     request.method === 'GET' &&
     request.destination !== 'document' &&
+    request.headers.get(CustomHeaders.XCybSource) !==
+      XCybSourceValues.sharedWorker &&
     !(
       request.destination === 'image' ||
       request.destination === 'style' ||

webpack.config.common.js

@@ -5,7 +5,6 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HTMLWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WorkerUrlPlugin = require('worker-url/plugin');
-const WorkboxPlugin = require('workbox-webpack-plugin');
 const BootloaderPlugin = require('./src/components/loader/webpack-loader');
 
 require('dotenv').config();
@@ -117,11 +116,6 @@ 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: [

webpack.config.prod.js

@@ -2,8 +2,8 @@ const { merge } = require('webpack-merge');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionWebpackPlugin = require('compression-webpack-plugin');
+const WorkboxPlugin = require('workbox-webpack-plugin');
 const commonConfig = require('./webpack.config.common');
-const BundleInfoPlugin = require('./webpack/BundleInfoPlugin.js');
 
 module.exports = merge(commonConfig, {
   mode: 'production',
@@ -34,15 +34,22 @@ module.exports = merge(commonConfig, {
       }),
       ...(!process.env.IPFS_DEPLOY
         ? [
-            new CompressionWebpackPlugin({
-              filename: '[path][base].gz',
-              algorithm: 'gzip',
-              test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg+$|\.wasm?.+$/,
-              threshold: 10240,
-              minRatio: 0.8,
-            }),
-          ]
+          new CompressionWebpackPlugin({
+            filename: '[path][base].gz',
+            algorithm: 'gzip',
+            test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg+$|\.wasm?.+$/,
+            threshold: 10240,
+            minRatio: 0.8,
+          }),
+        ]
         : []),
     ],
   },
+  plugins: [
+    new WorkboxPlugin.InjectManifest({
+      swSrc: 'src/services/service-worker/service-worker.ts',
+      swDest: 'service-worker.js',
+      maximumFileSizeToCacheInBytes: 50 * 1024 * 1024,
+    }),
+  ],
 });