Skip to content

refactor(mobile): modernize platform detection APIs with userAgentData #356

@guesung

Description

@guesung

Summary

Modernize @react-simplikit/mobile platform detection utilities (isIOS, isAndroid) to use the latest browser APIs, referencing Adobe React Spectrum's platform.ts as a proven implementation.

Motivation

  • navigator.platform is unreliable and not recommended — already replaced with UA string check in isIOS
  • navigator.userAgentData is the modern replacement (MDN) and provides more structured, reliable detection
  • React Spectrum uses userAgentData with fallback to legacy APIs — a pattern worth adopting

Proposed Changes

1. Use navigator.userAgentData as primary detection

// Current: regex on raw UA string
/Android/i.test(navigator.userAgent)

// Proposed: userAgentData first, UA string fallback
function testUserAgent(re: RegExp): boolean {
  if (typeof window === 'undefined') return false;
  const brands = navigator.userAgentData?.brands;
  return brands
    ? brands.some(b => re.test(b.brand))
    : re.test(navigator.userAgent);
}

2. Expand platform detection coverage (optional)

Consider adding utilities already proven useful in React Spectrum:

Utility Purpose
isMac() macOS detection
isIPhone() iPhone-specific (vs iPad)
isIPad() iPad-specific
isAppleDevice() Any Apple device
isWebKit() WebKit engine detection
isChrome() Chrome detection
isFirefox() Firefox detection

Reference

Checklist

  • Add testUserAgent / testPlatform internal helpers with userAgentData support
  • Migrate isIOS and isAndroid to use new helpers
  • Decide which additional detection utilities to add
  • Add/update tests and SSR safety tests
  • 100% coverage maintained

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions