Progressive Web Apps

PROGRESSIVE WEB APPS Oscar Cortez Dec 2018

¿QUE ES UNA PWA?

UN MOMENTO

AMP != PWA

KILLEDBYGOOGLE.COM

RECAPITULANDO

¿QUE ES UNA PWA?

LAS PROGRESSIVE WEB APPS SON EXPERIENCIAS QUE COMBINAN LO MEJOR
DE LA WEB Y LO MEJOR DE LAS APPS. Pete LePage PWA

UN SITIO QUE USA LAS TECNOLOGÍAS MODERNAS EN LOS NAVEGADORES
Y LAS MEJORES PRACTICAS PARA PROVEER UNA EXPERIENCIA RÁPIDA Y NATIVA. Zack Argyle PWA

DE CONFIANZA RAPIDAS ATRACTIVAS PWA es…

TECNOLOGIAS USADAS

•HTTPS •W3C MANIFEST •SERVICE WORKER •CACHE

¯\_(ツ)_/¯

W3C MANIFEST

{ "name": "Donate App", "description": "This app helps you donate
to worthy causes.", "icons": [{ "src": "images/icon.png", "sizes": "192x192" }] }

<!DOCTYPE html> <html> <head> <title>Racer 3K</title> 
<link rel="manifest" href="manifest.webmanifest">  <meta name="application-name" content="Racer3K"> <link rel="icon" sizes="16x16 32x32 48x48" href="lo_def.ico"> <link rel="icon" sizes="512x512" href="hi_def.png"> </head> <body> </body> </html>

SERVICE WORKERS

UN SERVICE WORKER ES UNA SECUENCIA DE COMANDOS QUE TU
NAVEGADOR EJECUTA EN SEGUNDO PLANO, SEPARADO DE UNA PÁGINA WEB. Matt Gaunt SW

if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js') .then(function(registration)
{ // Registration was successful console.log('ServiceWorker registration successful'); console.log('with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); }

SÓLO HAY DOS COSAS DURAS EN CIENCIAS DE LA COMPUTACIÓN:
INVALIDAR UNA MEMORIA CACHÉ Y NOMBRAR LAS COSAS. Confusio :p CACHE

•CACHE ONLY •NETWORK ONLY •CACHE FALLING TO NETWORK OR VICE
VERSA •CACHE & NETWORK RACE •CACHE THEN NETWORK •GENERIC FALLBACK •YOUR CUSTOM WAY :P

COMO SE VE UNA PWA

POKEDEX.ORG

LAS 3R’S PARA INCREÍBLES PWA’S

REDUCE REUSE REVIEW

A MEDIDA QUE CONSTRUIMOS SITIOS QUE DEPENDEN CADA VEZ MÁS
DE JAVASCRIPT, A VECES PAGAMOS POR LO QUE ENVIAMOS DE MANERAS QUE NO SIEMPRE VEMOS FÁCILMENTE. Addy Osmani REDUCE

REDUCE REUSE REVIEW

REUSE Service Worker Network Website Cache

REDUCE REUSE REVIEW

INDEPENDIENTEMENTE DE LAS HERRAMIENTAS QUE ELIJA SU EQUIPO, UN PRESUPUESTO
ES ESENCIAL. SIN UNO, INCLUSO LOS MÁS AVANZADOS, Y “LIGEROS" FRAMEWORKS PUEDEN CREAR FÁCILMENTE APLICACIONES INFLADAS E INUTILIZABLES. Alex Russel REVIEW

NO EXISTEN SITUACIONES HIPOTETICAS

LA FUERZA USAR DEBES

•APP-Shell: La arquitectura que usaras. •Browser Dev Tools: Tu navaja
suiza. •IndexedDB: Almacenamiento estructurado de datos. •WorkBox: Set de librerias para PWAs.

•Lighthouse: Auditar nuestras PWAs. •Google PWA Checklist: Lo que tienes
que considerar. •SSR: Compilar tu HTML en el servidor. •SW-Precache: Generador de Service-Workers.

=> RTFM <= HTTPS://WEB.DEV

GRACIAS POR SU ATENCIÓN! @oscar_mcm

Progressive Web Apps

Progressive Web Apps

More Decks by Oscar Martin Cortez Martinez

Other Decks in Programming

Featured

Transcript