Browser Compatibility

function isStorageAvailable(): boolean {
  try {
    const test = "__storage_test__";
    localStorage.setItem(test, test);
    localStorage.removeItem(test);
    return true;
  } catch {
    return false;
  }
}

if (!isStorageAvailable()) {
  // Use in-memory storage fallback
  showWarning("Some features may not work in private browsing mode");
}

const client = new FanfareClient({
  publishableKey: "pk_live_...",
  realtime: {
    reconnectOnVisible: true, // Reconnect when tab becomes visible
    heartbeatInterval: 30000, // Keep connection alive
  },
});

// Listen for visibility changes
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    // Refresh state when returning to tab
    client.refresh();
  }
});

<meta name="viewport" content="width=device-width, initial-scale=1" />

/* Prevent zoom on double-tap */
button {
  touch-action: manipulation;
}

/* Use visual viewport */
.fixed-bottom {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
}

// Handle viewport changes
if (window.visualViewport) {
  window.visualViewport.addEventListener("resize", () => {
    document.documentElement.style.setProperty("--viewport-height", `${window.visualViewport.height}px`);
  });
}

function checkBrowserSupport(): { supported: boolean; issues: string[] } {
  const issues: string[] = [];

  // Check Fetch API
  if (!window.fetch) {
    issues.push("Fetch API not supported");
  }

  // Check Promises
  if (!window.Promise) {
    issues.push("Promises not supported");
  }

  // Check Web Storage
  try {
    localStorage.setItem("test", "test");
    localStorage.removeItem("test");
  } catch {
    issues.push("Local storage not available");
  }

  // Check WebSocket
  if (!window.WebSocket) {
    issues.push("WebSocket not supported");
  }

  return {
    supported: issues.length === 0,
    issues,
  };
}

// Usage
const { supported, issues } = checkBrowserSupport();
if (!supported) {
  showBrowserUpgradeMessage(issues);
}

function BrowserUpgradeMessage({ issues }: { issues: string[] }) {
  return (
    <div className="browser-upgrade">
      <h2>Please upgrade your browser</h2>
      <p>
        Your browser doesn't support some features needed for this experience. Please upgrade to a modern browser like
        Chrome, Firefox, or Safari.
      </p>
      <ul>
        {issues.map((issue) => (
          <li key={issue}>{issue}</li>
        ))}
      </ul>
    </div>
  );
}

// polyfills.ts
import "core-js/stable";
import "regenerator-runtime/runtime";

// Or use a polyfill service
// <script src="https://polyfill.io/v3/polyfill.min.js?features=fetch,Promise,Array.from"></script>

<script>
  if (!window.fetch) {
    document.write('<script src="/polyfills/fetch.js"><\/script>');
  }
</script>

// Detect if request was blocked
fetch(url).catch((error) => {
  if (error.message.includes("blocked")) {
    showMessage("Browser extension may be blocking requests");
  }
});

fetch(url, {
  headers: {
    "Cache-Control": "no-cache",
  },
});

// Detect legacy Edge
const isLegacyEdge = navigator.userAgent.includes("Edge/");
if (isLegacyEdge) {
  showUpgradeMessage();
}

// Detect mobile for testing
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

// Or use media query
const isMobile = window.matchMedia("(max-width: 768px)").matches;

// Safari: Prefer smaller bundle chunks
if (isSafari) {
  // Safari has stricter memory limits
}

// Mobile: Reduce animation complexity
if (isMobile) {
  // Use simpler animations
  document.documentElement.classList.add("reduced-motion");
}

// Clean up properly to avoid memory leaks
useEffect(() => {
  const subscription = client.subscribe(handler);

  return () => {
    subscription.unsubscribe();
  };
}, []);