diff --git a/package-lock.json b/package-lock.json index f1809f1..502b1dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "bowser": "^2.11.0", "react": "^16.14.0", "react-dom": "^16.14.0", "react-flagpack": "^0.1.1", @@ -3005,6 +3006,11 @@ "multicast-dns-service-types": "^1.1.0" } }, + "node_modules/bowser": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz", + "integrity": "sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -16726,6 +16732,11 @@ "multicast-dns-service-types": "^1.1.0" } }, + "bowser": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz", + "integrity": "sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 11dc961..fd656ed 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "webpack-dev-server": "^3.11.0" }, "dependencies": { + "bowser": "^2.11.0", "react": "^16.14.0", "react-dom": "^16.14.0", "react-flagpack": "^0.1.1", diff --git a/src/App.jsx b/src/App.jsx index 39972dc..4550684 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,35 +1,13 @@ import * as React from 'react'; import { useState, useEffect } from 'react'; import Flag from 'react-flagpack'; +import * as Bowser from 'bowser'; import './App.css'; const updateDOM = (id, text) => { document.getElementById(id).innerHTML += text; }; -const getBrowser = (userAgent) => { - if ( - (userAgent.indexOf('Opera') || - userAgent.indexOf('OPR')) !== -1 - ) { - return 'Opera'; - } if (userAgent.indexOf('Edg') !== -1) { - return 'Edge'; - } if (userAgent.indexOf('Chrome') !== -1) { - return 'Chrome'; - } if (userAgent.indexOf('Safari') !== -1) { - return 'Safari'; - } if (userAgent.indexOf('Firefox') !== -1) { - return 'Firefox'; - } if ( - userAgent.indexOf('MSIE') !== -1 || - !!document.documentMode === true - ) { - return 'IE'; - } - return 'unknown'; -}; - const App = () => { const [country, setCountry] = useState('US'); const [flag, setFlag] = useState(false); @@ -48,9 +26,21 @@ const App = () => { updateDOM('provider', data.isp); }); - updateDOM('browser', getBrowser(navigator.userAgent)); + const uaResult = Bowser.parse(navigator.userAgent); + updateDOM('browser', uaResult.browser.name); + updateDOM('browserVersion', uaResult.browser.version); + updateDOM('browserEngine', uaResult.engine.name); + updateDOM('os', `${uaResult.os.name} ${uaResult.os.versionName}`); + updateDOM('language', navigator.language); + updateDOM('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone); + updateDOM('cookies', navigator.cookieEnabled); + updateDOM('java', navigator.javaEnabled()); + updateDOM('plugins', navigator.plugins); + + updateDOM('platform', uaResult.platform.type); updateDOM('screenSize', `${window.screen.width}x${window.screen.height}`); + updateDOM('color', window.screen.colorDepth); navigator.getBattery().then((battery) => { updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`); @@ -91,10 +81,40 @@ const App = () => {
Browser:{' '}
+
+ Browser version:{' '} +
+
+ Browser engine:{' '} +
+
+ Operating system:{' '} +
+
+ Language:{' '} +
+
+ Timezone:{' '} +
+
+ Cookies enabled:{' '} +
+
+ Java enabled:{' '} +
+
+ Plugins:{' '} +
Hardware
+
+ Platform:{' '} +
Screen resolution:{' '}
+
+ Color Resolution:{' '} +
Battery level:{' '}