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
Tweet

More Decks by Michał Michalczuk

Other Decks in Programming

Transcript

  1. Progressive Web Apps
    What are they, when to use them?
    Michał Michalczuk, 13.09.2017

    View full-size slide

  2. Aim of presentation
    • IT Buzzword of 2017
    • When to use it
    • When not to use it

    View full-size slide

  3. •2/3 webpages traffic is mobile devices
    •Everyone has mobile apps, for everything
    3
    What is the case?
    Who use the webpages

    View full-size slide

  4. Full screen Work offline
    Icon on
    home screen
    Push
    Notifications
    Fast / Instant
    loading
    4
    Why we love mobile apps?
    Mobile apps

    View full-size slide

  5. Install
    everything
    Find in store
    (Play/AppStore)
    Why not the
    webpage?
    Updates Too much
    5
    Why we hate mobile apps?
    Mobile apps

    View full-size slide

  6. Lets see an example

    View full-size slide

  7. But they were not native mobile apps

    View full-size slide

  8. They were web apps in browser

    View full-size slide

  9. Twitter
    - add

    View full-size slide

  10. Pokedex
    - add

    View full-size slide

  11. So, what are
    Progressive Web Apps?
    You saw them in action

    View full-size slide

  12. “Progressive Web
    Apps are user
    experiences that have
    the reach of the web”
    •Reliable
    •Fast
    •Engaging
    14

    View full-size slide

  13. And they are still same webpages you display on browser.
    On any device.

    View full-size slide

  14. 19
    Who is behind it?

    View full-size slide

  15. Ok, who is using it already?
    20

    View full-size slide

  16. 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

    View full-size slide

  17. Web App Manifest
    Check most important technologies

    View full-size slide

  18. 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

    View full-size slide

  19. Web App Manifest
    25
    For adding webapp as icon

    View full-size slide

  20. Adding icon to
    home screen
    also works on
    iOS.
    But not via
    manifest.json
    26

    View full-size slide

  21. Web App Manifest
    pwacompat by Google
    Not sure it will work.
    27
    Backward compatibility libraries

    View full-size slide

  22. Service Workers
    Check most important technologies

    View full-size slide


  23. Service workers essentially
    act as proxy servers that sit
    between web applications,
    and the browser
    and network

    Service Worker
    Running background tasks
    29

    View full-size slide

  24. Runs on
    different
    thread
    Service Worker
    Running background tasks
    So its not blocking your app.
    Keep this in mind.
    30

    View full-size slide

  25. No
    DOM
    access
    Service Worker
    Running background tasks
    Keep this in mind.
    31

    View full-size slide

  26. Details:
    Fully async
    Based on Promises
    Is updatable
    Has own life-cycle
    Service Worker
    Running background tasks
    32

    View full-size slide

  27. Common scenarios:
    Offline experience
    Intercept network requests
    Make expensive calculations
    Pre-fetch resources
    Service Worker
    Running background tasks
    33

    View full-size slide

  28. Registration
    34

    View full-size slide

  29. Example: On every fetch event
    35

    View full-size slide

  30. 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

    View full-size slide

  31. Service Workers
    37
    For background jobs & offline usage

    View full-size slide

  32. Browsers vendors plan for Service Workers
    38
    What we know so far

    View full-size slide

  33. It is still an
    experimental
    technology.
    Service Worker
    Running background tasks
    39

    View full-size slide

  34. Notifications, device motions, geolocation …
    What about the rest?

    View full-size slide

  35. 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

    View full-size slide

  36. You can use selected PWA techniques.
    As a short summary, remember

    View full-size slide

  37. 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

    View full-size slide

  38. 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

    View full-size slide