Obviamente, las razones incluyen además de la cada vez más importancia de la movilidad en nuestros hábitos de vida, la existencia de teléfonos para todos los bolsillos, la conexión donde quieras que vayas y la infinidad de posibilidades que te ofrece Internet. Con el creciente acceso a internet a través de los teléfonos móviles, la experiencia de usuario en los smartphone’s se cobra todavía más importancia, también para las aplicaciones móviles para empresas.

Para las empresas más pequeñas, que a menudo no tienen aplicaciones móviles nativas ya que sobre todo son más caras, y el tiempo en su desarrollo es infinitamente más largo, la aplicación web progresiva es una oportunidad para ganar clientes al proporcionar mejor experiencia que en una web normal.

Si las empresas tienen aplicaciones móviles nativas, o lo que es lo mismo, específicas para cada terminal o sistema operativo, existe el riesgo que muchos usuarios prefieran su versión web para evitar la descarga e instalación debido a restricciones como la de memoria o simplemente por pereza.

Para aprovechar todos los beneficios de las aplicaciones móviles en las empresas, la aplicaciones web desarrolladas con tecnología PWA deben proporcionar una experiencia de usuario que debe ser lo más parecida a la de una app nativa.

Hoy en día nuestros usuarios no se conforman con cualquier web. Nuestros usuarios esperan mucho de nuestros sitios web. Hace casi 25 años, cuando se inventó internet, su propósito casi único era compartir información. Actulamente una web puede ser una carnicería online, una red social, o un lugar donde chatear con mis amigos. Se espera que la web nos encuentre una casa o responda a todas nuestras preguntas, por mi extravagantes que sean. Se espera que incluso aplicaciones como el PowerPoint o el Excel, estén disponibles en internet.

Conoce las aplicaciones web progresivas

Tomemos el ejemplo de Whatsapp en tu teléfono. Cuando no hay red, puedes abrir la aplicación, consultar mensajes antiguos ​​e incluso responder. Cuando el teléfono tenga de nuevo conexión a Internet, los mensajes se enviarán automáticamente en segundo plano.

Esto es lo que la tecnología PWA proporciona a las aplicaciones. Permite que las aplicaciones móviles se carguen cuando no hay red, se sincronizan en segundo plano, al mismo tiempo que proporcionan una experiencia como si fuera una aplicación móvil nativa desde el punto de vista de los usuarios.

¿Por qué necesitas para tu empresa una PWA y cuáles son sus características?

Analicemos algunas de las características más importantes que echamos en falta en las webs no progresivas según las principales Agencias de Marketing.

  1. Disponibilidad: la aplicación móvil debe ser diseñada para que cargue increíblemente rápida al cargarse y mientras estemos navegando por la web, debe hacerlo casi instantáneamente y también debe abrirse cuando no hay una red o una red de baja velocidad como 2G. Google descubrió que el 53% de los usuarios abandonan el sitio web si la página tarda más de 3 segundos en cargarse.
  2. Rápido: los desplazamientos y las transiciones entre páginas deben ser rápidos cuando el usuario interactúa con la aplicación móvil web.
  3. Responsive: la aplicación debe adaptarse a los los diferentes tamaños de los diferentes dispositivos existentes. La aplicación web perfecta debería ser igual de versatil que un líquido, que toma la forma de su recipiente.
  4. Instalable: si queremos acercar las aplicaciones web progresivas a las aplicaciones nativas, deben ser instalables y deben residir en la pantalla de inicio junto con el resto de las aplicaciones nativas, para que el usuario pueda acceder a la PWA en un solo clic.
  5. Pantalla de bienvenida: Las Progressive Web Applicaton deben agregar una pantalla de bienvenida durante el inicio de la aplicación. Esto hace que la PWA se parezca más a una aplicación nativa.
  6. Muy atractiva: la aplicación móvil debe captar la atención de los usuarios. Una PWA proporciona características como notificación push, icono de pantalla de inicio, ejecutar en modo pantalla completa y con la opción de ejecutarse sin conexión.

¿Cómo es posible que una PWA funcione sin que haya conexión?

Ese fue exactamente mi primera incógnia acerca de las PWA. ¿Cómo se pueden funcionar las aplicaciones web progresivas sin Internet?

Todos sabemos que las aplicaciones nativas pueden abrirse sin una conexión a Internet porque cuando las descargamos e instalamos, los recursos críticos como los componentes de la interfaz de usuario y otros datos se almacenan en el dispositivo, como usuario o contraseñas, pedidos en las cestas … bueno, esto es exactamente lo que sucede en un PWA.

El PWA almacena archivos HTML, archivos CSS e imágenes en la memoria caché del navegador y los desarrolladores de aplicaciones móviles pueden hacer uso de todos estos elementos, de tal manera que la aplicación tiene recuerdo de lo que has hecho en anteriores sesiones, al contrario que una página web, que como mucho almance cierta información, las famosas cookies que se utilizan para rastrear el comportamiento del usuario, con fines de marketing tales como los utilizado en la publicidad programática.

¿Cuáles son los componentes técnicos de una PWA?

PWA tiene algunos componentes técnicos necesarios que convierten una web en una aplicación web progresiva. Vamos a obtener una visión general de cada uno de ellos.

1. Trabajador del servicio (service worker): Nuestras aplicaciones web se conectan directamente con la red y, si no existiera conexión, la pantalla muestra el famoso dinosaurio.

Lo que aparece en la pantalla cuando nuestra web normal no puede conectarse a internet

Aquí hay una oportunidad para optimizar este suceso. En la primera carga, el trabajador del servicio almacena los recursos necesarios en la memoria caché del navegador. Y cuando el usuario visita la aplicación la próxima vez, los trabajadores del servicio verifican la memoria caché y le devuelven la respuesta al usuario incluso antes de verificar la red.

Un trabajador de servicio es  un componente del código en JavaScript que funciona como un proxy entre el navegador y la red. Un trabajador de servicios gestiona las notificaciones push y ayuda a mostrar las primeras pantallas cuando no hay conexión de red utilizando la API con el caché del navegador.

Así es como funciona el trabajador del servicio cuando no hay conexión a la Red

Esto acelera el rendimiento de la aplicación móvil, tenga o no el dispositivo conexión a Internet.

El desarrollador tiene control total sobre el comportamiento de la aplicación y cómo debe responder en los diferentes escenarios. El trabajador de servicio tiene diferentes respuestas a distintos eventos que suceden en la aplicación.

Una vez que el almacenamiento en caché está completo y listo para las visitas sin conexión, también puede optar por alardear al respecto mostrando una nota que dice que el almacenamiento en caché está completo y que el usuario también puede visitarlo sin conexión.

2. El archivo de manifiesto (manifest.json)

Es un archivo JSON, es un archivo de configuración que contiene la información de su aplicación, como el icono que se mostrará en la pantalla de inicio cuando esté instalado, el nombre corto de la aplicación, el color de fondo o el tema.

Si el archivo de manifiesto está presente, el navegador Chrome activará automáticamente el banner de instalación de la aplicación web, y si el usuario está de acuerdo, se agregará el icono a la pantalla de inicio y se instala la PWA.

A continuación te mostramos un ejemplo de archivo de manifiesto

{ 
  "short_name": "Spinner", 
  "name": "Fidget spinner", 
  "icons": [ 
    { 
      "src": "/images/icons-192.png", 
      "type": "image / png", 
      " tamaños ":" 192x192 " 
    }, 
    { 
      " src ":" /images/icons-512.png ", 
      " tipo ":" image / png ", 
      " tamaños ":" 512x512 " 
    } 
  ], 
  " start_url ":" / home /? source = pwa ", 
  " background_color ":" # 3367D6 ", 
  " display ":" standalone ", 
  " scope ":" / home / ",
  "theme_color": "# 3367D6" 
}

Aquí puedes ver este archivo en acción:

3. El Servicio HTTPS tienen la capacidad de lanzar solicitudes a la red y dar una respuesta. El servidor HTTPS realiza todas las acciones en el lado del cliente. Por lo tanto, PWA requiere un protocolo seguro HTTPS.

El trabajador del servicio tiene la capacidad de recibir notificaciones push y llevar a cabo la sincronización en segundo plano, lo que definitivamente mejora la experiencia del usuario, manteniendo toda su atención. La notificación push y la sincronización de fondo son opcionales, pero se recomiendan para proporcionar una experiencia más nativa.

Tiempo de demostración

Hoy en día, hay muchos PWA disponibles en el Mercado. Si quieres jugar con un PWA y quieres ver a los trabajadores de servicio en acción, visita fidgetspin.xyz y cambia a la pestaña Aplicación en DevTools de Chrome.

  1. Estado : nos dice que el trabajador del servicio está activado y ejecutándose.
  2. Sin conexión : al marcar esta opción, Chrome ejecuta la aplicación aunque no esté en línea. Al actualizar la pestaña, emulará cómo respondería la PWA cuando no haya red. También puedes apagar la wifi o los datos para probar el PWA.
  3. Caché : esta sección muestra lo que el trabajador del servicio almacena en la caché.
  4. Push & Sync : estas secciones se utilizan durante el desarrollo para probar la notificación push y la sincronización en segundo plano.

Puedes visitar https://pwa.rocks/ que tiene una buena colección de aplicaciones PWA.

Herramientas y bibliotecas

Hay pocas herramientas de código abierto disponibles que mejoran y facilitan el desarrollo de PWA.

  1. Lighthouse es una herramienta de auditoría que puede ejecutarse en cualquier página web, pública o personal, y genera un informe con la lista de verificación requerida para PWA. Esto se puede usar durante el desarrollo de tu PWA para verificar y obtener recomendaciones para mejorar aún más la experiencia.
  2. Workbox es una colección de bibliotecas, de código abierto de Google, y se puede utilizar para generar el archivo de trabajador de servicio. Workbox también viene con varias estrategias de almacenamiento en caché de imágenes y otros recursos.

Historias de éxito de PWA

Google publica las historias de éxito de las empresas que implementaron PWA. Visita esta página para leer más sobre cómo las empresas han resuelto los problemas para manejar una red lenta, cómo optimizaron la experiencia del usuario y obtuvieron hasta un 80% de aumento en las conversiones y en el rendimiento SEO.

Esto muestra los diferentes problemas a los que se enfrentan las empresas en todo el mundo y cómo lo resolvieron usando PWA. Estoy bastante seguro de que obtendrás pistas de cómo una PWA también puede resultarte útil.

Te recomiendo que le eches un vistazo al ranking de empresas de desarrollo móvil que ha realizado el prestigioso think tank de marketing en Madrid.

ranking de empresas de desarrollo móvil