Fixed web worker

frontend/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "react-tsparticles": "^1.28.0",
+    "react-webworker": "^2.1.0",
     "tslib": "^2.2.0"
   },
   "scripts": {

frontend/public/worker.js

@@ -1 +1,5 @@
-postMessage('hello');
+/* eslint-disable import/prefer-default-export */
+onmessage = (e) => {
+  console.log(e.data, navigator[e.data]);
+  postMessage(navigator[e.data]);
+};

frontend/src/components/Issues.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-unused-vars */
+import parse from 'html-react-parser';
+import { useState, useEffect } from 'react';
+import { checkUndefinedProperties, checkWebWorker } from './navigator';
+
+const Issues = ({ item }) => {
+  const [workerData, setWorkerData] = useState();
+  useEffect(() => {
+    checkWebWorker(item, setWorkerData);
+  }, []);
+
+  return (
+    <td>
+      {parse(checkUndefinedProperties(item))}
+      <br />
+      <>{workerData}</>
+    </td>
+  );
+
+  // return <td>{parse(checkUndefinedProperties(item), workerData)}</td>;
+};
+
+export default Issues;

frontend/src/components/NewTable.js

@@ -1,20 +1,27 @@
+/* eslint-disable no-unused-vars */
 import parse from 'html-react-parser';
+import { useState, useEffect } from 'react';
 import { checkUndefinedProperties } from './navigator';
+import Issues from './Issues';
 
-const Table = ({ data }) => (
-  <div className="tableWrap">
-    <table>
-      {data.map((item) => (
-        <tbody key={item.key}>
-          <tr>
-            <td>{item.title}</td>
-            <td>{item.value}</td>
-            <td>{parse(checkUndefinedProperties(item))}</td>
-          </tr>
-        </tbody>
-      ))}
-    </table>
-  </div>
-);
+const Table = ({ data }) => {
+  const [workerData, setWorkerData] = useState();
+
+  return (
+    <div className="tableWrap">
+      <table>
+        {data.map((item) => (
+          <tbody key={item.key}>
+            <tr>
+              <td>{item.title}</td>
+              <td>{item.value}</td>
+              <Issues item={item} />
+            </tr>
+          </tbody>
+        ))}
+      </table>
+    </div>
+  );
+};
 
 export default Table;

frontend/src/components/navigator.js

@@ -1,42 +1,42 @@
 /* eslint-disable dot-notation */
-export { getNavigator, checkUndefinedProperties };
+export { getNavigator, checkUndefinedProperties, checkWebWorker };
 
 const getNavigator = () => {
   const data = [
     {
       key: 'deviceMemory',
       title: 'Device memory',
-      value: navigator.deviceMemory || 'N/A',
+      value: navigator.deviceMemory,
     },
     {
       key: 'hardwareConcurrency',
       title: 'Hardware Concurrency',
-      value: navigator.hardwareConcurrency || 'N/A',
+      value: navigator.hardwareConcurrency,
     },
     {
       key: 'maxTouchPoints',
       title: 'Max touchpoints',
-      value: navigator.maxTouchPoints || 'N/A',
+      value: navigator.maxTouchPoints,
     },
     {
       key: 'platform',
       title: 'Platform',
-      value: navigator.platform || 'N/A',
+      value: navigator.platform,
     },
     {
       key: 'userAgent',
       title: 'User agent',
-      value: navigator.userAgent || 'N/A',
+      value: navigator.userAgent,
     },
     {
       key: 'language',
       title: 'Language',
-      value: navigator.language || 'N/A',
+      value: navigator.language,
     },
     {
       key: 'languages',
       title: 'Languages',
-      value: navigator.languages || 'N/A',
+      value: navigator.languages,
     },
     {
       key: 'cookieEnabled',
@@ -56,30 +56,30 @@ const getNavigator = () => {
     {
       key: 'plugins',
       title: 'Plugins',
-      value: sortPlugins(navigator.plugins) || 'N/A',
+      value: sortPlugins(navigator.plugins),
     },
     // {
     //   key: 'connection',
     //   title: 'Connection',
-    //   value: JSON.stringify(navigator.connection) || 'N/A',
+    //   value: JSON.stringify(navigator.connection),
     //       prototype: Navigator.prototype.hardwareConcurrency,
     // },
     // {
     //   key: 'geolocation',
     //   title: 'Geolocation',
-    //   value: navigator.geolocation || 'N/A',
+    //   value: navigator.geolocation,
     //       prototype: Navigator.prototype.hardwareConcurrency,
     // },
     // {
     //   key: 'hid',
     //   title: 'Hid',
-    //   value: navigator.hid || 'N/A',
+    //   value: navigator.hid,
     //       prototype: Navigator.prototype.hardwareConcurrency,
     // },
     // {
     //   key: 'keyboard',
     //   title: 'Keyboard',
-    //   value: navigator.keyboard || 'N/A',
+    //   value: navigator.keyboard,
     //       prototype: Navigator.prototype.hardwareConcurrency,
     // },
     {
@@ -90,22 +90,17 @@ const getNavigator = () => {
     {
       key: 'vendor',
       title: 'Vendor',
-      value: navigator.vendor || 'N/A',
+      value: navigator.vendor,
     },
     {
       key: 'appVersion',
       title: 'App version',
-      value: navigator.appVersion || 'N/A',
+      value: navigator.appVersion,
     },
     {
       key: 'productSub',
       title: 'Product sub',
-      value: navigator.productSub || 'N/A',
-    },
-    {
-      key: 'vendorSub',
-      title: 'Vendor sub',
-      value: navigator.vendorSub || 'N/A',
+      value: navigator.productSub,
     },
   ];
   return data;
@@ -149,18 +144,23 @@ const checkUndefinedProperties = (obj) => {
   //   document.body.appendChild(frame);
   // }
   // console.log(navigator.hardwareConcurrency);
-  let w;
-  if (typeof Worker !== 'undefined') {
-    if (typeof w === 'undefined') {
-      w = new Worker('/worker.js');
-    }
-    w.onmessage = (event) => {
-      console.log(event);
-    };
-  } else {
-    document.getElementById('result').innerHTML =
-      'Sorry! No Web Worker support.';
-  }
 
   return list.toString().split(',').join('<br />');
 };
+
+const checkWebWorker = (obj, setWorkerData) => {
+  let w;
+  if (typeof w === 'undefined') {
+    w = new Worker('/worker.js');
+  }
+  w.postMessage(obj.key);
+  w.onmessage = (event) => {
+    if (
+      event.data !== undefined &&
+      event.data.toString() !== navigator[obj.key].toString()
+    ) {
+      console.log(event.data, navigator[obj.key]);
+      setWorkerData('Did not match web worker');
+    }
+  };
+};

frontend/yarn.lock

@@ -9134,6 +9134,11 @@ react-tsparticles@^1.28.0:
     tslib "^2.2.0"
     tsparticles "^1.28.0"
 
+react-webworker@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-webworker/-/react-webworker-2.1.0.tgz#6bfe5d74d3f3e5bae89f316b8760b3e8cc551420"
+  integrity sha512-Rl0LeJa7zAQHAZ5KpyWQ/7aHcdy6AKJcJI7UIGlFo2e2sJw7u87hg4ck1cWb70DO0PrW0NwNZrMCgTi23g09JQ==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"