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.

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
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
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
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
32. Por: Felipe N. Moura @felipenmoura
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
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
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