Progressive

Web Apps

Henry Zarza

Ingeniero informático - Estudiante de idiomas - Desarrollador web

henryzarza

henry_zarza

Antes de comenzar ...

¿Qué es una aplicación web?

¿Qué es una aplicación móvil?

Un poco de historia ...

Web workers

& sockets

¿Qué es?

"Son experiencias de usuario que tienen el alcance de la web.", Google.

Son páginas web que se comportan como aplicaciones nativas.

Una PWA utiliza las últimas tecnologías disponibles en los navegadores para ofrecer una experiencia en móviles lo más parecida a la de una aplicación nativa.

¿Y qué características debe tener?

  • Confiables.

  • Rápidas.

  • Atractivas.

Ventajas

  • ​Seguras y progresivas.

  • Independiente de la conexión a internet.

  • Facilidad para ser actualizadas.

  • Instalables y enlazables.

  • Mejor rendimiento y consumo de recursos.

¿Y qué necesito para aplicarlas?

Service worker

Web App Manifest

App shell

Responsive

Service Worker

Es un script que corre el navegador en el fondo (separado del hilo principal de JavaScript), abriendo la puerta a nuevas funcionalidades que no necesitan de la interacción del usuario.

No tienen acceso al DOM.

A tener en cuenta

Es diferente a un web worker.

Permiten el trabajo sin conexión.

Actúa como un proxy en las request.

Es terminado cuando no está en uso y reinicializado cuando se usa.

Hacen uso extensivo de las promesas.

Ciclo de vida

Suficiente teoría por el momento ... ¡Vamos a ver algo de código!

Registro

Instalación

Activación

Limpiando

Para usar un Service Worker es obligatorio tener el protocolo HTTPS en el servidor donde se va a alojar nuestra página web.

¿Y para guardar los datos?

El Web Storage API provee un mecanismo mediante el cual los navegadores pueden almacenar datos (key/value).

  1. sessionStorage

  2. localStorage

  3. Cache

  4. IndexDB

Compatibilidad y Soporte

Ver página is ServiceWorker Ready?

Otros casos de usos

  • Adelantarse a peticiones de los usuarios.

  • Responder a recursos desde otras fuentes.

  • Realizar solicitudes centralizadas costosas.

Web App Manifest

Es un archivo JSON que le dice al navegador acerca de una aplicación web y como debería de comportarse esta cuando sea "instalada" en el dispositivo del usuario. 

Cuando un sitio se inicia de esta manera:

  • Tiene un ícono y un nombre único.

  • Muestra algo al usuario mientras se descargan los recursos.

  • Proporciona características predeterminadas de visualización.

Estructura del manifest.json

{
  "short_name": "My App",
  "name": "My App: 2.0",
  "description": "This is a example of manifest.",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html",
  "background_color": "#2196F3"
}

Configura algunos estilos

Personaliza el tipo de pantalla

Especifica la orientación inicial de la página

Proporciona un color de tema para todo el sitio

"theme_color": "#2196F3"

Informar al navegador

<link rel="manifest" href="/manifest.json">

Shell Application

Es un patrón de desarrollo que consiste en separar la aplicación entre funcionalidad y contenido para poder cargar ambos por separado. De esta forma, se puede mejorar el tiempo de respuesta.

Requisitos

  • Cargarse rápidamente.

  • Usar la menor cantidad de datos posible.

  • Usar recursos estáticos de una caché local.

  • Separar contenido de la navegación.

  • Recuperar y mostrar contenido específico de la página.

¿Por qué utilizar esta arquitectura?

  • Rendimiento confiable y rápido en todo momento.

  • Interacciones similares a las apps nativas.

  • Uso económico de datos.

¿Cómo diseñarlo?

Preguntarse:

  • ¿Qué debe presentarse en pantalla de inmediato?

  • ¿Qué otros componentes de la IU son claves para nuestra aplicación?

  • ¿Qué recursos se necesitan para apoyar al shell de aplicación?

Queremos que los usuarios encuentren lo que buscan al interactuar con lo que desarrollamos.

DEMO TIME

https://build.henryzarza.now.sh/

Pasos

1. 

create-react-app pwa-react

2. Definición de la estructura de los datos con apiary

3. Creación de estilos, componentes, servicios y configuración de la aplicación

4. Actualización del manifest.json

5. Creación del serviceWorker

6. Definir el almacenamiento de los datos para cuando la aplicación está offline (IndexedDB)

7. Auditar la aplicación con Lighthouse

https://github.com/henryzarza/pwa-react

A tener en cuenta

Utilizar PWA si el core del negocio no está en aprovechar al 100% el hardware de smart phones para ofrecer funcionalidades que no puedan implementarse mediante técnicas de desarrollo web.

Algunas APIS que te pueden ayudar a mejorar tus PWA

Referencias

¿Preguntas?

¡Gracias!

Made with Slides.com