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

Progressive Web Apps

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
89

Other Decks in Programming

See All in Programming
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
130
育てるアーキテクチャ：戦い抜くPythonマイクロサービスの設計と進化戦略
Avatar for fujidomoe fujidomoe
1
170
Django Ninja による API 開発効率化とリプレースの実践
Avatar for Kashun Yoshida kashewnuts
0
1.3k
2分台で1500examples完走！爆速CIを支える環境構築術 - Kaigi on Rails 2025
Avatar for Hayato OKUMOTO falcon8823
3
3.6k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
Avatar for Takeru Hayasaka takehaya
9
1.7k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
Avatar for masato hommaru mbook
0
820
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
Avatar for Swimmy reoandroider
0
110
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
230
After go func(): Goroutines Through a Beginner’s Eye
Avatar for Vaibhav Gupta 97vaibhav
0
380
XP, Testing and ninja testing ZOZ5
Avatar for seki at druby.org m_seki
3
630
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
Avatar for もっち mottyzzz
10
6.7k
CSC509 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
330

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
KATA
Avatar for Megan Lloyd mclloyd
32
15k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
238
140k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
232
18k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
369
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k

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