$30 off During Our Annual Pro Sale. View Details »

PWA - Progressive Web Apps - EN

PWA - Progressive Web Apps - EN

Talk presented in Russia during the DeveFest Voronezh 2017.
We talked mostly about Service Workers and how they will help us reshape the web, but also about web app manifest and related web technologies.

Felipe Nascimento de Moura

September 09, 2017
Tweet

More Decks by Felipe Nascimento de Moura

Other Decks in Programming

Transcript

  1. By: Felipe N. Moura
    @felipenmoura

    View Slide

  2. By: Felipe N. Moura
    @felipenmoura

    View Slide

  3. Google Developer Expert
    +12 years developing for the
    web
    In love with JS :)
    Co-founder of
    BrazilJS and Nasc

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. Let's talk
    nerdy things!

    View Slide

  9. Three main technologies
    - Open Web APIs
    - Service Workers
    - Manifest

    View Slide

  10. Good practices
    - Responsive Design
    - Fluid animations
    - Accessible
    - Makes sense

    View Slide

  11. Service Workers

    View Slide

  12. Special powers
    @felipenmoura

    View Slide

  13. Special powers
    - Redirects
    @felipenmoura

    View Slide

  14. View Slide

  15. Special powers
    - Redirects
    - Intercepting requests
    @felipenmoura

    View Slide

  16. @felipenmoura

    View Slide

  17. Special powers
    @felipenmoura
    - Redirects
    - Intercepting requests
    - Cache control

    View Slide

  18. @felipenmoura

    View Slide

  19. Special powers
    @felipenmoura
    - Redirects
    - Intercepting requests
    - Cache control
    - Version control

    View Slide

  20. View Slide

  21. Special powers
    @felipenmoura
    - Redirects
    - Intercepting requests
    - Cache control
    - Version control
    - Progressive evolution/adoption

    View Slide

  22. PROGRESSIVE

    View Slide

  23. How?
    - Based on Web Technologies
    - Open source Technologies
    - Asynchronous (promises, lots of promises)
    - Safe (HTTPS, inside the Service Worker scope)
    @felipenmoura

    View Slide

  24. WEB

    View Slide

  25. What for?
    - To be supported in different platforms
    @felipenmoura

    View Slide

  26. What for?
    @felipenmoura
    - To be supported in different platforms
    - To work in slow connections or even offline

    View Slide

  27. What for?
    @felipenmoura
    - To be supported in different platforms
    - To work in slow connections or even offline
    - To become "installable" in the user's device

    View Slide

  28. What for?
    @felipenmoura
    - To be supported in different platforms
    - To work in slow connections or even offline
    - To become "installable" in the user's device
    - To be much faster

    View Slide

  29. APP

    View Slide

  30. PROGRESSIVE
    WEB
    APP

    View Slide

  31. View Slide

  32. Por: Felipe N. Moura @felipenmoura

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. @felipenmoura

    View Slide

  37. Basic needs
    @felipenmoura

    View Slide

  38. MANIFEST

    View Slide

  39. index.html
    @felipenmoura

    View Slide

  40. webapp-manifest.json
    @felipenmoura

    View Slide

  41. @felipenmoura

    View Slide

  42. @felipenmoura

    View Slide

  43. SERVICE
    WORKERS

    View Slide

  44. Let's CODE!

    View Slide

  45. But first…
    The theory

    View Slide

  46. View Slide

  47. Theory
    "Theory is the difference between knowing something,
    and KNOWING something."
    @felipenmoura

    View Slide

  48. "Theory is the difference between knowing something,
    and KNOWING something."
    -- by Felipe N. Moura
    @felipenmoura
    Theory

    View Slide

  49. Service workers
    - Have their own scope
    - Once registered, runs in background
    - Require HTTPS (or localhost)
    - Can only deal with requests in its own scope (or use opaque responses)
    @felipenmoura

    View Slide

  50. Lifecycle

    View Slide

  51. Service Worker lifecycle

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. Let's CODE!

    View Slide

  56. Let's CODE!
    Now, for real!

    View Slide

  57. HTML (index.html)
    @felipenmoura

    View Slide

  58. HTML (index.html)
    DONE

    View Slide

  59. Browser that do not support Service Worker,
    won't even notice it!

    View Slide

  60. sw.js
    @felipenmoura

    View Slide

  61. @felipenmoura

    View Slide

  62. sw.js
    @felipenmoura

    View Slide

  63. sw.js
    * Must return a Response object to respondWith.
    @felipenmoura

    View Slide

  64. Sw.js - Redirecting
    @felipenmoura

    View Slide

  65. Sw.js - treating 404 errors
    @felipenmoura

    View Slide

  66. - Redirecting with JavaScript
    - Customized 404 using JavaScript

    View Slide

  67. Cool, or what?!

    View Slide

  68. Time for a
    deep dive

    View Slide

  69. Cache
    @felipenmoura

    View Slide

  70. Cache
    @felipenmoura

    View Slide

  71. Application Shell (AppShell)
    @felipenmoura

    View Slide

  72. Offline-first
    @felipenmoura

    View Slide

  73. Look for it in cache
    @felipenmoura

    View Slide

  74. Resolve with what was in cache...
    @felipenmoura

    View Slide

  75. ...or go fetch it
    @felipenmoura

    View Slide

  76. And if it succeed...
    @felipenmoura

    View Slide

  77. ...stores it in cache
    @felipenmoura

    View Slide

  78. Treat the failure risk
    @felipenmoura

    View Slide

  79. IndexedDB

    View Slide

  80. SW may access IndexedDB
    - Can be used to deal with JSON reponses
    - Asynchronous (although, has an "ugly syntax")
    - Allow filtering, searching and update
    @felipenmoura

    View Slide

  81. ImportScripts

    View Slide

  82. Importing Scripts
    @felipenmoura

    View Slide

  83. Web
    Notification

    View Slide

  84. Web Notification
    @felipenmoura

    View Slide

  85. Web Notification
    @felipenmoura

    View Slide

  86. Web Notification

    View Slide

  87. Web Notification
    webapp-manifest.json
    @felipenmoura

    View Slide

  88. Web Notification
    Index.html (inline script)
    @felipenmoura

    View Slide

  89. Web Notification
    sw.js
    @felipenmoura

    View Slide

  90. Hard times!
    @felipenmoura

    View Slide

  91. Hard times!
    - Desligue o cache
    (no console do browser)

    View Slide

  92. Hard times!
    - Desligue o cache
    (no console do browser)
    - Limpe os dados do cache

    View Slide

  93. Hard times!
    - Desligue o cache
    (no console do browser)
    - Limpe os dados do cache
    - Visualize todos os
    Service workers

    View Slide

  94. Hard times!
    - Teste offline

    View Slide

  95. Hard times!
    - Teste offline
    - Teste em lie-fi

    View Slide

  96. Hard times!
    - Teste offline
    - Teste em lie-fi
    - Use o lighthouse

    View Slide

  97. TOOLS

    View Slide

  98. Tools
    SW-Precache

    View Slide

  99. Tools
    Workbox
    https://developers.google.com/web/tools/workbox/

    View Slide

  100. https://npm.org/dsw

    View Slide

  101. TKS!

    View Slide

  102. Thank you!
    @felipeNmoura
    (github || facebook) / felipenmoura
    felipenmoura.com

    View Slide