Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web Apps

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Oscar Martin Cortez Martinez Oscar Martin Cortez Martinez
December 15, 2018
Programming
51
0

Progressive Web Apps

Introduction to Progressive Web Apps - GDG Managua meetup 15 Dic. 2018

Avatar for Oscar Martin Cortez Martinez

Oscar Martin Cortez Martinez

December 15, 2018

More Decks by Oscar Martin Cortez Martinez

See All by Oscar Martin Cortez Martinez
Python Packaging Without Pain
Avatar for Oscar Martin Cortez Martinez oscarmcm
0
190
Tools And Frameworks
Avatar for Oscar Martin Cortez Martinez oscarmcm
0
68
Web App Weekend - Firefox Apps
Avatar for Oscar Martin Cortez Martinez oscarmcm
0
49
RUBOTO
Avatar for Oscar Martin Cortez Martinez oscarmcm
1
97

Other Decks in Programming

See All in Programming
KMP × Kotlin 2.3 - How Android Got Slower While iOS Builds Improved by 47%
Avatar for Ryosuke Shimizu (RIO) rio432
0
180
サプライチェーン攻撃対策「層を重ねて落ちない壁」を10日間で組み上げた話 #TechLeadConf2026
Avatar for Kashun Yoshida kashewnuts
1
270
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
770
Structured Concurrency, Scoped Values and Joiners in the JDK 25 26 27
Avatar for José josepaumard
1
150
AWSはOSSをどのように 考えているのか？
Avatar for アキキー | Akihisa Ikeda akihisaikeda
0
120
ソフトウェア設計の結合バランス #phperkaigi
Avatar for Takuma Kajikawa kajitack
0
510
My daily life on Ruby
Avatar for Akira Matsuda a_matsuda
3
360
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
440
Surviving Black Friday: 329 billion requests with Falcon!
Avatar for Samuel Williams ioquatix
0
3.1k
2026-04-15 Spring IO - I Can See Clearly Now
Avatar for Jonatan Ivanov jonatan_ivanov
1
210
空間オーディオの活用
Avatar for Yuki Yasoshima objectiveaudio
0
150
AIベース静的検査器の偽陽性率を抑える工夫3選
Avatar for Kuniwak orgachem
PRO
4
460

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
130
Visualization
Avatar for Eitan Lees eitanlees
150
17k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
450
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
220
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
620
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
200

Transcript

  1. PROGRESSIVE WEB APPS Oscar Cortez Dec 2018

  2. ¿QUE ES UNA PWA?

  3. UN MOMENTO

  4. PWA

  5. APWA

  6. AWPW

  7. AMWP

  8. AMP

  9. AMP != PWA

  10. None

  11. KILLEDBYGOOGLE.COM

  12. None

  13. RECAPITULANDO

  14. ¿QUE ES UNA PWA?

  15. LAS PROGRESSIVE WEB APPS SON EXPERIENCIAS QUE COMBINAN LO MEJOR

    DE LA WEB Y LO MEJOR DE LAS APPS. Pete LePage PWA
  16. None

  17. 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

  18. 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

  19. DE CONFIANZA RAPIDAS ATRACTIVAS PWA es…

  20. TECNOLOGIAS USADAS

  21. •HTTPS •W3C MANIFEST •SERVICE WORKER •CACHE

  22. HTTPS

  23. ¯\_(ツ)_/¯

  24. W3C MANIFEST

  25. { "name": "Donate App", "description": "This app helps you donate

    to worthy causes.", "icons": [{ "src": "images/icon.png", "sizes": "192x192" }] }

  26. <!DOCTYPE html> <html> <head> <title>Racer 3K</title> <!-- Startup configuration -->

    <link rel="manifest" href="manifest.webmanifest"> <!-- Fallback application metadata for legacy browsers --> <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>

  27. SERVICE WORKERS

  28. UN SERVICE WORKER ES UNA SECUENCIA DE COMANDOS QUE TU

    NAVEGADOR EJECUTA EN SEGUNDO PLANO, SEPARADO DE UNA PÁGINA WEB. Matt Gaunt SW

  29. 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); }); }); }

  30. CACHE

  31. SÓLO HAY DOS COSAS DURAS EN CIENCIAS DE LA COMPUTACIÓN:

    INVALIDAR UNA MEMORIA CACHÉ Y NOMBRAR LAS COSAS. Confusio :p CACHE

  32. •CACHE ONLY •NETWORK ONLY •CACHE FALLING TO NETWORK OR VICE

    VERSA •CACHE & NETWORK RACE •CACHE THEN NETWORK •GENERIC FALLBACK •YOUR CUSTOM WAY :P

  33. COMO SE VE UNA PWA

  34. POKEDEX.ORG

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

  36. REDUCE REUSE REVIEW

  37. REDUCE REUSE REVIEW

  38. 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

  39. REDUCE REUSE REVIEW

  40. REUSE Service Worker Network Website Cache

  41. REDUCE REUSE REVIEW

  42. 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

  43. NO EXISTEN SITUACIONES HIPOTETICAS

  44. LA FUERZA USAR DEBES

  45. None

  46. •APP-Shell: La arquitectura que usaras. •Browser Dev Tools: Tu navaja

    suiza. •IndexedDB: Almacenamiento estructurado de datos. •WorkBox: Set de librerias para PWAs.

  47. •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.
  48. None

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

  50. GRACIAS POR SU ATENCIÓN! @oscar_mcm