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
56
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
200
Tools And Frameworks
Avatar for Oscar Martin Cortez Martinez oscarmcm
0
70
Web App Weekend - Firefox Apps
Avatar for Oscar Martin Cortez Martinez oscarmcm
0
54
RUBOTO
Avatar for Oscar Martin Cortez Martinez oscarmcm
1
100

Other Decks in Programming

See All in Programming
Intent as Code
Avatar for Shoppingjaws shoppingjaws
0
110
MIZARU@SPAJAM2026 第二回予選
Avatar for drama 1901drama
0
110
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
Avatar for HalunoYo. halunoyo
0
410
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
9
3.8k
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
220
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
Avatar for akase244 akase244
0
120
世界の中心で、AI（App Intents）をさけぶ ー App Intents中心設計の実践ガイド
Avatar for touyou touyou
0
160
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
270
信頼性の目標を誰も求めてない
Avatar for Shuma shubox
0
490
Webの地図
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
1
350
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
120
Hello, Hiroshima Geospatial Data! — Exploring DoboX with Python
Avatar for ぴっかりん ra0kley
0
180

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.3k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
450
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
800
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
270
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
410

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