Una aplicación web progresiva ( PWA ) es un tipo de software de aplicación entregado a través de la web , construido utilizando tecnologías web comunes que incluyen HTML , CSS y JavaScript . Está diseñado para funcionar en cualquier plataforma que utilice un navegador compatible con los estándares , incluidos dispositivos móviles y de escritorio .
Dado que una aplicación web progresiva es un tipo de página web o sitio web conocido como aplicación web , no es necesario agruparlos ni distribuirlos por separado. Los desarrolladores pueden simplemente publicar la aplicación web en línea, asegurarse de que cumpla con los "requisitos de instalación" básicos, y los usuarios podrán agregar la aplicación a su pantalla de inicio. Publicar la aplicación en sistemas de distribución digital como Apple App Store o Google Play es opcional. [1]
A partir de 2021, las funciones de PWA son compatibles en diversos grados con Google Chrome , Apple Safari , Firefox para Android y Microsoft Edge [2] [3], pero no con Firefox para escritorio. [4] Varias empresas destacan mejoras significativas en una amplia variedad de indicadores clave de rendimiento después de la implementación de PWA, como un mayor tiempo dedicado a la página, conversiones o ingresos. [ cita requerida ]
Soporte del navegador
Navegador | Apoyo | Comentario | ||||
---|---|---|---|---|---|---|
Ventanas | Linux | Mac OS | Androide | iOS | ||
A base de cromo | sí | sí | sí | sí | No | Incluye Google Chrome , Microsoft Edge , [5] Brave , Opera y otros . |
Firefox | No [4] | No [4] | No | Parcial | No | |
Safari | N / A | N / A | sí | N / A | Sí (iOS 11.3+) [6] |
Historia
Antecesores
En el lanzamiento del iPhone en 2007, Steve Jobs anunció que las aplicaciones web (desarrolladas en HTML5 usando la arquitectura AJAX ) serían el formato estándar para las aplicaciones de iPhone. No se requería ningún kit de desarrollo de software (SDK) y las aplicaciones se integrarían completamente en el dispositivo a través del motor del navegador Safari . [7] Este modelo se cambió más tarde para la App Store, como un medio para prevenir los jailbreakers y apaciguar a los desarrolladores frustrados. [8] En octubre de 2007 Jobs anunció que se lanzaría un SDK al año siguiente. [7] Como resultado, aunque Apple continuó admitiendo aplicaciones web, la gran mayoría de las aplicaciones de iOS se desplazaron hacia la App Store.
A principios de la década de 2010, las páginas web dinámicas permitieron que las tecnologías web se utilizaran para crear aplicaciones web interactivas . El diseño web receptivo y la flexibilidad de tamaño de pantalla que proporciona, hicieron que el desarrollo de PWA fuera más accesible. Las continuas mejoras en HTML, CSS y JavaScript permitieron que las aplicaciones web incorporaran mayores niveles de interactividad, lo que posibilitó experiencias similares a las nativas en un sitio web. [9]
En 2013, Mozilla lanzó Firefox OS . Estaba destinado a ser un sistema operativo de código abierto para ejecutar aplicaciones web como aplicaciones nativas en dispositivos móviles. Firefox OS se basó en el motor de renderizado Gecko con una interfaz de usuario llamada Gaia, escrita en HTML5. El desarrollo de Firefox OS finalizó en 2016, [ cita requerida ] y el proyecto se interrumpió por completo en 2017, [10] aunque se utilizó una bifurcación de Firefox OS como base de KaiOS , una plataforma de teléfono con funciones. [11]
Introducción inicial
En 2015, la diseñadora Frances Berriman y el ingeniero de Google Chrome Alex Russell acuñaron el término "aplicaciones web progresivas" [12] para describir las aplicaciones que aprovechan las nuevas funciones compatibles con los navegadores modernos, incluidos los trabajadores de servicio y los manifiestos de aplicaciones web , que permiten a los usuarios actualizar las aplicaciones web. a aplicaciones web progresivas en su sistema operativo (SO) nativo . Luego, Google realizó importantes esfuerzos para promover el desarrollo de PWA para Android. [13] [14] Firefox introdujo soporte para trabajadores de servicios en 2016, y Microsoft Edge y Apple Safari siguieron en 2018, [15] [13] haciendo que los trabajadores de servicios estén disponibles en todos los sistemas principales.
Para 2019, las PWA estaban disponibles en los navegadores de escritorio Microsoft Edge [5] (en Windows ) y Google Chrome [16] (en Windows, macOS , Chrome OS y Linux ).
En diciembre de 2020, Firefox para escritorio abandonó la implementación de PWA (específicamente, eliminó el prototipo de configuración del " navegador específico del sitio " que había estado disponible como función experimental). Un arquitecto de Firefox señaló: "La señal que espero que estemos enviando es que la compatibilidad con PWA no llegará pronto al Firefox de escritorio". [4] Mozilla todavía planea admitir PWA en Android. [17]
Tiendas de aplicaciones
Dado que una aplicación web progresiva es un tipo de página web o sitio web conocido como aplicación web , no es necesario agruparlos ni distribuirlos por separado. En particular, no existe ningún requisito para que los desarrolladores o usuarios instalen las aplicaciones web a través de sistemas de distribución digital como Apple App Store , Google Play , Microsoft Store o Samsung Galaxy Store . En diversos grados, las principales tiendas de aplicaciones admiten PWA, lo que les permite encontrarlas en las tiendas de aplicaciones. [1] Google Play, Microsoft Store, [18] y Samsung Galaxy Store admiten PWA, pero la App Store de Apple no. Microsoft Store publica automáticamente algunas PWA calificadas (sin la solicitud de los autores de la aplicación) después de descubrirlas a través de la indexación de Bing . [19]
Caracteristicas
Las aplicaciones web progresivas están diseñadas para funcionar en cualquier navegador que cumpla con los estándares web apropiados . Al igual que con otras soluciones multiplataforma, el objetivo es ayudar a los desarrolladores a crear aplicaciones multiplataforma más fácilmente de lo que lo harían con aplicaciones nativas. [13] Según Google Developers, [12] [20] [21] PWA tiene como objetivo:
- Progresivo: funciona para todos los usuarios, independientemente de la elección del navegador, utilizando principios de mejora progresiva .
- Capacidad de respuesta: se adapta a cualquier factor de forma: escritorio, dispositivo móvil, tableta o formularios que aún no han aparecido.
- Más rápido después de la carga inicial: las aplicaciones web progresivas utilizan trabajadores de servicio para crear cachés de contenido programables. A diferencia de la caché web HTTP normal , que almacena en caché el contenido después del primer uso y luego se basa en varias heurísticas para adivinar cuándo el contenido ya no es necesario, las cachés programables pueden precargar explícitamente el contenido antes de que se use por primera vez y descartarlo explícitamente cuando se necesite. ya no es necesario. [22]
- Independiente de la conectividad: los trabajadores del servicio permiten usos fuera de línea o en redes de baja calidad. Se requiere un trabajador de servicio para que se pueda instalar una aplicación.
- Similar a una aplicación: se siente como una aplicación para el usuario con interacciones y navegación al estilo de una aplicación.
- Fresco: siempre actualizado debido al proceso de actualización del trabajador de servicio.
- Seguro: se sirve a través de HTTPS para evitar espionaje y garantizar que el contenido no haya sido manipulado.
- Detectable: identificable como una "aplicación" por manifest.json [23] y el registro del trabajador del servicio, y detectable por los motores de búsqueda.
- Re-interactiva: capacidad de usar notificaciones automáticas para mantener el compromiso con el usuario.
- Instalable: proporciona iconos de pantalla de inicio sin el uso de una tienda de aplicaciones de terceros .
- Vinculable: se puede compartir fácilmente a través de una URL y no requiere una instalación compleja.
Algunas aplicaciones web progresivas utilizan un enfoque arquitectónico llamado App Shell Model. [24] En este modelo, los trabajadores del servicio almacenan la interfaz de usuario básica o " shell " de la aplicación web de diseño web adaptable en la memoria caché fuera de línea del navegador . Este modelo permite que las PWA mantengan un uso similar al nativo con o sin conectividad web. Esto puede mejorar el tiempo de carga al proporcionar un marco estático inicial , un diseño o una arquitectura en la que el contenido se puede cargar de forma progresiva y dinámica. [25]
Criterios de instalabilidad
Los criterios técnicos básicos para que un sitio se considere una aplicación web progresiva y, por lo tanto, "instalable" por los navegadores, fueron descritos por Russell en una publicación de seguimiento [26] y actualizados desde: [27]
- Procede de un origen seguro. Se sirve sobre TLS y pantallas de candado verde (sin contenido mixto activo).
- Cargue sin conexión (incluso si solo es una página personalizada sin conexión). Por implicación, esto significa que las aplicaciones web progresivas deben registrar un trabajador de servicio con un controlador de búsqueda.
- Referencia un manifiesto de aplicación web con al menos los cinco propiedades clave:
name
oshort_name
,start_url
ydisplay
(con un valor destandalone
,fullscreen
ominimal-ui
), yicons
(con 192px y un 512px versiones)
Comparación con aplicaciones nativas
En 2017, Twitter lanzó Twitter Lite, una alternativa de PWA a las aplicaciones nativas oficiales de Android e iOS . Según Twitter, Twitter Lite consumía solo del 1 al 3% del tamaño de las aplicaciones nativas. [28] En julio de 2019, Twitter comenzó a ofrecer a todos los usuarios del sitio web Twitter Lite de forma predeterminada. [29] El 1 de junio de 2020, Twitter desactivó el diseño del sitio web heredado, dejando la versión progresiva de la aplicación web como única opción. [30]
Starbucks ofrece PWA, que es un 99,84% más pequeña que la aplicación de iOS equivalente. Después de implementar PWA, Starbucks duplicó la cantidad de pedidos en línea, y los usuarios de computadoras de escritorio realizaron pedidos aproximadamente al mismo ritmo que los usuarios de aplicaciones móviles. [31]
Tecnologias
Hay muchas tecnologías de uso común para crear aplicaciones web progresivas. Una aplicación web se considera una PWA si satisface los "criterios de instalación" y, por lo tanto, puede funcionar sin conexión y puede agregarse a la pantalla de inicio del dispositivo. Para cumplir con esta definición, todas las PWA requieren como mínimo un trabajador de servicio y un manifiesto. [32] [33] [34]
Manifiesto
El manifiesto de la aplicación web [35] es una especificación del W3C que define un manifiesto basado en JSON (generalmente etiquetado como manifest.json) [23] para proporcionar a los desarrolladores un lugar centralizado para colocar los metadatos asociados con una aplicación web que incluye:
- El nombre de la aplicación web.
- Vínculos a los íconos de la aplicación web u objetos de imagen
- La URL preferida para iniciar o abrir la aplicación web.
- Los datos de configuración de la aplicación web
- Orientación predeterminada de la aplicación web
- La opción para configurar el modo de visualización, por ejemplo, pantalla completa
Estos metadatos son cruciales para que una aplicación se agregue a una pantalla de inicio o se enumere junto con las aplicaciones nativas.
soporte iOS
iOS Safari implementa parcialmente manifiestos, mientras que la mayoría de los metadatos de PWA se pueden definir a través de extensiones específicas de Apple para las metaetiquetas. Estas etiquetas permiten a los desarrolladores habilitar la visualización en pantalla completa, definir iconos y pantallas de presentación y especificar un nombre para la aplicación. [36] [37]
WebAssembly
WebAssembly permite que el código precompilado se ejecute en un navegador web, a una velocidad casi nativa. [38] Por lo tanto, las bibliotecas escritas en lenguajes como C se pueden agregar a las aplicaciones web. Debido al costo de pasar datos de JavaScript a WebAssembly , los usos a corto plazo serán principalmente de procesamiento numérico (como reconocimiento de voz y visión por computadora), en lugar de aplicaciones completas.
Almacenamiento de datos
Los contextos de ejecución de aplicaciones web progresivas se descargan siempre que sea posible, por lo que las aplicaciones web progresivas deben almacenar la mayoría del estado interno a largo plazo (datos de usuario, recursos de aplicaciones cargados dinámicamente) de una de las siguientes maneras
Almacenamiento web
Web Storage es una API estándar de W3C que permite el almacenamiento de valores clave en navegadores modernos. La API consta de dos objetos, sessionStorage (que habilita el almacenamiento de solo sesión que se borra al finalizar la sesión del navegador) y localStorage (que habilita el almacenamiento que persiste entre sesiones). [39]
Trabajadores de servicios
Un trabajador de servicios es un trabajador web que implementa un proxy de red programable que puede responder a las solicitudes web / HTTP del documento principal. Puede verificar la disponibilidad de un servidor remoto y almacenar en caché el contenido cuando ese servidor está disponible, y entregar ese contenido más tarde al documento. Los trabajadores de servicios, como cualquier otro trabajador web, trabajan por separado del contexto del documento principal. Los trabajadores del servicio pueden manejar notificaciones push y sincronizar datos en segundo plano, almacenar en caché o recuperar solicitudes de recursos, interceptar solicitudes de red y recibir actualizaciones centralizadas independientemente del documento que las registró, incluso cuando ese documento no está cargado. [40]
Los trabajadores del servicio pasan por un ciclo de vida de tres pasos de registro, instalación y activación. El registro implica decirle al navegador la ubicación del trabajador del servicio en preparación para la instalación. La instalación se produce cuando no hay ningún service worker instalado en el navegador de la aplicación web o si hay una actualización del service worker. La activación ocurre cuando todas las páginas de las PWA están cerradas, por lo que no hay conflicto entre la versión anterior y la actualizada. El ciclo de vida también ayuda a mantener la coherencia al cambiar entre versiones de service worker, ya que solo un service worker puede estar activo para un dominio. [40]
API de base de datos indexada
La API de base de datos indexada es una API de base de datos estándar de W3C disponible en todos los navegadores principales. La API es compatible con navegadores modernos y permite el almacenamiento de objetos JSON y cualquier estructura representable como una cadena. [41] La API de base de datos indexada se puede utilizar con una biblioteca contenedora que proporciona construcciones adicionales a su alrededor.
AppCache (obsoleto)
Application Cache (o AppCache o manifiesto de caché HTML5) es una tecnología anterior que permitía a las aplicaciones web almacenar en caché el contenido por adelantado para su uso posterior cuando el dispositivo está fuera de línea. [42] Fue suficiente para aplicaciones de una sola página para las que fue diseñado, pero falla de manera problemática para aplicaciones de múltiples páginas como wikis. [43] A partir de mayo de 2021, AppCache ya no está ampliamente disponible. Se eliminó de Firefox 85, [44] y se deshabilitó de forma predeterminada en Chrome 85 (con la eliminación completa planeada para Chrome 93). [45]
Ver también
- Aplicación HTML , una alternativa obsoleta de Microsoft
- Aplicación web enriquecida , otra alternativa obsoleta
enlaces externos
- Lighthouse , una herramienta de auditoría de código abierto para PWA desarrollada por Google
- Índice de estándares del Grupo de Trabajo de Aplicaciones Web
Referencias
- ^ a b "Aplicaciones web progresivas | Software AG" . techradar.softwareag.com . Consultado el 25 de septiembre de 2020 .
- ^ "¿Puedo usar pwa?" . CanIUse . Consultado el 27 de enero de 2021 .
- ^ "¿Está listo el trabajador de servicios?" . Jake Archibald.
- ^ a b c d Newman, Jared (26 de enero de 2021). "Firefox acaba de alejarse de una pieza clave de la web abierta" . Empresa rápida . Consultado el 27 de enero de 2021 .
- ^ a b "Introducción a las aplicaciones web progresivas en Windows" . Documentación de Microsoft Edge . 13 de marzo de 2021 . Consultado el 13 de marzo de 2021 .
- ^ Firtman, Maximiliano (18 de agosto de 2020). "Las aplicaciones web progresivas en iOS están aquí 🚀" . Medio . Consultado el 29 de enero de 2021 .
- ^ a b Ritchie, Rene (5 de marzo de 2018). "App Store Year Zero: las aplicaciones web no dulces llevaron el iPhone a un SDK" . iMore . Consultado el 23 de mayo de 2019 .
- ^ "Visión original de Jobs para el iPhone: sin aplicaciones nativas de terceros" . 9to5Mac . 21 de octubre de 2011 . Consultado el 22 de mayo de 2019 .
- ^ Marcotte, Ethan. "Diseño Web Responsive" . Una lista aparte . Consultado el 25 de mayo de 2010 .
- ^ Hoffman, Chris; PCWorld | (28 de septiembre de 2016). "Mozilla está deteniendo todo desarrollo comercial en Firefox OS" . PCWorld . Consultado el 17 de marzo de 2021 .
- ^ "KaiOS, una plataforma de teléfonos de funciones construida sobre las cenizas de Firefox OS, agrega las aplicaciones de Facebook, Twitter y Google" . TechCrunch . Consultado el 17 de marzo de 2021 .
- ^ a b Russell, Alex. "Aplicaciones web progresivas: escapar de las pestañas sin perder el alma" . Consultado el 15 de junio de 2015 .
- ^ a b c Evans, Jonny (26 de enero de 2018). "Apple vuelve al futuro con aplicaciones web" . Computerworld . Consultado el 23 de mayo de 2019 .
- ^ Ladage, Aaron (17 de abril de 2018). "Las aplicaciones web progresivas están aquí y lo están cambiando todo" . DEG . Consultado el 23 de mayo de 2019 .
- ^ "Puedo usar ... Tablas de soporte para HTML5, CSS3, etc." . caniuse.com . Consultado el 16 de mayo de 2021 .
- ^ LePage, Pete (4 de junio de 2019). "Aplicaciones web progresivas en el escritorio" . Desarrolladores de Google . Consultado el 13 de septiembre de 2019 .
- ^ agi90 (19 de diciembre de 2020). "Comentar" . Reddit .
No tenemos planes de eliminar las PWA en dispositivos móviles que yo sepa.
- ^ MSEdgeTeam. "Publique su aplicación web progresiva en Microsoft Store - Microsoft Edge Development" . docs.microsoft.com . Consultado el 16 de mayo de 2021 .
- ^ "El primer lote de aplicaciones web progresivas de Windows 10 ya está aquí" . Windows Central . 2018-04-07 . Consultado el 16 de mayo de 2021 .
- ^ "Su primera aplicación web progresiva | Fundamentos web - Desarrolladores de Google" . Tu primera aplicación web progresiva | Conceptos básicos de la Web: desarrolladores de Google . Consultado el 17 de julio de 2016 .
- ^ Desarrolladores de Google. "Aplicación web progresiva" . Consultado el 15 de junio de 2015 .
- ^ "Caché de trabajador de servicio y caché HTTP" . web.dev . Consultado el 19 de mayo de 2021 .
- ^ a b W3C "Web App Manifest", Borrador de trabajo , consultado el 12 de septiembre de 2016
- ^ "El modelo de shell de la aplicación" .
- ^ Osmani, Addi. "El modelo de shell de la aplicación | Fundamentos web" . Desarrolladores de Google . Consultado el 23 de mayo de 2019 .
- ^ Russell, Alex. "Qué, exactamente, hace una aplicación web progresiva" . Consultado el 18 de octubre de 2016 .
- ^ "¿Qué se necesita para ser instalable?" . web.dev . Consultado el 19 de mayo de 2021 .
- ^ "Cómo construimos Twitter Lite" . blog.twitter.com . Consultado el 27 de enero de 2021 .
- ^ "Twitter comienza a implementar un sitio web actualizado con un nuevo diseño" . MacRumors .
- ^ "Twitter advierte sobre el cierre del tema del sitio heredado el 1 de junio" . BleepingComputer .
- ^ "12 mejores ejemplos de aplicaciones web progresivas (PWA) en 2021" . SimiCart . 2021-02-22 . Consultado el 16 de mayo de 2021 .
- ^ "Descubrible" . Red de desarrolladores de Mozilla . Consultado el 24 de abril de 2017 .
- ^ "Independiente de la red" . Red de desarrolladores de Mozilla . Consultado el 24 de abril de 2017 .
- ^ "Aplicaciones web de carga instantánea con una arquitectura de shell de aplicaciones" . Desarrolladores de Google . Consultado el 24 de abril de 2017 .
- ^ "Documentos de manifiesto web en MDN" . Documentos web de MDN .
- ^ "Novedades de iOS 12.2 para aplicaciones web progresivas" . Medio . 27 de marzo de 2019.
- ^ "Configuración de aplicaciones web" . Guía de contenido web de Safari .
- ^ "Conceptos de WebAssembly" . MDN . Consultado el 14 de agosto de 2018 .
- ^ "API de almacenamiento web" . MDN . Consultado el 14 de agosto de 2018 .
- ^ a b "Introducción a Service Worker | Web" . Desarrolladores de Google . El 1 de mayo de 2019 . Consultado el 23 de mayo de 2019 .
- ^ "Conceptos detrás de IndexedDB" . MDN . Consultado el 14 de agosto de 2018 .
- ^ "Uso de la caché de la aplicación" . MDN . Mozilla . Consultado el 14 de agosto de 2018 .
- ^ "Application Cache es un idiota" . Una lista aparte . Consultado el 14 de agosto de 2018 .
- ^ "Uso de la caché de la aplicación - HTML: HyperText Markup Language | MDN" . developer.mozilla.org . Consultado el 11 de abril de 2021 .
- ^ "Preparación para la eliminación de AppCache" . web.dev . Consultado el 11 de abril de 2021 .