Una introducción a las aplicaciones web progresivas

La mayoría de los desarrolladores han escuchado al menos algunos rumores Aplicaciones Web Progresivas. Estos son ampliamente apoyados por compañías de tecnología como Google y se están convirtiendo rápidamente en el Norma para aplicaciones web multidispositivo..

Pero, ¿qué es exactamente el diferencia entre un típico y un progresivo Aplicación Web?

Para desarrolladores, Es todo un mundo de diferencia.. Las aplicaciones web progresivas utilizan API web modernas para crear experiencias de aplicaciones nativas en el navegador Esto significa que los desarrolladores pueden crear aplicaciones dinámicas de carga rápida sin utilizar marcos híbridos.

En esta guía, cubriré la fundamentos de las aplicaciones web progresivas, Algunas características principales, y cómo puede comenzar a construir su propio.

¿Qué son las aplicaciones web progresivas??

Aplicaciones Web Progresivas (o PWAs) aprovechar las API de navegador web para crear experiencias de aplicaciones nativas directamente en el navegador en cualquier dispositivo.

En última instancia, las aplicaciones web progresivas abarcan una puñado de tecnologias que los desarrolladores pueden usar para crear potentes aplicaciones de tipo nativo. Muchos vienen de APIs web tales como el API de trabajadores de servicio o la API de inserción.

Existen bastantes requisitos llamar a algo un PWA pero estos son los los más importantes:

Es totalmente receptivo móvil.
Se adhiere a mejora progresiva.
Capaz de instalar localmente en smartphones y tablets.
Corre sin conexión Sin internet, utilizando trabajadores del servicio..
Separa contenido de funcionalidad usando la aplicación shell.
Builts en HTTPS para mayor seguridad.
Visible en la busqueda de google.
Tiene páginas dinámicas de aplicación pero cada uno sigue tiene su propia URL.

Si eres pensando en construir una pequeña aplicación web puede intentar crear una aplicación web progresiva en su lugar. Esto viene con un poco de una curva de aprendizaje pero tienes mucho Más control sobre la experiencia del usuario. como resultado.

Vamos a sumergirnos en los fundamentos de las aplicaciones web progresivas y aprender qué las hace funcionar..

Trabajadores de servicio

Cada aplicación web progresiva necesita trabajadores de servicio. Estos son como oficiales de tráfico quién coordina a dónde se dirige el tráfico, de dónde proviene la información y cómo todo se organiza y se guarda en caché.

En términos simples, el trabajador del servicio funciona como un archivo JavaScript y se ejecuta en el fondo de su aplicación web. Siempre que el usuario realiza un evento, llama el script de trabajador de servicio ya sea para extraer datos, guardar datos, o ambos!

Utilizando la API de trabajador de servicio es esencial para ejecutar un PWA compatible sin conexión. Asi es como tu transmitir datos entre vistas y como puedes solicitar datos de una base de datos local. Pero, esto es principalmente cosas avanzadas que aprendes al trabajar en un proyecto PWA.

Echa un vistazo a la Libro de cocina de trabajadores de servicio para fragmentos básicos y demostraciones en vivo. Esta es una manera fantástica de aprender estudiando lo que otros han hecho y clonando que en tus propias aplicaciones.

Si esperas construir una aplicación web progresiva comenzar con la API del trabajador del servicio. Simplemente juguetea con él y configura una demostración simple a nivel local. Esto sentará las bases para más adelante Creación de funciones y páginas de aplicaciones personalizadas. Que todos corran a través de los trabajadores del servicio..

por guias para principiantes y fragmentos de código detallados, Recomiendo específicamente estos recursos:

Primeros pasos con los trabajadores de servicios
Empezando con los Trabajadores de Servicio
Ejemplo de trabajador de servicio: Ejemplo de página sin conexión personalizada

El shell de la aplicación

La mayoría de las aplicaciones nativas seguir una aplicación de arquitectura de shell donde están los datos y el código de la aplicación completamente separado de la interfaz de usuario. La aplicación shell puede ser cacheado localmente así que cada página se carga increíblemente rápido.

Esto sigue con lo mismo. “aplicación nativa” sintiendo donde el la interfaz siempre permanece visible pero el El contenido / funcionalidad se carga de manera diferente cada vez. Echa un vistazo a esta página en el sitio de Google Developers para obtener más información sobre el modelo de shell de aplicación.

La mayoría de las aplicaciones tienen una muy simple aplicación shell y debes diseñar tu arquitectura con simplicidad en mente.

Normalmente, la aplicación shell tiene estos elementos principales:

Enlaces de la barra de navegación superior.
Botón de actualización (opcional).
Contenedor de fondo de página.

Puedes encontrar un buen caso de estudio aquí Arquitectura de shell de la aplicación web progresiva de E / S de Google. También ofrecen algunos consejos para construir su propia arquitectura de shell, almacenarla en caché y tirando de él automáticamente para cada página.

Piense en la arquitectura de la concha como todos los elementos estáticos de la interfaz de usuario Lo usarás en cada página. Estos deben ser separado del resto de tu código y en caché para una fácil reutilización. También echa un vistazo Introducción de Google Al sujeto con mucho código. Fragmentos para ayudarte a comenzar.

Soporte online y offline

La mayoría de las aplicaciones nativas corre bien sin internet. Las aplicaciones web progresivas están destinadas a seguir este mismo comportamiento..

A través de los trabajadores del servicio, usted puede construir cachés locales con código JSON para cada página. De esta manera los usuarios pueden navega tu aplicación web localmente. Usted también podría incluir un archivo de manifiesto para definir sus iconos, pantalla de inicio y otras configuraciones de inicio.

Si está utilizando la API de Service Worker, eche un vistazo a la API de caché cual es parte del mismo marco. Generalmente es la mejor manera de almacenar datos localmente y acceder a él desde los trabajadores del servicio luego.

Tú también puedes prueba cualquier aplicación web utilizando Faro, una herramienta gratuita para verificar el cumplimiento de las funciones y el soporte para las tecnologías PWA.

PWAs siempre requiere soporte sin conexión a través de la API del trabajador del servicio, para que puedan Trabajar en estados de baja conectividad.. Lighthouse es la mejor manera de probar el soporte sin conexión junto con una serie de otras características.

Ejemplos en vivo

Estudiar PWA en vivo y ver cómo funcionan es una excelente manera de aprender. Sin embargo, el mercado de aplicaciones web progresivas es sigue emergiendo, muchos de los mejores son dispersos en varios rincones de internet.

Pero, gracias a la Galería de rocas PWA, He comentado algunos ejemplos asombrosos para mostrar lo que realmente pueden hacer los PWA.

1. Convertidor de divisas

Esto bastante simple convertidor de moneda Toma tipos de cambio y calcula la corriente. Diferencias entre una tonelada de monedas en todo el mundo..

Notarás que esta aplicación web es totalmente sensible, soporta toque, y actualizaciones automáticas sin ninguna actualización de página.

Estas son solo algunas de las características que usted espera en cualquier aplicación web progresiva típica. Esta La aplicación también se puede guardar localmente para que su teléfono funcione sin conexión, aunque se conecta a un archivo JSON para verificar los tipos de cambio actuales.

2. Acentos de inglés

Simplemente adoro esta aplicación web porque es única e increíblemente bien diseñada. los Mapa de acentos en inglés videos de cura en linea donde las personas llevan acentos de regiones específicas de los Estados Unidos y el Reino Unido.

Al hacer clic en cualquier parte del mapa, puede escuchar cómo las personas pronuncian ciertas palabras en diferentes partes del mundo. La aplicación es muy rápida y es de código abierto en GitHub para que cualquiera pueda revisar.

Los internos se ejecutan en React / Redux con Base de fuego y un Conexión API a Google Maps. Definitivamente un gran ejemplo de algo bastante simple para que los principiantes estudien y aprendan..

3. Pokedex.org

Otro PWA bastante simple es este Aplicación pokedex creado por Nolan Lawson. También publicó este código libremente. en GitHub, por lo que nosotros otro proyecto que es Vale la pena husmear y estudiar.

Dado que estos datos pueden permanecer estáticos, es manejado a través de un motor local llamado PouchDB. Todos los datos provienen del PokeAPI y luego se guardan como un simple JavaScript. Esto significa que puedes guárdalo localmente en tu teléfono como una verdadera aplicación nativa y se ejecutará con o sin acceso a Internet. Bastante guay cierto?

Todo es accionado por JavaScript, así que es una prueba de cuánto puede hacer con el código de frontend. Usa un montón de almacenamiento en caché con la API de Service Worker, por lo Es una locura rápida y muy fácil de usar..

4. Flipkart

Por último y más sorprendentemente, veamos el Sitio web de Flipkart. Esta lleno La tienda de comercio electrónico es, de hecho, una aplicación web progresiva..

Sus totalmente sensible y carga páginas dinámicamente. Las URL de las páginas se adjuntan al navegador, por lo que puede copiar / pegar y compartirlas como un sitio web típico.

Esto es facil El PWA más complejo que he visto. Me sorprende que los desarrolladores hayan podido crear una experiencia perfecta en la web para todos los usuarios, y mucho menos. soporte de almacenamiento local sin conexión, también.

Y, aunque no pude encontrar un repositorio para todo el código fuente de Flipkart, hay un Página de Flipkart en GitHub con fragmentos de código más pequeños de su equipo de desarrolladores.

Aprendiendo más

Las aplicaciones web progresivas son increíblemente popular y seguramente ganará vapor a medida que más desarrolladores cambian de aplicaciones nativas / híbridas.

Hay una cumbre anual llamada Cumbre de aplicaciones web progresivas Y ellos publican videos en YouTube que puedes ver gratis. Esta es una gran manera de Recoge algunos conocimientos profesionales sin tener que pagar por un boleto..

Pero, si lo que buscas es más detallado. Guías de codificación PWA Definitivamente echa un vistazo a estos tutoriales:

Una guía para principiantes de aplicaciones web progresivas
Crea tu primera aplicación web progresiva con React
Construyendo una aplicación web progresiva con polímero