improve browser checking

Dorosty · May 28, 2024 · c07221f · c07221f
1 parent c60983b
commit c07221f
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 28 deletions.
diff --git a/bin/outdated-browser-prompt.html b/bin/outdated-browser-prompt.html
@@ -0,0 +1,9 @@
+
+<div id="browser-prompt">
+  {{text}}
+  <br>
+  <a id="upgrade" href="{{url}}" target="_blank">
+    <i class="fa fa-{{browser}}"></i>
+    <span>{{cta}}</span>
+  </a>
+</div>
diff --git a/bin/outdated.html b/bin/outdated.html
@@ -1,14 +1,7 @@
 
-<h1>Outdated Browser</h1>
-<div id="warning">
-  notice
-  <br>
-  <a id="upgrade" href="https://google.com/chrome" target="_blank">
-    <i class="fa fa-chrome"></i>
-    <span>cta</span>
-  </a>
-</div>
-<p>prompt</p>
+<h1>{{title}}</h1>
+{{browserPrompt}}
+<p>{{prompt}}</p>
 <div id="browser-list">
   <a class="browser chrome" href="https://google.com/chrome" target="_blank">
     <i class="fa fa-chrome"></i>

diff --git a/bin/template.html b/bin/template.html
@@ -91,7 +91,7 @@
   </head>
   <body>
     <script>
-      jsCode
+      {{jsCode}}
     </script>
   </body>
 </html>
diff --git a/bin/utils.js b/bin/utils.js
@@ -23,11 +23,13 @@ exports.build = async isProduction => {
   const [
     template,
     outdatedTemplate,
+    outdatedBrowserPromptTemplate,
     mainCode,
     workerCode,
   ] = await Promise.all([
     read('bin/template.html'),
     read('bin/outdated.html'),
+    read('bin/outdated-browser-prompt.html'),
     build('src/index.js'),
     build('src/worker.js'),
   ])
@@ -38,15 +40,18 @@ exports.build = async isProduction => {
     : '`' + workerCodeString.replace(/\`/g, '\\\`').replace(/\$/g, '\\\$') + '`'
 
   const outTemplateString = "'" + outdatedTemplate.replace(/\n */g, '') + "'"
+  const outBrowserTemplateString = "'" + outdatedBrowserPromptTemplate.replace(/\n */g, '') + "'"
 
   let html = isProduction ? template.trim().replace(/\n */g, '') : template
   html = html.replace(
-    'jsCode', isWorkerEnabled
+    '{{jsCode}}', isWorkerEnabled
       ? 'var workerCode = workerCodeString;mainCode'
       : '(function(){workerCode})();(function(){mainCode})()'
     )
     .replace('mainCode', () => mainCode)
     .replace('outdatedTemplate', () => outTemplateString)
+    .replace('outdatedBrowserPromptTemplate', () => outBrowserTemplateString)
+
   return isWorkerEnabled
     ? html.replace('workerCodeString', () => workerCodeString)
     : html.replace('workerCode', () => workerCode)

diff --git a/docs/index.html b/docs/index.html
diff --git a/src/checkBrowser.js b/src/checkBrowser.js
@@ -11,13 +11,6 @@ export default () => {
     /edg([ea]|ios)/i,
   ].some(test => is(test))
 
-  const isMobile = !is(/like android/i) && [
-    /Macintosh(.*?) FxiOS(.*?)\//,
-    /opt\/\d+(?:.?_?\d+)+/i,
-    /(ipod|iphone|ipad)/i,
-    /android/i,
-  ].some(test => is(test))
-
   const found = !isForbidden && [
     [/opera/i, 'opera', () => match() || match(/(?:opera)[\s/](\d+(\.?_?\d+)+)/i)],
     [/opr\/|opios/i, 'opera', () => match(/(?:opr|opios)[\s/](\S+)/i) || match()],
@@ -32,36 +25,64 @@ export default () => {
   const version = found ? found[2]() : isSafari ? match() : null
 
   let outdatedText
-  if (!browser) {
-    outdatedText = { prompt: 'Your browser in not supported. Please switch to one of these other browsers:' }
+  if (isForbidden || !browser) {
+    outdatedText = {
+      title: 'Unsupported Browser',
+      prompt: 'Your browser in not supported. Please switch to one of these other browsers:',
+    }
   } else {
     let supportedVersion = ({
       chrome: [123, 61],
       firefox: 84,
       safari: 13,
       opera: [80, 48],
     })[browser]
-    if (Array.isArray(supportedVersion))
+    if (Array.isArray(supportedVersion)) {
+      const isMobile = !is(/like android/i) && [
+        /Macintosh(.*?) FxiOS(.*?)\//,
+        /opt\/\d+(?:.?_?\d+)+/i,
+        /(ipod|iphone|ipad)/i,
+        /android/i,
+      ].some(test => is(test))
       supportedVersion = supportedVersion[isMobile ? 0 : 1]
+    }
     if (version.slice(0, version.indexOf('.')) < supportedVersion) {
       const browserName = browser[0].toUpperCase() + browser.slice(1)
+      const url = ({
+        chrome: 'https://google.com/chrome',
+        firefox: 'https://mozilla.com/firefox',
+        safari: 'https://apple.com/safari',
+        opera: 'https://opera.com',
+      })[browser]
       outdatedText = {
-        notice: `Your current version of ${browserName} is not supported. Keep your browser up to date for a better experience.`,
-        cta: `Click to upgrade to the latest version of ${browserName}`,
+        title: 'Outdated Browser',
         prompt: `...or download one of these other browsers:`,
+        browserPrompt: {
+          url,
+          text: `Your current version of ${browserName} is not supported. Keep your browser up to date for a better experience.`,
+          cta: `Click to upgrade to the latest version of ${browserName}`,
+        }
       }
     }
   }
+
   if (outdatedText) {
     document.body.id = 'outdated';
     const link = document.createElement('link')
     link.rel = 'styleSheet'
     link.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'
     document.head.appendChild(link)
     document.body.innerHTML = outdatedTemplate
-      .replace('notice', outdatedText.notice)
-      .replace('cta', outdatedText.cta)
-      .replace('prompt', outdatedText.prompt)
+      .replace('{{title}}', outdatedText.title)
+      .replace('{{prompt}}', outdatedText.prompt)
+      .replace('{{browserPrompt}}', !outdatedText.browserPrompt ? '' : () =>
+        outdatedBrowserPromptTemplate
+          .replace('{{browser}}', browser)
+          .replace('{{text}}', outdatedText.browserPrompt.text)
+          .replace('{{url}}', outdatedText.browserPrompt.url)
+          .replace('{{cta}}', outdatedText.browserPrompt.cta)
+      )
+
     return false
   }
   return true