La guía completa de aplicaciones web progresivas

Una aplicación web progresiva es una aplicación que puede proporcionar funciones adicionales basadas en la compatibilidad del dispositivo, incluidas las capacidades fuera de línea, las notificaciones push y el aspecto y la velocidad de la aplicación casi nativa, y el almacenamiento en caché local de recursos.

Introducción

Las aplicaciones web progresivas (PWA) son la última tendencia dedesarrollo de aplicaciones móvilesutilizando tecnologías web, en el momento de redactar este artículo (marzo de 2018) funcionan en dispositivos Android e iOS con iOS 11.3 o superior y macOS 10.13.4 o superior.

PWA es un término que identifica un conjunto de técnicas que tienen el objetivo de crear una mejor experiencia para las aplicaciones basadas en la web.

¿Qué es una aplicación web progresiva?

Una aplicación web progresiva es una aplicación quelata proporcionar funciones adicionales basadas en la compatibilidad del dispositivo, proporcionando capacidad fuera de línea, notificaciones push y apariencia y velocidad de aplicaciones casi nativas, y almacenamiento en caché local de recursos.

Esta técnica fue introducida originalmente por Google en 2015 y demuestra traer muchas ventajas tanto para el desarrollador como para los usuarios.

Los desarrolladores tienen acceso a la construccióncasi de primera claseaplicaciones que utilizan una pila web, lo que siempre es considerablemente más fácil y económico que crear aplicaciones nativas, especialmente cuando se consideran las implicaciones de crear y mantener aplicaciones multiplataforma.

Los desarrolladores pueden beneficiarse de unafricción de instalación reducida, en un momento en el que tener una aplicación en la tienda en realidad no aporta nada en términos de visibilidad para el 99,99% de las aplicaciones, y la búsqueda de Google puede proporcionar los mismos beneficios, si no más.

Una aplicación web progresiva es un sitio web que se desarrolla con ciertas tecnologías que hacen que la experiencia móvil sea mucho más placentera que un sitio web normal optimizado para dispositivos móviles, hasta el punto de que casi funciona como una aplicación nativa, ya que ofrece las siguientes características:

  • Soporte sin conexión
  • Se carga rapido
  • Es seguro
  • Es capaz de emitir notificaciones push
  • Tiene una experiencia de usuario inmersiva a pantalla completa sin la barra de URL

Las plataformas móviles (Android en el momento de escribir este artículo, pero no se limita técnicamente a eso) ofrecen un soporte cada vez mayor para las aplicaciones web progresivas hasta el punto de pedir al usuario queagregar la aplicación a la pantalla de iniciocuando detectan un sitio que está visitando un usuario es una PWA.

Pero primero, una pequeña aclaración sobre el nombre.Aplicación web progresivapuede ser untérmino confusoy una buena definición esaplicaciones web que aprovechan las funciones de los navegadores modernos (comotrabajadores weby el manifiesto de la aplicación web) para permitir que sus dispositivos móviles "actualicen" la aplicación a la función de una aplicación ciudadana de primera clase..

Alternativas a las aplicaciones web progresivas

¿Cómo se compara una PWA con las alternativas cuando se trata de crear una experiencia móvil?

Centrémonos en los pros y los contras de cada uno y veamos dónde encajan bien las PWA.

Aplicaciones móviles nativas

Las aplicaciones móviles nativas son la forma más obvia de crear una aplicación móvil. Objective-C o Swift en iOS, Java / Kotlin en Android y C # en Windows Phone.

Cada plataforma tiene sus propias convenciones de UI y UX, y los widgets nativos brindan la experiencia que el usuario espera. Se pueden implementar y distribuir a través de la plataforma App Store.

El principal problema con las aplicaciones nativas es que el desarrollo multiplataforma requiere aprender, dominar y mantenerse actualizado con muchas metodologías diferentes y mejores prácticas, por lo que si, por ejemplo, tiene un equipo pequeño o incluso es un desarrollador en solitario que crea una aplicación en 3 plataformas, debe dedicar mucho tiempo a aprender la tecnología, pero también el entorno, administrar diferentes bibliotecas y usar diferentes flujos de trabajo (por ejemplo, iCloud solo funciona en dispositivos iOS, no hay una versión de Android).

Aplicaciones híbridas

Las aplicaciones híbridas se crean utilizando tecnologías web, pero se implementan en la App Store. En el medio se encuentra un marco o alguna forma de empaquetar la aplicación para que sea posible enviarla para su revisión a la App Store tradicional.

Las plataformas más comunes son Phonegap, Xamarin, Ionic Framework y muchas otras y, por lo general, lo que ve en la página es un WebView que básicamente carga un sitio web local.

El aspecto clave de las aplicaciones híbridas es laescribe una vez, corre a cualquier lugarconcepto, el código de la plataforma diferente se genera en el momento de la compilación, y estás creando aplicaciones usandoJavaScript, HTML y CSS, lo cual es asombroso, y las capacidades del dispositivo (micrófono, cámara, red, gps…) están expuestas a través de API de JavaScript.

La parte mala de crear aplicaciones híbridas es que, a menos que haga un gran trabajo, podría conformarse con proporcionar un denominador común, creando de manera efectiva una aplicación que no sea óptima en todas las plataformas porque la aplicación ignora las pautas de interacción persona-computadora específicas de la plataforma. .

Además, el rendimiento para vistas complejas puede verse afectado.

Aplicaciones creadas con React Native

React Native expone los controles nativos del dispositivo móvil a través de una API de JavaScript, pero efectivamente está creando una aplicación nativa, no incrustando un sitio web dentro de un WebView.

Su lema, para distinguir este enfoque de las aplicaciones híbridas, esaprende una vez, escribe en cualquier lugar, lo que significa que el enfoque es el mismo en todas las plataformas, pero creará aplicaciones completamente separadas para brindar una gran experiencia en cada plataforma.

El rendimiento es comparable al de las aplicaciones nativas, ya que lo que crea es esencialmente una aplicación nativa, que se distribuye a través de la App Store.

Características de las aplicaciones web progresivas

En la última sección vio la principalcompetidoresde aplicaciones web progresivas. Entonces, ¿cómo se encuentran las PWA en comparación con ellos y cuáles son sus características principales?

Remember, currently Progressive Web Apps are Android-only IOS support was added in March 2019

Características

Las aplicaciones web progresivas tienen una cosa que las separa por completo de los enfoques anteriores:no se implementan en la tienda de aplicaciones..

Esta es una ventaja clave, ya que la tienda de aplicaciones es beneficiosa si tienes el alcance y la suerte de aparecer, lo que puede hacer que tu aplicación se vuelva viral, pero a menos que estés en el 0,001%, no obtendrás muchos beneficios. tener tu pequeño lugar en la App Store.

Las aplicaciones web progresivas sondetectable mediante motores de búsqueda, y cuando un usuario llega a su sitio que tiene capacidades de PWA,el navegador en combinación con el dispositivo pregunta al usuario si desea instalar la aplicación en la pantalla de inicio. Esto es enorme porque el SEO regular se puede aplicar a su PWA, lo que lleva a una dependencia mucho menor de la adquisición pagada.

No estar en la App Store significano necesita la aprobación de Apple o Googlepara estar en los bolsillos de los usuarios, y puede publicar actualizaciones cuando lo desee, sin tener que pasar por el proceso de aprobación estándar que es típico de las aplicaciones de iOS.

Los PWA son básicamente aplicaciones HTML5 / sitios web receptivos con esteroides, con algunas tecnologías clave que se introdujeron recientemente y que hacen posibles algunas de las características clave. Si recuerdas, el iPhone original vino sin la opción de desarrollar aplicaciones nativas, y se les dijo a los desarrolladores que desarrollaran aplicaciones móviles HTML5, que podrían instalarse en la pantalla de inicio, pero la tecnología en ese entonces no estaba lista para esto.

Aplicaciones web progresivasejecutar sin conexión.

El uso detrabajadores de servicioPermitir que la aplicación tenga siempre contenido nuevo, descargarlo en segundo plano y brindar soporte paranotificaciones pushpara brindar mayores oportunidades de reenganche.

Además, la capacidad de compartir ofrece una experiencia mucho más agradable para los usuarios que desean compartir su aplicación, ya que solo necesitan una URL.

Beneficios

Entonces, ¿por qué los usuarios y desarrolladores deberían preocuparse por las aplicaciones web progresivas?

  1. Los PWA son más ligeros. Las aplicaciones nativas pueden pesar 200 MB o más, mientras que una PWA podría estar en el rango de los KB.
  2. Sin código de plataforma nativo
  3. Reducir el costo de adquisición (es mucho más difícil convencer a un usuario de que instale una aplicación que visitar un sitio web para obtener la primera experiencia)
  4. Se necesita un esfuerzo mucho menor para crear y publicar actualizaciones
  5. Mucho más soporte para enlaces profundos que las aplicaciones normales de la tienda de aplicaciones

Conceptos básicos

  • Sensible: la interfaz de usuario se adapta al tamaño de la pantalla del dispositivo
  • Sensación de aplicación: no se siente como un sitio web, sino como una aplicación tanto como sea posible
  • Soporte sin conexión: utilizará el almacenamiento del dispositivo para proporcionar una experiencia sin conexión
  • Instalable: el navegador del dispositivo solicita al usuario que instale su aplicación
  • Volver a comprometer: las notificaciones push ayudan a los usuarios a redescubrir su aplicación una vez instalada
  • Descubrible: los motores de búsqueda y la optimización SEO pueden proporcionar muchos más usuarios que la tienda de aplicaciones
  • Fresco: la aplicación se actualiza a sí misma y el contenido una vez que está en línea
  • A salvo: usa HTTPS
  • Progresivo: funcionará en cualquier dispositivo, incluso uno más antiguo, incluso si tiene menos funciones (por ejemplo, solo como un sitio web, no instalable)
  • Enlazable: fácil de señalar mediante URL

Trabajadores de servicios

Parte de la definición de Progressive Web App es que debe funcionar sin conexión.

Dado que lo que permite que la aplicación web funcione sin conexión es el Service Worker, esto implica queLos trabajadores de servicios son una parte obligatoria de una aplicación web progresiva.

Verhttp://caniuse.com/#feat=serviceworkerspara obtener datos actualizados sobre la compatibilidad con los navegadores.

SUGERENCIA: No confunda los trabajadores de servicios con los trabajadores web. Son algo completamente diferente.

Un Service Worker es un archivo JavaScript que actúa como intermediario entre la aplicación web y la red. Debido a esto, puede proporcionar servicios de caché y acelerar el procesamiento de la aplicación y mejorar la experiencia del usuario.

Por razones de seguridad, solo los sitios HTTPS pueden hacer uso de Service Workers, y esto es parte de las razones por las que una aplicación web progresiva debe servirse a través de HTTPS.

Los Service Workers no están disponibles en el dispositivo la primera vez que el usuario visita la aplicación. Lo que sucede es que en la primera visita se instala el trabajador web, y luego, en visitas posteriores a páginas separadas del sitio, se llamará a este trabajador de servicio.

Revisar laguía completa para los trabajadores de servicios

El manifiesto de la aplicación

El manifiesto de la aplicación es un archivo JSON que puede utilizar para proporcionar la información del dispositivo sobre su aplicación web progresiva.

Agrega un enlace al manifiesto entodosel encabezado de las páginas de su sitio web:

<link rel="manifest" href="/manifest.webmanifest">

Este archivo le dirá al dispositivo cómo configurar:

  • El nombre y el nombre corto de la aplicación.
  • Las ubicaciones de los iconos, en varios tamaños.
  • La URL de inicio, relativa al dominio.
  • La orientación predeterminada
  • La pantalla de bienvenida

Ejemplo

{
  "name": "The Weather App",
  "short_name": "Weather",
  "description": "Progressive Web App Example",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "/index.html?utm_source=app_manifest",
  "orientation": "portrait",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

El manifiesto de la aplicación es un borrador de trabajo del W3C, accesible enhttps://www.w3.org/TR/appmanifest/

El Shell de la aplicación

App Shell no es una tecnología, sino unconcepto de diseñodestinado a cargar y renderizar el contenedor de la aplicación web primero, y el contenido real poco después, para darle al usuario una buena impresión similar a la de una aplicación.

Este es el equivalente a las sugerencias de Apple HIG (Human Interface Guidelines) para usar una pantalla de presentación que se asemeja a la interfaz de usuario, para dar una pista psicológica que se encontró que reduce la percepción de que la aplicación tarda mucho en cargar.

Almacenamiento en caché

El Shell de la aplicación se almacena en caché por separado del contenido y está configurado para que la recuperación de los bloques de construcción del shell desde el caché lleve muy poco tiempo.

Obtenga más información sobre App Shell enhttps://developers.google.com/web/updates/2015/11/app-shell


Más tutoriales de navegador: