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
   

   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