[Hack Tour] Progressive Web Apps - what are they, when to use them?

Lets talk about 2017 buzzword - PWA (Progressive Web Apps) and check what does it mean, how and where we can apply techniques related with it.

Hack Tour stop in Gdańsk; Gdańsk, Poland

Transcript

1. Progressive Web Apps What are they, when to use them? Michał Michalczuk, 13.09.2017
2. Aim of presentation • IT Buzzword of 2017 • When to use it • When not to use it
3. •2/3 webpages traffic is mobile devices •Everyone has mobile apps, for everything 3 What is the case? Who use the webpages
4. Full screen Work offline Icon on home screen Push Notifications Fast / Instant loading 4 Why we love mobile apps? Mobile apps
5. Install everything Find in store (Play/AppStore) Why not the webpage? Updates Too much 5 Why we hate mobile apps? Mobile apps
6. Lets see an example
7. Twitter
8. Pokedex
9. But they were not native mobile apps
10. They were web apps in browser
11. Twitter - add
12. Pokedex - add
13. So, what are Progressive Web Apps? You saw them in action
14. “Progressive Web Apps are user experiences that have the reach of the web” •Reliable •Fast •Engaging 14
15. Reliable 15
16. Fast 16
17. Engaging 17
18. And they are still same webpages you display on browser. On any device.
19. 19 Who is behind it?
20. Ok, who is using it already? 20
21. 21 NO
22. Requirements for full PWA Client • New browser … mostly Chrome • Android Our software • Only SPA • Only via https • PWA compatibility can be measured … on Chrome • Long list of requirements (link in resources) 22
23. Web App Manifest Check most important technologies
24. manifest.json For adding webapp as icon. Contains: • Icons to display • Start url • Mobile OS background colors to use • Full screen or not • Display name Where to put it index.html 24
25. Web App Manifest 25 For adding webapp as icon
26. Adding icon to home screen also works on iOS. But not via manifest.json 26
27. Web App Manifest pwacompat by Google Not sure it will work. 27 Backward compatibility libraries
28. Service Workers Check most important technologies
29. “ Service workers essentially act as proxy servers that sit between web applications, and the browser and network ” Service Worker Running background tasks 29
30. Runs on different thread Service Worker Running background tasks So its not blocking your app. Keep this in mind. 30
31. No DOM access Service Worker Running background tasks Keep this in mind. 31
32. Details: Fully async Based on Promises Is updatable Has own life-cycle Service Worker Running background tasks 32
33. Common scenarios: Offline experience Intercept network requests Make expensive calculations Pre-fetch resources Service Worker Running background tasks 33
34. Registration 34
35. Example: On every fetch event 35
36. Service Workers sw-toolbox by Google github.com/GoogleChrome/sw-toolbox workbox by Google workboxjs.org sw-precache by Google github.com/GoogleChrome/sw-precache 36 Helpful libraries
37. Service Workers 37 For background jobs & offline usage
38. Browsers vendors plan for Service Workers 38 What we know so far
39. It is still an experimental technology. Service Worker Running background tasks 39
40. Notifications, device motions, geolocation … What about the rest?
41. New APIs In our browsers A lot of there sensors where allowed only for mobile applications. Keep in mind – availability depends on browser. whatwebcando.today 41
42. You can use selected PWA techniques. As a short summary, remember
43. Summary 43 Use it • Extra feature • We exactly know the users devices • Internal-company app Don’t use • Work-everywhere solution • Multiple devices/OS support • Multiple browsers support
44. Resources • 2017 U.S. Mobile App Report • Is service worker ready? • PWA – Google docs • PWA - requirements • Getting started PWA • What web can do today • Who uses it • Service Worker API (mozilla) • Service Worker lifecycle • Google offline cookbook 44
45. Thank you! michalczukm michal.michalczuk@goyello.com michalczukm@gmail.com
46. Any questions? michalczukm michal.michalczuk@goyello.com michalczukm@gmail.com