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

Progressive Web Apps

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Oscar Martin Cortez Martinez Oscar Martin Cortez Martinez
December 15, 2018
Programming
0
48

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
Tweet

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
67
Web App Weekend - Firefox Apps
Avatar for Oscar Martin Cortez Martinez oscarmcm
0
47
RUBOTO
Avatar for Oscar Martin Cortez Martinez oscarmcm
1
94

Other Decks in Programming

See All in Programming
ふつうの Rubyist、ちいさなデバイス、大きな一年
Avatar for bash0C7 bash0c7
0
740
文字コードの話
Avatar for Masaki Hara qnighy
44
17k
日本だけで解禁されているアプリ起動の方法
Avatar for Ryu-nakayama ryunakayama
0
370
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
3
1.1k
Go 1.26でのsliceのメモリアロケーション最適化 / Go 1.26 リリースパーティ #go126party
Avatar for mazrean mazrean
1
360
CSC307 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
470
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
980
AI Assistants for Your Angular Solutions
Avatar for Manfred Steyer manfredsteyer
PRO
0
110
Windows on Ryzen and I
Avatar for 瀬尾佳隆 seosoft
0
220
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
260
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
130
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
410

Featured

See All Featured
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
450
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.4k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
340
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
850
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.8k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.6k

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