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

Progressive Web App at Google I/O at Google I/O 2016 Extended in Korea

Progressive Web App at Google I/O at Google I/O 2016 Extended in Korea

Presentation for Google I/O Extended 2016 in Seoul, Korea. It covers what is the new at PWA. For example, basic knowledge of PWA and high-perfomance app and status of Chrome in emerging margets

Jimmy Moon

July 03, 2016
Tweet

More Decks by Jimmy Moon

Other Decks in Programming

Transcript

  1. Progressive
    Web
    App
    @ Google I/O 2016

    View full-size slide

  2. Progressive Web App?

    View full-size slide

  3. - Progressively
    Becoming Apps,
    building in as
    Progressive
    Enhancement
    Alex Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul

    View full-size slide

  4. - Progressively
    Becoming Apps,
    building in as
    Progressive
    Enhancement
    Alex Russell - Progressive Web Apps: Escaping Tabs Without Losing Our Soul

    View full-size slide

  5. - The site begins
    life as a regular
    tab. It doesn’t
    have super-
    powers

    View full-size slide

  6. - The site begins
    life as a regular
    tab. It doesn’t
    have super-
    powers

    View full-size slide

  7. - The site begins
    life as a regular
    tab. It doesn’t
    have super-
    powers
    - The site begins
    life as a regular
    tab. It doesn’t
    have super-
    powers

    View full-size slide

  8. But it is but using
    Progressive App features
    - Security
    - Responsive
    Design

    View full-size slide

  9. But it is but using
    Progressive App features
    - Security
    - Responsive
    Design

    View full-size slide

  10. But it is but using
    Progressive App features
    - Offline
    experience

    View full-size slide

  11. But it is but using
    Progressive App features
    - Offline
    experience

    View full-size slide

  12. But it is but using
    Progressive App features
    - Re-engaging by
    push notification

    View full-size slide

  13. But it is but using
    Progressive App features
    - Re-engaging by
    push notification

    View full-size slide

  14. The second (or third or
    fourth) time one visits the
    site
    - prompt is
    shown by the
    browser
    - Add to home
    screen

    View full-size slide

  15. The second (or third or
    fourth) time one visits the
    site
    - prompt is
    shown by the
    browser
    - Add to home
    screen

    View full-size slide

  16. The second (or third or
    fourth) time one visits the
    site
    - prompt is
    shown by the
    browser
    - Add to home
    screen
    Users can decide to keep
    apps to
    - the home
    screen or app
    launcher
    - Splash screen
    - Instant loading

    View full-size slide

  17. When launched from the
    home screen, these apps
    blend into their
    environment
    - top-level
    - full-screen

    View full-size slide

  18. When launched from the
    home screen, these apps
    blend into their
    environment
    - top-level
    - full-screen

    View full-size slide

  19. Progressive
    Web
    App
    @ Google I/O 2016

    View full-size slide

  20. +JimmyMoon
    @ragingwind
    Google Developer Expert
    KOSSLab

    View full-size slide

  21. “How do you build a great (progressive) web
    app on the mobile … ?
    > Our answer is to”

    View full-size slide

  22. http://goo.gl/xU2MMu

    View full-size slide

  23. Use the Platform
    to build create apps
    - Minimal payload &
    overhead
    - Minimal time to first
    interaction
    - Offline-first

    View full-size slide

  24. Using Custom Elements with Platform power for App shell architecture
    Pages are Web Components

    View full-size slide

  25. Using Custom Elements with Platform power for App shell architecture
    Pages are Web Components

    View full-size slide

  26. http://jonrimmer.github.io/are-we-componentized-yet/

    View full-size slide

  27. - Service Worker
    - Push notification
    - Geolocation and
    More Platform APIs
    - HTTP/2
    - Firebase hosting
    - Brotli
    HTTPS

    View full-size slide

  28. Our tools become part of our deploy process,
    but not part of our development process

    View full-size slide

  29. Use the Platform
    to build create apps
    - Minimal payload &
    overhead
    - Minimal time to
    first interaction
    - Offline-first

    View full-size slide

  30. - Very fast first
    loading
    experience
    - Cached shell
    load instantly
    - Running on RAIL
    App shell
    architecture

    View full-size slide

  31. - Very fast first
    loading
    experience
    - Cached shell
    load instantly
    - Running on RAIL
    App shell
    architecture

    View full-size slide

  32. Three components for App shell. Using transform, rAF and … layout once
    FLIP animations

    View full-size slide

  33. Three components for App shell. Using transform, rAF and … layout once
    FLIP animations

    View full-size slide

  34. Devtools Time
    Timeline: https://googlechrome.github.io/ui-element-
    samples/expand-collapse/

    View full-size slide

  35. Using Polymer’s for App shell architecture

    View full-size slide

  36. Using Polymer’s for App shell architecture

    View full-size slide

  37. Using Polymer’s for App shell architecture

    View full-size slide

  38. Service Worker
    - Born to kill the offline-
    dinosaur
    - Javascript running in
    background
    - Full programmatic control
    of network and cache
    - IndexedDB
    - Plugins
    https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

    View full-size slide

  39. Lighthouse demo:
    https://jakearchibald-gcm.appspot.com/

    View full-size slide

  40. Devtools Time
    Service Worker: https://airhorner.com/

    View full-size slide

  41. Use the Platform
    to build create apps
    - Minimal payload &
    overhead
    - Minimal time to first
    interaction
    - Offline-first

    View full-size slide

  42. Handling Offline

    View full-size slide

  43. Handling Offline

    View full-size slide

  44. Devtools Time
    Cache: https://jakearchibald-gcm.appspot.com/

    View full-size slide

  45. Installable App
    launch from home screen
    splash screen

    View full-size slide

  46. Installable App
    launch from home screen
    splash screen

    View full-size slide

  47. http://app-manifest.firebaseapp.com/

    View full-size slide

  48. $ npm install -g pwa-manifest

    View full-size slide

  49. $ npm install -g pwa-manifest

    View full-size slide

  50. Devtools Time
    Web Manifest: https://airhorner.com/

    View full-size slide

  51. IndexedDB
    It’s the worst API ever designed in the history of computer science.

    View full-size slide

  52. It was a challenge. Wrap IndexedDB, Stash IDB first, try to write it to
    firebase and then remove that stashed data
    Stashing IndexedDB and Pushing Firebase

    View full-size slide

  53. It was a challenge. Wrap IndexedDB, Stash IDB first, try to write it to
    firebase and then remove that stashed data
    Stashing IndexedDB and Pushing Firebase

    View full-size slide

  54. Devtools Time
    IndexedDB: https://jakearchibald-gcm.appspot.com/

    View full-size slide

  55. Web Push
    for Push notification

    View full-size slide

  56. https://github.com/gauntface/simple-push-demo

    View full-size slide

  57. Pushing for engaging

    on Progressive Web Apps

    View full-size slide

  58. Pushing for engaging

    on Progressive Web Apps

    View full-size slide

  59. Next
    • All screenshots and video clips come from Google IO
    2016 Videos for Progressive Web App
    • Google I/O 2016 Codelabs
    • Progressive Web App Dev Summit 2016
    • Progressive Web App on Google developers site
    • GDG Meetup
    • Join GDG slack channel #progressive-webapp

    View full-size slide