¿Cuál es el camino para aprender a construir una aplicación web progresiva?

Antes de crear WPA, debe comprender la estructura y aprender por dónde comenzar. Como saben, una aplicación web progresiva es un sitio web que se siente como una aplicación móvil nativa.

Estructura progresiva de aplicaciones web
La aplicación web progresiva tiene una estructura simple. Consiste en el shell de la aplicación y el contenido cambiante.

El shell de la aplicación es el código HTML, CSS y JavaScript que construye la interfaz de la aplicación. La interfaz es la parte estática de la aplicación, puede mostrar dinámicamente el contenido. El shell de la aplicación se almacena en caché en el dispositivo del usuario y se puede cargar de inmediato.
El contenido es la parte dinámica, cambia y se actualiza cada vez que se establece una conexión con Internet. Hay una tecnología más, que nos permite definir una PWA como una PWA. Su nombre es el trabajador del servicio.
El trabajador de servicio es un archivo JavaScript que funciona en segundo plano. Es responsable de la funcionalidad fuera de línea de la aplicación web progresiva a través del almacenamiento en caché de contenido oportuno.
Además, es importante el manifiesto de la aplicación , un simple archivo JSON. Ayuda al dispositivo a reconocer el PWA y define cómo se mostrará en la pantalla.

Espero que esta respuesta haya sido útil, lea más sobre PWA aquí

Lo primero es lo primero, antes de aprender a construir, entienda por qué construir uno.

Los requisitos previos para construir esta experiencia para su sitio web existente son:

  • Aplicación web receptiva
  • https habilitado

Eso es todo, también puedes probarlo en localhost, cada funcionalidad funciona.

Debe comprender que tiene dos partes, una que permite funciones cercanas a las experiencias sin conexión, agregar a la pantalla de inicio, sincronización de fondo,

Otras notificaciones push web .

Si desea ahorrar tiempo, también puede probar Progressive Web Application Tool para crearlo en minutos.

Descargo de responsabilidad: soy el cofundador de Widely

No es tan difícil si conoces las pautas. Este es un tutorial paso a paso sobre cómo integrar las funciones de PWA en una aplicación web: Cómo hacer que su aplicación sea una PWA.

En breve:

  1. Agregue Manifiesto de aplicación web a su proyecto.
  2. Configure el Service Worker que habilita cachés, notificaciones push y sincronización de datos en segundo plano.
  3. Proporcionar a los usuarios soporte fuera de línea.
  4. Añadir notificaciones push.
  5. Audita tu aplicación usando Lighthouse.

Cree una aplicación web progresiva (PWA) que parezca una aplicación para iOS y Android, usando la cámara del dispositivo, notificaciones automáticas y más

Enlace al curso: Aplicaciones web progresivas (PWA): la guía completa

¿Que aprenderás?

  • Cree aplicaciones web que se vean y se sientan como aplicaciones móviles nativas para iOS y Android
  • Use los trabajadores de servicios para crear aplicaciones web que funcionen sin conexión a Internet (primero sin conexión)
  • Aproveche las funciones del dispositivo como la cámara y la geolocalización en sus aplicaciones web
  • Use notificaciones push web para aumentar la interacción del usuario con sus aplicaciones web

Requisitos del curso

  • Se requieren conocimientos básicos de HTML, CSS y JavaScript
  • NO se requiere experiencia con frameworks JavaScript

Descripción del curso-

Las aplicaciones web progresivas (PWA) son la próxima gran novedad en el desarrollo web, ya que brindan experiencias similares a las de las aplicaciones móviles a sus usuarios sin requerir que instalen una aplicación desde la tienda de aplicaciones / play store.

Todavía crea una aplicación web (HTML, CSS, JavaScript), pero este curso le enseñará cómo agregar funciones como acceso a la cámara, trabajadores de servicio para soporte fuera de línea, notificaciones push y más . Esto combina lo mejor de ambos mundos: brinda experiencias rápidas, atractivas y confiables mientras mantiene el alcance y la accesibilidad de una página web.

“Aplicación web progresiva” es simplemente un término que resume todas las características que le permiten ofrecer experiencias similares a las de los dispositivos móviles. ¡El tema es muy actual y también es un tema que llegó para quedarse ! Google no solo lo promociona fuertemente (en realidad, muchas de las charlas en Google I / O 2017, la conferencia de desarrolladores de Google, se dedicaron a las APW), sino que también lo están adoptando rápidamente grandes empresas como Twitter o el Washington Post .

Tener las habilidades para construir y optimizar este tipo de aplicaciones web ya es una habilidad importante y muy demandada para los desarrolladores web modernos, ¡una tendencia que solo se acelerará! ¡Por lo tanto, aprender a construir PWA le dará una ventaja competitiva!

En detalle, este curso cubrirá todo lo que necesita para construir increíbles PWA, lo que lleva a una puntuación de 100 (de 100) en la herramienta de auditoría PWA de Google “Lighthouse”:

  • Explicación detallada sobre qué es exactamente un PWA
  • Cómo usar un manifiesto de aplicación para hacer que su aplicación web sea instalable en pantallas de inicio del dispositivo
  • Uso de trabajadores de servicios para ofrecer soporte fuera de línea mediante el almacenamiento en caché de activos
  • Uso avanzado del trabajador de servicios y estrategias de almacenamiento en caché
  • Una actualización de Promises y Fetch API, ya que ambos conceptos se usan mucho en PWA
  • Cómo mejorar la participación del usuario agregando notificaciones push
  • Una forma de sincronizar datos en segundo plano, incluso si se pierde la conexión
  • Cómo acceder a funciones nativas del dispositivo como la cámara o la geolocalización
  • Uso de Workbox para facilitar la gestión de los trabajadores del servicio
  • Explicaciones sobre cómo convertir su próximo proyecto SPA en un PWA
  • Y más

Por supuesto, todas estas cosas se ponen en práctica mediante la construcción de un proyecto de curso . Para garantizar que pueda aplicar el conocimiento a CUALQUIERA de sus proyectos, el proyecto del curso no asume ningún marco de JavaScript, ¡sino que se centra en las características principales mencionadas anteriormente!

Entonces, este curso tiene mucho que ofrecer, ¿cómo sabes si es para ti?

Definitivamente es la elección correcta si …

  • … ya eres desarrollador web (no importa si tienes experiencia o eres nuevo en el negocio) y quieres prepararte para el futuro
  • … disfruta trabajar con HTML, CSS y JavaScript y quiere aprovechar toda la potencia que las tecnologías web y de navegador tienen para ofrecer
  • … desea ofrecer las mejores experiencias posibles a sus usuarios, utilizando tecnologías como notificaciones push web o soporte fuera de línea

¿Qué necesitas saber para aprovechar al máximo el curso?

  • Debe conocer al menos los conceptos básicos de HTML, CSS y JavaScript.
  • Sin embargo, no se requieren conocimientos avanzados de estas tecnologías.
  • NO necesita conocer ningún marco de JavaScript como Angular o React: los PWA funcionan con CUALQUIER aplicación de JavaScript, incluso si no usa un marco (¡eso es lo que construiremos en el curso!)

¿Quién es el público objetivo?

  • Estudiantes que desean crear aplicaciones web que se vean y se comporten como aplicaciones móviles nativas
  • Estudiantes que desean crear aplicaciones web listas para usar sin conexión (sí, ¡eso funciona!)
  • Cualquier persona que quiera crear aplicaciones web que ofrezcan acceso a la cámara del dispositivo, geolocalización, notificaciones push y proporcionar asistencia fuera de línea
  • Estudiantes que quieran aprovechar las últimas funciones del navegador y al mismo tiempo admitir navegadores antiguos

¡Hola!

Creo que el primer paso para aprender a construir una PWA es comprenderla, el concepto detrás de ella. Qué es un PWA y cómo funciona. Creo que es importante responder estas preguntas antes de comenzar de verdad. Luego, puede estudiar una PWA existente para ver cómo funciona en la vida real. Puede echar un vistazo a los pasos que otros desarrolladores siguieron para crear una PWA, las dificultades y los desafíos que enfrentaron. Toda esta información le brindará más claridad sobre este tipo de aplicación y si la necesita y por qué. Además, comenzará a identificar lo que necesita aprender, las brechas en su conocimiento que tendrá que superar para crear una aplicación web progresiva.

Recientemente, uno de mis colegas desarrolló una PWA muy interesante y compartió su viaje en esta publicación de blog: desconectarse con Progressive Web Apps

También puedes echar un vistazo a la PWA aquí: UX Quiz

Espero que pueda ser útil 🙂

Hola,

Estamos creando una aplicación web progresiva para las ligas de futbolín y blogueando sobre nuestro progreso:

Creación de una aplicación web progresiva – Parte 1: antecedentes y back-end

Habrá una nueva publicación de blog dentro de unos días sobre cómo elegir el marco de la interfaz y más sobre el backend.

¡Disfrutar!

Saludos,
Morten

¡Gran elección! Ahora, cuando ya comprenda la esencia de Progressive Web App, puede visitar documentos de Google que son mucho más simples que cualquier otra cosa en línea que pueda encontrar.

Entonces, básicamente, debe tener conocimientos básicos sobre javascript. También debería sonar bien con los oyentes de eventos y el manejo en javascript.

Luego, puede pasar a aprender la tecnología de Service Worker, que es la base de los PWA. Utiliza el concepto de manejo de eventos de JavaScript y representa todas las solicitudes del cliente.

Cuando ya está familiarizado con JavaScript, es bueno y crea fácilmente su primer PWA.

Ahora es el momento de una buena noticia. Si desea probar su PWA de inmediato, puede visitar la Plataforma de conversión automática de PWA. Allí puede convertir su plataforma en Progressive Web App al instante y no necesita ningún conocimiento técnico previo para eso. También puede visitar este tutorial que explica cómo usar el convertidor PWA?

No recuerdo de dónde saqué esto, pero este enlace tiene mucha información sobre cualquier cosa PWA:

Aplicaciones web progresivas: la colección definitiva de recursos