Comandos básicos

• Clonar un repositorio:
  
      git clone URL
   

• Descargar última versión del repositorio:
  
      git pull origin master

Configuración proxy

git config --global http.proxy http://username:password@host:port

git config --global https.proxy http://username:password@host:port

npm

• Instalar última versión después de instalar Node.js
  (configurar proxy si es necesario): npm install -g npm

• Repositorio de módulos distribuibles

• Módulos globales y módulos locales

• La carpeta node_modules

• El archivo package.json:

  • Registro de dependencias

  • Dependencias de desarrollo y de producción

  • Versiones (SEMVER)

Comandos npm

• Instalar un paquete globalmente:
      npm install -g paquete

• Instalar un paquete de producción:
      npm install paquete

• Instalar un paquete de desarrollo:
      npm install paquete --save-dev

• Instalar todas las dependencias:
      npm install

• Instalar las dependencias de producción:
      npm install --production

• Listar paquetes instalados:

      npm list --depth=0        (locales)
      npm list -g --depth=0   (globales)

Comandos npm

• Lanzar el ejecutable de un paquete:
  npx ejecutable
  
  (aunque no esté instalado)

Configuración proxy

npm config set proxy http://username:password@host:port

npm config set https-proxy http://username:password@host:port

Funciones

• Pasar funciones anónimas como parámetros

• Funciones callback

• Funciones arrow

• map() y filter()

Promesas

• Procesos asíncronos

• Dos métodos principales: then() y catch()

• Encadenado de promesas

• El método finally()

• Promise.all()

• async / await

Fetch API

• Request y Response

• La función fetch()

• Nos interesa del Request:

  • method

  • mode

  • destination

  • headers

  • url

  • body

Fetch API

• Nos interesa del Response:

  • ok

  • status

  • headers

  • body

    • body.text()

    • body.json()

Web manifest

• Información sobre la apariencia de la app instalada

• Archivo JSON

• <link rel="manifest">

Web manifest

• Estructura:

Web manifest

• Iconos para web

Web manifest

• Iconos para Android  (mínimo 192x192 y 512x512)

Web manifest

• iOS 🤯   (documentación)

Service workers

• JavaScript que corre en un hilo paralelo

• No tienen acceso al DOM ni al objeto window

• Se comunican con el hilo principal mediante postMessage()

• Proxy entre la app y la red

• Registro de un SW

• Ciclo de vida de un SW

Service workers

• Condiciones para que la PWA sea instalable:

  • Manifest con:

    • name o short_name

    • start_url

    • display: "standalone" | "fullscreen" | "minimal-ui"

    • icons: 512 y 192

  • Service Worker con evento fetch

  • HTTPS

Service workers

• El prompt de instalación

• El evento beforeinstallprompt:

  • ​preventDefault() para que no aparezca el de Android

  • Lanzar el prompt con un gesto del usuario

  • Leer userChoice

  • Comprobar si se está abriendo la app instalada

Caché

Estrategias de caching

• Cache only

Estrategias de caching

• Cache only

• Network only

Estrategias de caching

• Cache only

• Network only

• Cache with fallback to network

Estrategias de caching

• Cache only

• Network only

• Cache with fallback to network

• Network with fallback to cache

Estrategias de caching

• Cache only

• Network only

• Cache with fallback to network

• Network with fallback to cache

• Stale while revalidate

Estrategias de caching

• Cache only

• Network only

• Cache with fallback to network

• Network with fallback to cache

• Stale while revalidate

• Generic fallback

Estrategias de caching

• Cache only

• Network only

• Cache with fallback to network

• Network with fallback to cache

• Stale while revalidate

• Generic fallback

• Cache then network

Notificaciones PUSH

• Entran en juego:

  • La app

  • El Service Worker

  • El servicio PUSH del navegador

  • Un servicio de Google, Firefox...

  • Un servidor PUSH

Notificaciones PUSH

• La app:

  • Puede lanzar el prompt para preguntar al usuario si da permisos para notificaciones:
    Notification.requestPermission()

  • Puede preguntar si el usuario ya ha dado permisos o no:
    Notification.permission
    ('default', 'granted' o 'denied')

  • Puede pedir una suscripción al servicio PUSH:
    reg.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: <llave pública VAPID>
    });

Notificaciones PUSH

• La app:

  • Cuando obtiene una suscripción del servicio PUSH, la envía a nuestro servidor PUSH, que la almacenará.

Notificaciones PUSH

• El servidor PUSH:

  • Genera las claves VAPID

  • Utiliza la librería web-push para enviar notificaciones PUSH.

  • web-push para varios lenguajes de back

Notificaciones PUSH

• El Service Worker:

  • Escucha el evento 'push'

  • Emite una notificación al SO:
    self.registration.showNotification(título, opciones)

  • Puede capturar el click en la notificación escuchando al evento 'notificationclick'