Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[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

Michał Michalczuk

September 13, 2017

More Decks by Michał Michalczuk

Other Decks in Programming


  1. Aim of presentation • IT Buzzword of 2017 • When

    to use it • When not to use it
  2. •2/3 webpages traffic is mobile devices •Everyone has mobile apps,

    for everything 3 What is the case? Who use the webpages
  3. Full screen Work offline Icon on home screen Push Notifications

    Fast / Instant loading 4 Why we love mobile apps? Mobile apps
  4. Install everything Find in store (Play/AppStore) Why not the webpage?

    Updates Too much 5 Why we hate mobile apps? Mobile apps
  5. “Progressive Web Apps are user experiences that have the reach

    of the web” •Reliable •Fast •Engaging 14
  6. 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
  7. 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
  8. Web App Manifest pwacompat by Google Not sure it will

    work. 27 Backward compatibility libraries
  9. “ Service workers essentially act as proxy servers that sit

    between web applications, and the browser and network ” Service Worker Running background tasks 29
  10. Runs on different thread Service Worker Running background tasks So

    its not blocking your app. Keep this in mind. 30
  11. Details: Fully async Based on Promises Is updatable Has own

    life-cycle Service Worker Running background tasks 32
  12. Common scenarios: Offline experience Intercept network requests Make expensive calculations

    Pre-fetch resources Service Worker Running background tasks 33
  13. 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
  14. 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
  15. 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
  16. 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