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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions