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

Progressive Web Apps, qué son, cómo se hacen y por qué deberian importarte

Progressive Web Apps, qué son, cómo se hacen y por qué deberian importarte

My slides for T3chfest 2017. Introduction to the Progressive Web App concept, the core technologies that enable them and why zre they a disrupting concept for the industry

Enrique García Navalón

February 09, 2017

More Decks by Enrique García Navalón

Other Decks in Technology


  1. 9 y 10 de febrero #T3chFest2017 Progressive Web Apps. Qué

    son, cómo se hacen y por qué deberían importarte. Enrique Garcia Navalon SyncRTC/Mashme.io
  2. Agenda • The context of PWAs • What is a

    PWA, conceptually • How do we build PWAs, realistically • Resources, tools, diving deeper • Q&A 9 y 10 de febrero
  3. How did the crappiest technology ever managed to beat the

    promised land of cross-platform desktop apps? 9 y 10 de febrero
  4. How did mobile platforms fight back? What is the difference

    between mobile apps and desktop apps? 9 y 10 de febrero
  5. “A Progressive Web App uses modern web capabilities to deliver

    an app-like user experience.” – Progressive Web Apps 9 y 10 de febrero
  6. Reliable - Load instantly, even in uncertain network conditions, and

    never show the “page not available offline”. 9 y 10 de febrero
  7. Fast - Respond quickly to user interactions with silky smooth

    animations and no janky scrolling. 9 y 10 de febrero
  8. Engaging - Feel like a natural app on the device,

    with an immersive user experience. 9 y 10 de febrero
  9. The good from the (good) apps • Great performance •

    Smooth animations • Instant loading and offline support • Tap-and-use from the homescreen 9 y 10 de febrero
  10. The good from the web • Discoverability • Distribution (just

    a URL) • Cross-platform* • Size 9 y 10 de febrero
  11. A PWA is ... • Your responsive web app, plus

    ◦ Offline support ◦ Push notifications ◦ Add to homescreen 9 y 10 de febrero
  12. A PWA is not ... • The ultimate software solution

    for mankind. ◦ It’s just a step forward. • Hybrid app (Cordova packaged web). ◦ It’s still a browser website. 9 y 10 de febrero
  13. HTTPS - Secure communications, protection from baddies and requisite for

    some APIs and technologies. 9 y 10 de febrero
  14. App Manifest - Tell the browser how to launch your

    PWA. Enables installation into homescreen, glorified bookmark. Just a good ol’JSON. 9 y 10 de febrero
  15. Google magic! • Dynamically creates an apk for your web

    ◦ Kind of like Cordova packaging • FUNDAMENTAL ◦ Notifications from app, not Chrome ◦ App size during distribution (page load) ◦ See the web app in installed apps list 9 y 10 de febrero
  16. Service Workers - Background JavaScript worker. Can act as a

    network proxy and make push notifications. Fundamental piece, but not cross-browser yet. 9 y 10 de febrero
  17. Web Push Notifications - Two APIs. Push for server to

    service worker communication. Notification for service worker to user communication. 9 y 10 de febrero
  18. Offline-first - Design and build with low or zero connectivity

    is not as a contingency or error-handling feature but rather a reality and fault-tolerant architecture. 9 y 10 de febrero
  19. AppShell - Application architecture where the structural part of the

    app is quickly loaded (and cached) while the content is populated afterwards. 9 y 10 de febrero
  20. Optimize performance - Scrolls at 60fps, never ever freeze UI,

    fast and slick animations, etc. Just good ol’ codin. 9 y 10 de febrero
  21. Tools, frameworks and libraries • Lighthouse audit tool (very cool!)

    • App Manifest generator • SW-precache and SW-toolbox libraries • AppShell Architecture 9 y 10 de febrero