Hola Habr
Probar Mobile Web es algo similar a probar Desktop Web. Por un lado, estos son los mismos HTML, CSS, JavaScript y otros encantos que estamos acostumbrados a ver. Las mismas áreas problemáticas y errores típicos. Por otro lado, hay diferencias.
En este artículo, compilé una pequeña lista de verificación de las características que son importantes para probar en un proyecto de Web móvil. La lista no pretende ser completa, así que compleméntela con sus párrafos en los comentarios. Solo me alegraré. La única regla es que el elemento debe aplicarse solo a la web móvil y no a la web.
Me gustaría comenzar con el hecho de que tenemos al menos dos formas de probar proyectos de Mobile Web. El primero es emular un navegador móvil usando Chrome DevTools (u otros navegadores en sus herramientas de desarrollador, pero esta es una forma menos popular). El segundo es probar en un dispositivo real usando un navegador móvil real.
La mayor parte de la funcionalidad es bastante posible de verificar sin un dispositivo, pero aún no es todo. Por lo tanto, dividí los cheques en dos partes grandes: lo que verificamos en una PC y solo con un dispositivo móvil en la mano.
Chrome DevTools
Entonces, como se mencionó anteriormente, las pruebas móviles se pueden realizar en una PC sin usar un dispositivo móvil. El navegador Chrome puede funcionar en modo móvil.
Modo móvil
Para cambiar al modo móvil para ver una página web, debe abrir Chrome DevTools y hacer clic en este símbolo:
Se abrirá una aplicación web ante nosotros como si estuviera abierta desde un dispositivo móvil:
Podemos elegir el tipo de dispositivo de la lista, el trabajo con el que emulamos:
Agente de usuario
Es importante recordar que algunas aplicaciones web, además del tamaño de la pantalla, también están orientadas al
Agente de usuario . Dicha aplicación en modo móvil puede diferir visualmente de lo que veremos en un dispositivo real.
Para hacer todo bien, debe configurar adicionalmente las condiciones de red en Chrome DevTools configurando el Agente de usuario móvil:
Luego vuelva a cargar la página y obtenga el resultado deseado.
Limitación de red
Con Chrome, puede probar la aplicación tanto en Internet lento como sin conexión. Para hacer esto, en la misma pestaña Condiciones de red, puede seleccionar el parámetro de limitación de red:
Esto es importante si los usuarios suelen utilizar la aplicación en condiciones de Internet deficiente, por ejemplo, un navegador.
Eso no es todo lo que tiene Chrome DevTools. Esta es una gran herramienta para trabajar con Desktop Web y para Mobile Web. Hay una excelente documentación de Google,
en inglés, por supuesto .
Tenemos un curso en línea de dos semanas sobre Chrome DevTools en ruso. Toda la información en la página de perfil. Siguiendo adelante. :)
Probar Web móvil con Chrome DevTools tiene varias ventajas. Es simple, rápido, no requiere dispositivos reales y le permite identificar los errores de aplicación más obvios. Pero, por desgracia, no todos.
Rendimiento
La primera razón por la que debe elegir un dispositivo móvil: la necesidad de probar la aplicación en un dispositivo débil.
Las aplicaciones web modernas están sobrecargadas con todo tipo de animaciones, cálculos complejos del lado del cliente, etc. Si en el escritorio todo esto puede funcionar sin problemas y de manera hermosa (aunque no siempre tan bien), puede haber retrasos en algunas líneas J de Samsung (por ejemplo, J2).
Navegadores móviles
La segunda razón son los navegadores móviles. Se trata de los navegadores que están integrados en el sistema y están predeterminados. Muchas personas los usan y no se molestan en instalar Chrome para dispositivos móviles.
Uno de los representantes de dicho navegador es Samsung Internet Browser. Vale la pena verificar el funcionamiento de su aplicación web. Especialmente si no hay estadísticas que muestren "con qué están sentados sus usuarios". Si existen tales estadísticas y se afirma que nadie visita la aplicación desde estos navegadores, lo más probable es que no sea necesario probarla. Aunque ... ¿y si no entran porque está roto? :)
Vale la pena pensarlo.
Trabajar en segundo plano
La aplicación web móvil funciona en un navegador móvil, lo cual es lógico. Al mismo tiempo, los dispositivos móviles están dispuestos de modo que la aplicación pueda estar tanto en modo activo como en segundo plano. Por ejemplo, si cambiamos a otra aplicación o tenemos una llamada entrante.
Ahora suponga que por alguna razón nuestro usuario ha movido el navegador con la aplicación abierta a un segundo plano. Y luego regresó. Aquí hay algunos ejemplos de lo que podría estar mal. Por ejemplo, tenemos una aplicación de chat y se pierde todo el historial de correspondencia. Ahora se requiere una recarga de página. Mal? Por supuesto! O tenemos una aplicación para notebook. El usuario no tuvo tiempo de agregar algo cuando fue interrumpido por una llamada entrante. Al regresar, descubrió que lo que había escrito estaba borrado. Ahora tienes que escribirlo de nuevo. ¿O tal vez es mejor no usar esa aplicación?
Asegúrese de verificar cómo funciona la funcionalidad clave de la aplicación después del fondo.
Teclado electronico
La mayoría de las veces, los usuarios de Mobile Web usan un teclado electrónico para ingresar texto. Sucede que cuando aparece, el diseño de la aplicación se rompe. Por lo general, este problema está relacionado con cómo se calculan las proporciones de la pantalla y cómo afectan a este diseño.
Vale la pena prestar especial atención a aquellas páginas de la aplicación donde el usuario tiene que completar muchos datos: la página de registro, algunos cuestionarios, etc.
Orientación de la pantalla
Las aplicaciones móviles tienen dos tipos de orientación de pantalla: vertical y horizontal. Puedes leer sobre esto
aquí .
Si "ponemos nuestro dispositivo a un lado", la mayoría de las aplicaciones móviles serán "redibujadas" a las nuevas proporciones de pantalla. Esto también se aplica a los navegadores móviles. En este punto, el diseño de nuestra aplicación web también puede romperse en los lugares más impredecibles.
Chrome DevTools puede emular ambos modos, pero aún así el proceso de voltear y volver a dibujar la aplicación web ocurre de manera diferente que en un navegador móvil real.
La forma en que se verá nuestra aplicación después de volver a dibujar definitivamente vale la pena echarle un vistazo. Y, preferiblemente, en ambas direcciones: de retrato a paisaje y de paisaje a retrato.
Página web en aplicación nativa
Otro caso común: cuando una aplicación tiene una versión web móvil y una aplicación nativa. En este caso, sucede que algunas de las páginas no se transfieren a la aplicación nativa, sino que simplemente se muestran como un WebView.
WebView es un componente que le permite incrustar páginas web en una aplicación. El navegador incorporado simplemente representa dentro de la aplicación lo que veríamos en la Web móvil. Muy a menudo, esto ahorra tiempo al desarrollar una aplicación nativa.
En este caso, vale la pena verificar los cambios de Mobile Web no solo en el navegador, sino también dentro de las aplicaciones nativas. Por supuesto, no hay forma de prescindir de un dispositivo móvil.
Procesamiento de grifo
A diferencia de Desktop Web, donde solo hay un clic del mouse, en una aplicación móvil hay varias maneras de interactuar con la interfaz: tocar, tocar, mover, etc. Hay muchos lugares para leer sobre esto, por ejemplo
aquí .
Chrome DevTools puede emular algunas de estas acciones. Pero, en primer lugar, no todos. Y, en segundo lugar, el resultado no siempre es el mismo durante la emulación que cuando se usa un dispositivo real.
Incluso si su aplicación web móvil no está diseñada para acciones especiales, vale la pena verificar la interacción de la interfaz con al menos tocar. Especialmente lugares como menús o algún tipo de interruptores. La conclusión es que el toque no cae en ninguna coordenada específica. Golpea un área entera. Si sus controles están cerca, el toque puede afectar varios elementos a la vez y causar molestias al usuario.
Total
Hablé sobre las características principales de probar proyectos de Mobile Web. Si viene de probar Desktop Web, es probable que esta lista sea útil. Por supuesto, esto no es todo lo que podría recordarse con respecto a este tema. Si desea complementar la lista, asegúrese de escribir en los comentarios las comprobaciones que realiza.
Gracias por su atencion