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

[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

Bb0a01a2311e4828a7e6dc721142ce0b?s=128

Michał Michalczuk

September 13, 2017
Tweet

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