Quiero averiguar si un usuario ha accedido a la aplicación a través de un navegador en Android o iOS. La empresa quiere mostrar cosas ligeramente diferentes para esas plataformas. Sé que podría usar navigator.platform , pero Mozilla dice que navigator.platform está obsoleto . En 2022, ¿qué debo usar para detectar funciones de Android e iOS?
Según MDN, el método correcto es usar navigator.userAgentData.platform , pero el problema con ese enfoque es que actualmente no es compatible con FireFox, Safari, Android Browser o Chrome en Android.
La alternativa recomendada a esta propiedad [navigator.platform] es
navigator.userAgentData.platform. Sin embargo,navigator.userAgentData.platformaún no es compatible con algunos de los principales navegadores, y la especificación que la define aún no ha sido adoptada por ningún grupo de estándares (específicamente, no forma parte de ninguna especificación publicada por W3C o WHATWG).
Al menos por ahora, navigator.userAgent parece ser una opción decente. Actualmente es compatible con todos los principales navegadores , sin embargo, los valores proporcionados por los fabricantes de navegadores pueden cambiar sin previo aviso, por lo que es algo que debe tener en cuenta.
La especificación solicita a los navegadores que proporcionen la menor cantidad de información posible a través de este campo. Nunca suponga que el valor de esta propiedad seguirá siendo el mismo en futuras versiones del mismo navegador. Trate de no usarlo en absoluto, o solo para las versiones actuales y anteriores de un navegador. Los nuevos navegadores pueden comenzar a usar el mismo AU, o parte de él, que un navegador más antiguo: realmente no tiene garantía de que el agente del navegador sea realmente el anunciado por esta propiedad.
También tenga en cuenta que los usuarios de un navegador pueden cambiar el valor de este campo si lo desean (suplantación de identidad de UA).
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
Dicho esto, podría abordar el problema de esta manera:
const os = (() => { if (/windows/i.test(navigator.userAgent)) { return "Windows" } else if (/iphone/i.test(navigator.userAgent)) { return "iOS" } else if (/ipad/i.test(navigator.userAgent)) { return "iOS" } else if (/macintosh/i.test(navigator.userAgent)) { return "Mac OS" } // more user agents to detect... })();La respuesta que buscas está probablemente en esta página de Mozilla .