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.

929ed9958756c5c829a9eed068910646?s=128

Felipe Nascimento de Moura

September 09, 2017
Tweet

Transcript

  1. By: Felipe N. Moura @felipenmoura

  2. By: Felipe N. Moura @felipenmoura

  3. Google Developer Expert +12 years developing for the web In

    love with JS :) Co-founder of BrazilJS and Nasc
  4. None
  5. None
  6. None
  7. None
  8. Let's talk nerdy things!

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

    - Manifest
  10. Good practices - Responsive Design - Fluid animations - Accessible

    - Makes sense
  11. Service Workers

  12. Special powers @felipenmoura

  13. Special powers - Redirects @felipenmoura

  14. None
  15. Special powers - Redirects - Intercepting requests @felipenmoura

  16. @felipenmoura

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

    control
  18. @felipenmoura

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

    control - Version control
  20. None
  21. Special powers @felipenmoura - Redirects - Intercepting requests - Cache

    control - Version control - Progressive evolution/adoption
  22. PROGRESSIVE

  23. How? - Based on Web Technologies - Open source Technologies

    - Asynchronous (promises, lots of promises) - Safe (HTTPS, inside the Service Worker scope) @felipenmoura
  24. WEB

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

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

    - To work in slow connections or even offline
  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
  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
  29. APP

  30. PROGRESSIVE WEB APP

  31. None
  32. Por: Felipe N. Moura @felipenmoura

  33. None
  34. None
  35. None
  36. @felipenmoura

  37. Basic needs @felipenmoura

  38. MANIFEST

  39. index.html @felipenmoura

  40. webapp-manifest.json @felipenmoura

  41. @felipenmoura

  42. @felipenmoura

  43. SERVICE WORKERS

  44. Let's CODE!

  45. But first… The theory

  46. None
  47. Theory "Theory is the difference between knowing something, and KNOWING

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

    -- by Felipe N. Moura @felipenmoura Theory
  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
  50. Lifecycle

  51. Service Worker lifecycle

  52. None
  53. None
  54. None
  55. Let's CODE!

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

  57. HTML (index.html) @felipenmoura

  58. HTML (index.html) DONE

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

    it!
  60. sw.js @felipenmoura

  61. @felipenmoura

  62. sw.js @felipenmoura

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

  64. Sw.js - Redirecting @felipenmoura

  65. Sw.js - treating 404 errors @felipenmoura

  66. - Redirecting with JavaScript - Customized 404 using JavaScript

  67. Cool, or what?!

  68. Time for a deep dive

  69. Cache @felipenmoura

  70. Cache @felipenmoura

  71. Application Shell (AppShell) @felipenmoura

  72. Offline-first @felipenmoura

  73. Look for it in cache @felipenmoura

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

  75. ...or go fetch it @felipenmoura

  76. And if it succeed... @felipenmoura

  77. ...stores it in cache @felipenmoura

  78. Treat the failure risk @felipenmoura

  79. IndexedDB

  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
  81. ImportScripts

  82. Importing Scripts @felipenmoura

  83. Web Notification

  84. Web Notification @felipenmoura

  85. Web Notification @felipenmoura

  86. Web Notification

  87. Web Notification webapp-manifest.json @felipenmoura

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

  89. Web Notification sw.js @felipenmoura

  90. Hard times! @felipenmoura

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

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

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

    - Limpe os dados do cache - Visualize todos os Service workers
  94. Hard times! - Teste offline

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

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

    Use o lighthouse
  97. TOOLS

  98. Tools SW-Precache

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

  100. https://npm.org/dsw

  101. TKS!

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