Bienvenidos a Web Developer

CONVERTER TU APLICACIÓN WEB EN UNA PWA
(Aplicación web progresiva)

perfil

Urian Viera

Hola soy Urian, un apasionado por la creación de sitios web y la programación, espere te haya gustado este material, me gusta compartir mis conocimeintos porque se que puede ser de mucha ayuda.

No olvides

Tampoco olvides

Suscribirte al Canal de Youtube y activar las notificaciones.

Youtube

Service Worker

Es un archivo JS, que define la lógica de las peticiones de red y la estrategia de caché, como el modo offline, sincronización en segundo plano, notificaciones push y APIs de sincronización en segundo plano.

Manifiesto.json


Es simplemente un archivo JSON en el cuál se definen cierto valores como el nombre de la aplicación, la ubicación de los íconos que serán utilizados en diferentes resoluciones, la URL inicial, el color de fondo por defecto, entre otras configuraciones. Estas opciones le permitirán a la plataforma o dispositivo, saber cómo se llamará y comportará nuestra aplicación si fuera instalada.

Es el fichero central que da vida a las PWA es el fichero Manifest, que contendrá los metadatos propios de la aplicación

PWA!

Las PWA son aplicaciones webs que hacen uso de las tecnologías más novedosas y potentes de los navegadores. Progressive Web Apps se comportan como aplicaciones web nativas, sólo que utilizan tecnologías web, en resumidas cuentas como una aplicación móvil accesible a través del navegador.

Objetivos de una PWA!


      ✔ Máximo rendimiento en móviles
      ✔ Velocidad de carga instantánea
      ✔ Interfaz igual a la interfaz de app nativa
      ✔ Icono y acceso desde la página de inicio
      ✔ Ejecución y acceso offline
      ✔ Push Notifications
      ✔ etc..

Téminos para un Archivo Manifest.json

  1. name: Nombre de la aplicación.
  2. start_url: Url del portal en la que se iniciará la aplicación.
  3. background_color: Color de fondo de la pantalla mostrada mientras carga la app.
  4. display: Determina la visualización de la aplicación (pantalla completa, con barra de búsqueda del navegador, etc.)
  5. icons: Permite indicar el icono de la aplicación. Pueden indicarse varios iconos para optimizar la visualización de los mismos en distintas resoluciones de pantalla.

movil

Genial amigos!

movil

Propiedades de una PWA

movil
movil