JavaScript

s

Pato Vargas

devpato

Que es una

Quien usa PWAs?

PWA Pros

-Cargan Rapido

-Funcionan offline

-Estrategias de Caching

-Instalables

-Barata Crearlas

-Securidad (HTTPS)

-SEO

PWAs Cons

-Menos acceso a funcionalidad del dispositivo

-No tiene estandares de review

-Apple tiene que moverse al lado obscuro mas rapido

Que es un service worker?

SW characteristics

-Puede hacer caching a las network requests

-Puede decidir como se haran las network

-Puede user el Background Sync API

-No puede interactuar con el DOM directamente

-Puede hacer caching

-Recibir notificaciones push notifications

-Permanece inactivo cuando no esta en uso

-Puede ser usado para hacer tu app trabaje offline

DEMO TIME

GO TO

pwa-cpt.firebaseapp.com

Other Apps

https://qr-app-79289.firebaseapp.com/

Website Analytics

self.addEventListener("fetch", event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

self.addEventListener("install", e => {
  console.log("[ServiceWorker**] - Install");
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      console.log("[ServiceWorker**] - Caching app shell");
      return cache.addAll(filesToCache);
    })
  );
});

Articles

Intro to PWAs and Service Workers
https://tinyurl.com/yav7zn34

How to add Notifications to your PWA
https://tinyurl.com/y98lwfay

PWA Push Notifications with Firebase
https://tinyurl.com/y9dfflg7

How to do social media sharing in your PWA
https://tinyurl.com/ybkr56de

How to create a PWA with JavaScript
https://tinyurl.com/yckgszld