#191 - Browser Compatibility Notice v0.1

<!-- 💙 MEMBERSCRIPT #191 v0.1 💙 - BETTER BROWSER COMPATIBILITY NOTICES -->

<script>

(function() {

  'use strict';

  // ═══════════════════════════════════════════════════════════════

  // CONFIGURATION

  // ═══════════════════════════════════════════════════════════════

  const CONFIG = {
    // Minimum supported browser versions
    MIN_VERSIONS: {
      chrome: 90,
      firefox: 88,
      safari: 14,
      edge: 90,
      opera: 76
    },
    // Messages for different browser types
    MESSAGES: {
      outdated: 'Your browser is outdated and may not support all features. Please update for the best experience.',
      unsupported: 'Your browser is not fully supported. Please use a modern browser like Chrome, Firefox, Safari, or Edge.',
      update: 'Update your browser',
      dismiss: 'Dismiss'
    },
    // Show notice even if dismissed (for testing)
    // Set to true to always show the notice, regardless of browser or dismissal state
    FORCE_SHOW: false,
    // Storage key for dismissed state
    STORAGE_KEY: 'ms_browser_notice_dismissed'
  };

  

  // ═══════════════════════════════════════════════════════════════

  // BROWSER DETECTION

  // ═══════════════════════════════════════════════════════════════

  function getBrowserInfo() {
    const ua = navigator.userAgent;
    let browser = { name: 'unknown', version: 0 };

    

    // Internet Explorer (all versions unsupported)
    if (/MSIE|Trident/.test(ua)) {
      return { name: 'ie', version: 0, unsupported: true };
    }

    

    // Chrome
    const chromeMatch = ua.match(/Chrome\/(\d+)/);
    if (chromeMatch && !/Edg|OPR/.test(ua)) {
      return { name: 'chrome', version: parseInt(chromeMatch[1], 10) };
    }

    

    // Edge (Chromium-based)
    const edgeMatch = ua.match(/Edg\/(\d+)/);
    if (edgeMatch) {
      return { name: 'edge', version: parseInt(edgeMatch[1], 10) };
    }

    

    // Legacy Edge (unsupported)
    if (/Edge\/\d/.test(ua) && !/Edg/.test(ua)) {
      return { name: 'edge-legacy', version: 0, unsupported: true };
    }

    

    // Firefox
    const firefoxMatch = ua.match(/Firefox\/(\d+)/);
    if (firefoxMatch) {
      return { name: 'firefox', version: parseInt(firefoxMatch[1], 10) };
    }

    

    // Safari (must check for Chrome first to avoid false positives)
    const safariMatch = ua.match(/Version\/(\d+).*Safari/);
    if (safariMatch && !/Chrome|Chromium/.test(ua)) {
      return { name: 'safari', version: parseInt(safariMatch[1], 10) };
    }

    

    // Opera
    const operaMatch = ua.match(/OPR\/(\d+)/);
    if (operaMatch) {
      return { name: 'opera', version: parseInt(operaMatch[1], 10) };
    }

    

    return browser;
  }

  

  function isBrowserOutdated(browser) {
    // Unsupported browsers (IE, legacy Edge)
    if (browser.unsupported) {
      return { outdated: true, reason: 'unsupported' };
    }

    

    // Unknown browser
    if (browser.name === 'unknown') {
      return { outdated: false, reason: 'unknown' };
    }

    

    // Check against minimum versions
    const minVersion = CONFIG.MIN_VERSIONS[browser.name];
    if (minVersion && browser.version < minVersion) {
      return { outdated: true, reason: 'outdated', current: browser.version, required: minVersion };
    }

    

    return { outdated: false, reason: 'supported' };
  }

  

  // ═══════════════════════════════════════════════════════════════

  // STORAGE HELPERS

  // ═══════════════════════════════════════════════════════════════

  function isDismissed() {
    if (CONFIG.FORCE_SHOW) return false;
    try {
      return localStorage.getItem(CONFIG.STORAGE_KEY) === 'true';
    } catch (e) {
      return false;
    }
  }

  

  function setDismissed() {
    try {
      localStorage.setItem(CONFIG.STORAGE_KEY, 'true');
    } catch (e) {
      // Silently fail if localStorage is not available
    }
  }

  

  // ═══════════════════════════════════════════════════════════════

  // NOTICE DISPLAY

  // ═══════════════════════════════════════════════════════════════

  function getBrowserUpdateUrl(browserName) {
    const urls = {
      chrome: 'https://www.google.com/chrome/',
      firefox: 'https://www.mozilla.org/firefox/',
      safari: 'https://www.apple.com/safari/',
      edge: 'https://www.microsoft.com/edge',
      opera: 'https://www.opera.com/download',
      'edge-legacy': 'https://www.microsoft.com/edge',
      ie: 'https://www.microsoft.com/edge'
    };
    return urls[browserName] || 'https://browsehappy.com/';
  }

  

  function createNotice(browser, status) {
    // Only works with custom Webflow-designed container
    const customContainer = document.querySelector('[data-ms-code="browser-notice"]');
    if (!customContainer) {
      return;
    }

    

    // Show the container (override CSS display:none if set in Webflow)
    const computedStyle = window.getComputedStyle(customContainer);
    if (computedStyle.display === 'none' || customContainer.style.display === 'none') {
      // Set explicit display value to override CSS rule
      // Use 'block' as default, or preserve original if it was set via inline style
      customContainer.style.setProperty('display', 'block', 'important');
    }

    

    // Populate individual elements within the container
    const messageEl = customContainer.querySelector('[data-ms-code="browser-notice-message"]');
    const updateLinkEl = customContainer.querySelector('[data-ms-code="browser-notice-update"]');
    const dismissBtnEl = customContainer.querySelector('[data-ms-code="browser-notice-dismiss"]');

    

    // Populate message
    if (messageEl) {
      const isUnsupported = status.reason === 'unsupported';
      messageEl.textContent = isUnsupported ? CONFIG.MESSAGES.unsupported : CONFIG.MESSAGES.outdated;
    }

    

    // Populate update link
    if (updateLinkEl) {
      const updateUrl = getBrowserUpdateUrl(browser.name);
      // Handle both <a> tags and other elements
      if (updateLinkEl.tagName.toLowerCase() === 'a') {
        updateLinkEl.href = updateUrl;
        updateLinkEl.setAttribute('target', '_blank');
        updateLinkEl.setAttribute('rel', 'noopener noreferrer');
      } else {
        // For buttons or other elements, add onclick
        updateLinkEl.onclick = function(e) {
          e.preventDefault();
          window.open(updateUrl, '_blank', 'noopener,noreferrer');
        };
      }
      updateLinkEl.textContent = CONFIG.MESSAGES.update;
    }

    

    // Populate dismiss button
    if (dismissBtnEl) {
      dismissBtnEl.textContent = CONFIG.MESSAGES.dismiss;
      attachDismissHandler(customContainer);
    }

    

    return customContainer;
  }

  

  function attachDismissHandler(container) {
    const dismissBtn = container.querySelector('[data-ms-code="browser-notice-dismiss"]');
    if (dismissBtn) {
      dismissBtn.addEventListener('click', function() {
        setDismissed();
        // Hide container using Webflow's own styling
        container.style.display = 'none';
      });
    }
  }

  

  // ═══════════════════════════════════════════════════════════════

  // INITIALIZATION

  // ═══════════════════════════════════════════════════════════════

  function init() {
    // Check if custom container exists (designed in Webflow)
    const customContainer = document.querySelector('[data-ms-code="browser-notice"]');
    if (!customContainer) {
      return;
    }

    

    // Hide banner if already dismissed (unless force show)
    if (isDismissed() && !CONFIG.FORCE_SHOW) {
      customContainer.style.display = 'none';
      return;
    }

    

    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', checkAndShowNotice);
    } else {
      checkAndShowNotice();
    }
  }

  

  function checkAndShowNotice() {
    const browser = getBrowserInfo();
    const status = isBrowserOutdated(browser);

    

    const customContainer = document.querySelector('[data-ms-code="browser-notice"]');

    

    if (status.outdated || CONFIG.FORCE_SHOW) {
      createNotice(browser, status);
    } else {
      // Hide banner if browser is up to date
      if (customContainer) {
        customContainer.style.display = 'none';
      }
    }
  }

  

  // Start initialization
  init();
})();

</script>