La lista de verificación definitiva para las PWA


Aasif
By Aasif  | July 13, 2018 10:00 am
PWA

Como Crear una App con Appy Pie: Desde que se lanzó el iPhone en 2007, los desarrolladores realmente han estado haciendo todo lo posible para desarrollar e implementar aplicaciones basadas en la web para dispositivos de teléfonos móviles. Sin embargo, en los últimos años, las cosas finalmente parecen estar avanzando en la dirección correcta.

Las aplicaciones web progresivas o PWA son aplicaciones puras basadas en web que se comportan y se sienten como aplicaciones nativas. Estos se pueden agregar como iconos a las pantallas de inicio o a las bandejas de aplicaciones. Se abren en pantalla completa sin el navegador y ofrecen la misma experiencia que la de una aplicación nativa, ¡e incluso generan notificaciones! ¿Qué más se puede pedir?

Además de todas estas similitudes con las aplicaciones móviles nativas, las aplicaciones web progresivas también tienen ciertas ventajas de discernimiento. Toman poco o ningún espacio en su dispositivo móvil, son más rápidos y eliminan el tedioso proceso de obtener actualizaciones y lanzamientos para cambiar una característica o modificar la apariencia de su aplicación. ¡Además de todo esto, también pueden trabajar fuera de línea!

¿Está emocionado con las aplicaciones web progresivas ahora? Ok, ¡vamos a darle más! Las PWA son aplicaciones web que se crean con la intención de ofrecer al usuario una experiencia similar a la aplicación y tienen todas las capacidades web modernas, todo en uno. Esta tecnología ha hecho posible empacar todas las funcionalidades de la aplicación directamente desde el navegador y lo salvaría del dolor de buscar, descargar y actualizar, que es la molestia cuando usa una aplicación nativa en su dispositivo móvil.

Aunque hemos hablado mucho sobre las aplicaciones web progresivas en el pasado y hemos discutido extensamente acerca de cuán grandiosas pueden ser para su negocio. ¡Aquí, vamos a hablar sobre la lista de verificación de pruebas que debe tener en sus manos justo antes de que decida lanzar su nuevo PWA!

La lista de verificación para probar su PWA –

  1. ¿El sitio se sirve a través de HTTPS?

La seguridad hoy en día es una de las mayores preocupaciones en una aplicación web progresiva, y es por esta razón que debería asegurarse de que su aplicación web se sirva únicamente a través de HTTPS.

Cómo probar?

Puede probar si su sitio web se sirve a través de HTTPS o no, mediante el uso de cualquiera de las siguientes herramientas, incluyendo Lighthouse by Google Developer, jitbit, seositecheckup, digicert, ssl chopper, ssl labs, etc.

Arreglar

En caso de que descubra que el sitio web o su aplicación web progresiva no se publican a través de HTTPS, debe implementar HTTPS.

  1. ¿Las páginas web son receptivas?

Debe asegurarse de que su aplicación web progresiva sea receptiva en todos los dispositivos móviles y de escritorio que incluyen computadoras portátiles, computadoras, teléfonos inteligentes, tabletas, etc.

Cómo probar?

Puede probar este aspecto utilizando Lighthouse para verificar que su diseño sea compatible con dispositivos móviles, pero también puede verificarlo manualmente.

Arreglar

Si los resultados indican que las páginas web de su aplicación web no responden, debe trabajar para implementar un diseño receptivo o, de otro modo, servir de forma adaptativa a un sitio compatible con las vistas.

  1. ¿Funciona la carga fuera de línea?

Cuando está creando su aplicación web progresiva, todas sus páginas web o al menos algunas de ellas funcionan incluso cuando su aplicación está fuera de línea. Esto significa que cuando realiza las pruebas debe asegurarse de que su aplicación web responda con un 200 en el momento en que está fuera de línea.

Cómo probar?

Debe cargar varias páginas en el PWA mientras mantiene el modo de avión activado. Una vez que el modo de avión esté encendido, asegúrese de que la aplicación muestre al menos algo de contenido, incluso cuando la aplicación esté fuera de línea. Puede usar Lighthouse para verificar que la URL de inicio responde con un 200 cuando está fuera de línea.

Arreglar

Use un trabajador de servicio

  1. ¿Es compatible en todos los navegadores?

Cuando tiene una aplicación web progresiva propia, debe probarla para ver si hay compatibilidad entre navegadores para asegurarse de que su aplicación web ofrezca una experiencia de usuario impecable para todos los usuarios, independientemente del navegador que vayan a utilizar.

Cómo probar?

Para probar la compatibilidad de su aplicación web progresiva en diferentes navegadores, deberá intentar abrirla en Chroe, Edge, Firefox y Safari.

Arreglar

Tendría que manejar cada uno de los problemas a medida que aparezcan y la solución difiera para cada uno de ellos.

  1. ¿Hay metadatos para ‘Agregar a pantalla de inicio’ disponibles?

Mientras prueba la aplicación web progresiva que ha desarrollado, es importante que pruebe si la aplicación web proporciona un metadato para ‘Agregar a la pantalla de inicio’.

Cómo probar?

Esto se puede hacer utilizando Lighthouse y verificando que ‘¡Se puede pedir al usuario que agregue a la pantalla de inicio’ está todo configurado en Sí!

Arreglar

Si tiene algún problema con esto, simplemente puede agregar un archivo Manifiesto de aplicación web a su proyecto.

  1. ¿Son suaves las transiciones de página?

Las transiciones de página son más importantes para el rendimiento percibido de la aplicación web, por lo tanto, nunca deberían sentirse ágiles al navegar a través de ella, ni siquiera cuando la conexión a Internet sea lenta.

Cómo probar?

Esta prueba debe llevarse a cabo manualmente en una red lenta particularmente. Intente hacer clic en diferentes botones o enlaces, y asegúrese de que responda de inmediato, ya sea mediante una transición suave a otra pantalla y también debe mostrar una pantalla de carga de marcador de posición o un indicador de carga hasta que la aplicación espere alguna respuesta.

Arreglar

En caso de que se trate de una aplicación de una sola página renderizada por el cliente, debe trabajar para hacer la transición del usuario de inmediato a la página siguiente y luego mostrarles una pantalla esquelética y usar cualquier contenido incluido el título o miniatura que ya esté disponible mientras espera el contenido cargar.

  1. ¿Cada página tiene una URL?

Todas y cada una de las páginas de la aplicación web deben tener una URL y todas esas URL son únicas.

Cómo probar?

Debe asegurarse de que las páginas individuales sean enlazables a través de las URL y que cada URL sea única para que luego puedan compartirse fácilmente en las redes sociales probando si se pueden abrir páginas individuales y acceder directamente a ellas a través de las nuevas ventanas del navegador.

Arreglar

En caso de que esté compilando una aplicación de una sola página, asegúrese de que el enrutador del lado del cliente tenga la capacidad de reconstruir el estado de la aplicación desde una URL determinada.

  1. ¿El contenido se puede compartir?

Todo el contenido de su aplicación web debe ser fácil de compartir incluso a través del modo de pantalla completa y también debe formar tarjetas para todas las plataformas de redes sociales.

Cómo probar?

Esta prueba debe llevarse a cabo manualmente compartiendo el contenido de su aplicación a través del modo de pantalla completa. La prueba de las tarjetas se puede hacer de las siguientes maneras:

Facebook – Depure la URL ingresando la publicación que se va a compartir y verificando si las tarjetas se han generado o no.

Twitter: compruebe si se agrega un tipo adecuado de tarjeta para su contenido al encabezado HTML dado de la página.

Arreglar

Puede solucionar esto proporcionando botones de compartir en red social o un botón de compartir genérico dentro de su Experiencia de usuario. Si está colocando un botón genérico, puede hacer una provisión para copiar directamente la URL al portapapeles del usuario automáticamente cuando se toca, y luego ofrecerles opciones de diferentes redes sociales para compartir. Incluso puede probar la nueva API de Web Share para incorporar el sistema de intercambio nativo en Android.

  1. ¿Los metadatos de Schema.org están disponibles siempre que sea necesario?

La aplicación web que cree debe poder crear una tarjeta enriquecida para usted (si corresponde). Hacer esto puede ayudar a mejorar la apariencia de su sitio web o la aplicación web a través de diferentes motores de búsqueda.

Cómo probar?

Para probarlo, puede usar los datos estructurados de Google para asegurarse de que la imagen, la descripción, el título, etc. estén disponibles.

Arreglar

Puede arreglar esto si marca el contenido. Por ejemplo:

  • Una aplicación de recetas debe tener el marcado de tipo de receta para tarjetas enriquecidas
  • Una aplicación de noticias debe tener el marcado de tipo NewsArticle para Rich Cards y / o AMP Support
  • Una aplicación de comercio electrónico debe tener el marcado de tipo de Producto para Tarjetas Ricas.
  1. ¿Están disponibles las notificaciones Push?

Si se necesitan notificaciones push para su aplicación web, asegúrese de que no sean demasiado agresivas. Aunque las notificaciones push no son un requisito si desea una aplicación web ejemplar, pero sí implementarlas, si tiene sentido.

Si incluye Notificaciones Push en su aplicación web, asegúrese de proporcionar un contexto para el usuario sobre cómo se usarán las notificaciones.

Cómo probar?

Para probar esto, debería visitar el sitio o la aplicación web y encontrar el flujo de suscripción de las notificaciones push. Aquí, cuando el navegador le muestra la solicitud de permiso, debe verificar si proporciona algún contexto explicando para qué es el permiso. Cuando el sitio solicita permiso para la carga de la página, asegúrese de que el contexto sea claro con respecto a la razón por la cual el usuario debe habilitar las notificaciones automáticas.

Arreglar

Cree un flujo de permisos de notificaciones que sea fácil de usar y brinde claridad.

Debe asegurarse de que la interfaz de usuario alienta a los usuarios a activar las notificaciones automáticas y no se vuelva demasiado agresivo.

Cómo probar?

Diríjase a la aplicación web y encuentre el flujo opt-in para las notificaciones push. Aquí debe verificar y asegurarse de que en caso de que cierre las notificaciones automáticas, el sitio o la aplicación web no vuelva a solicitar de la misma manera en la misma sesión.

Arreglar

Cuando diseñe el flujo opt-in, asegúrese de que cuando los usuarios dicen que no desean un tipo particular de notificación, no vuelvan a solicitarla durante al menos unos días.

El siguiente paso para probar es si el sitio se atenúa en la pantalla en el momento en que aparece la solicitud de permiso.

Cómo probar?

Acceda al flujo de aceptación para las notificaciones automáticas en su aplicación web o en el sitio. Cuando el navegador muestre la solicitud de permiso, asegúrese de que la página atenúe el resto del contenido del sitio que no sea relevante para la solicitud de permiso al colocar una superposición oscura.

Arreglar

Atenúa la pantalla al momento de llamar a Notification.requestPermission. Sin embargo, recuerde oscurecerlo después de la resolución de la promesa.

La prueba debe llevarse a cabo para garantizar que las notificaciones push se entreguen de manera oportuna y precisa, y que sean relevantes para el usuario.

Cómo probar?

Habilite la notificación push desde el sitio y asegúrese de que los casos de uso para los cuales se usan las notificaciones push cumplan con los criterios a continuación:

  • Programado a la perfección: una notificación de inserción debe llegar al usuario en el momento exacto en que lo desee y en el momento más importante.
  • Preciso: una notificación de inserción debe tener la información específica sobre la que se puede actuar en el momento.
  • Relevante: una notificación de inserción debe ser sobre personas o sobre temas que interesarían al usuario.

Arreglar

En caso de que se dé cuenta de que el contenido de su notificación push no es oportuno, preciso o relevante para el usuario, puede enviarlo a través de un correo electrónico para obtener un mejor efecto.

Una de las cosas más importantes para probar aquí es si el usuario tiene el control sobre habilitar y deshabilitar las notificaciones push desde su sitio o aplicación web.

Cómo probar?

Vaya al sitio y habilite las notificaciones automáticas del sitio. Ahora es importante que tenga un lugar en el sitio o la aplicación web donde el usuario pueda acceder y administrar los permisos de notificación de inserción y desactivarlos o habilitarlos a voluntad.

Arreglar

Cree una interfaz de usuario que permita a los usuarios gestionar fácilmente sus notificaciones para que puedan activarlas o desactivarlas según sea necesario.

  1. ¿Es la primera carga rápida (incluso en 3G)?

La velocidad es una de las mayores ventajas que se anuncian a las personas cuando crean o usan una aplicación web progresiva. Por lo tanto, es de vital importancia probar sus aplicaciones web y verificar la primera carga en las conexiones 3G.

Cómo probar?

Esto se puede hacer utilizando Lighthouse en un Nexus% o algo similar para verificar el tiempo de los <10s interactivos para la primera visita en una red 3G simulada.

Arreglar

Hay muchas formas en que se puede mejorar el rendimiento de la primera velocidad de carga de su aplicación web. Sin embargo, primero debería comprender un poco mejor el rendimiento de su sitio y para eso puede utilizar herramientas como Pagespeed Insights y SpeedIndex en WebPageTest.

Una cosa que puede hacer es concentrarse en cargar menos secuencias de comandos, asegurarse de que la cantidad máxima de secuencias de comandos se cargue de forma asíncrona a través de <script async> y asegurarse de que el CSS de bloqueo de la visualización se marque de forma adecuada. Además de esto, también puede intentar usar el patrón PRPL y herramientas como PageSpeed ​​Module en el servidor.

¿Que sigue?

Ahora que ha terminado de probar su aplicación web, tendría, en sus manos, los resultados que declararían si su aplicación es realmente progresiva o no. Si los resultados indican un “No”, debe volver a comenzar a trabajar en ella. Si la indicación es “Sí”, simplemente siéntese y vea cómo aumenta la conversión y vea la magia de PWA para su sitio web.

¿Nos perdimos algo más que necesita ser probado aquí? Háganos saber, nos encantaría saber de usted!

Aasif
About The Author

App Builder