Apuntes de maquetado y desarrollo web

---------------------------------------------------------

VER TODA LA CLASE PARA REALIZAR TODOS LOS PASOS NECESARIOS!!!!

--------------------------------------------------------

PWA - PROGRESSIVE WEB APPLICATION

-----------------------------------

-No es web responsive clásica

-2 clasificaciones: web responsive, APP

las APP se dividen en ---> híbridas

---> nativas

La pwa comienza siendo una web pero termina siendo una app.

Son una nueva generación de producciones que comienzan siendo una web e incrementan su funcionalidad de acuerdo al dispositivo en el que se ejecutan, instlándose como APP.

CARACTERÍSTICAS

--------------

1-pueden ejecutarse offline

2-pueden utilizar almacenamiento local de información

3-pueden recibir notis push

4-presentan una performance muy similar a una app nativa

5-tienen acceso al hardware del dispositivo

6-tienen acceso al homescreen del dispositivo

VENTAJAS

---------

1-pueden surgir de una búsqueda común en google.

2-No requieren certificado de desarrollador. Por lo general, las apps tienen que firmarse para publicarse

3-se ofrece ser instalada como app (chrome y edge)

4-presentan una muy buena seguridad ya que solo funcionan con protocolo https

5- no es necesario que el usuario autorice nid escargue actualizaciones, la pwa se actualiza automáticamente

6-al instalar pocos archivos en el dispositivo, son muy livianas, ágiles y veloces

7- puede utilizar datos guardados localmentes

8-son más económicas con menor dificultad de producción y con menor tiempo de desarrollo

PROCESO DE PRODUCCIÓN DE UNA PWA

------------------------------

*la PWA se apoya en tres pilares para su funcionamiento y son los que tendremos en cuenta en el proceso de producción:

1-construimos una web y la publicamos en un servidor al que se acceda mediante protocolo HTTPs.

2-debe contener un archivo manifest.json que es el encargado de la configuracion de la APP:

icono para e launcher, nombre de la APP, splashscreen, color global, orientación, etc. El splashscreeen es la pantalla de carga

el archivo JSON es un archivo que sirve para estructurar texto. Configuración de algo, una app, una web, etc.

3-Creamos un service worker que incorporamos en la raíz de la carpeta del proyecto y lo registramos desde el index.

PASO 1 PARA CONSTRUIR PWA

-----------------------

*DESARROLLAMOS UN SITIO RESPONSIVE, como lo haríamos habitualmente (a mano o bootstrap)

*realizamos un ícono grtande para la APP (512x512px tamaño para las tiendas) a partir del cual vamos a generar toda la batería de íconos necesarios. Esto lo hacemos desde a web favicon-generator

(subir imagen grande como referencia)

¡¡¡¡IMPORTANTE, REALIZAR ESTOS PASOS!!!!

>>>> 19:25 <<<<

no guardarlo en el proyecto

*descargamos los iconos y los guardamois en la carpeta del proyecto

PASO 2

-----

manifest.json

agregamos el resto de configuraciones necesarias en el manifest.

19:37

>>name: nombre largo de la app

>>short_name: nombre corto de la app que acomapaña al launch icon cuando no hay suficiente espacio para mostrar el name

>>icons: lista de launch icon de la app para distintos dispositivos

>>background_color: color de fondo de la app, debiera ser igual

...