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
52
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
69
Web App Weekend - Firefox Apps
Avatar for Oscar Martin Cortez Martinez oscarmcm
0
52
RUBOTO
Avatar for Oscar Martin Cortez Martinez oscarmcm
1
97

Other Decks in Programming

See All in Programming
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
Avatar for snhryt snhryt
0
180
JavaDoc 再入門
Avatar for nagise nagise
1
380
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
Avatar for ternbusty ternbusty
1
190
Lemonade + Foundry Toolkit でお手軽アプリ開発
Avatar for 瀬尾佳隆 seosoft
1
370
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6.4k
Snowflake Summitでの新機能 CoCo / CoWork / snowflake-summit-2026-overall-what-new-coco
Avatar for Tatsuhiro tatsuhiro
1
170
Spec Driven Development | AI Summit Lisbon
Avatar for Daniel Sogl danielsogl
PRO
0
200
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
320
その問い、本当に正しいですか？AI時代のエンジニアに必要な哲学と認知科学 / ai-philosophy-cognitive-science
Avatar for MinoDriven minodriven
11
6.1k
Creating Composable Callables in Contemporary C++
Avatar for Björn Fahller rollbear
0
160
ふつうのFeature Flag実践入門
Avatar for irof irof
8
4.1k
鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力
Avatar for tonkotsuboy_com tonkotsuboy_com
2
250

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
HDC tutorial
Avatar for Michiel Stock michielstock
2
720
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
320
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
170
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
440
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k

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