$30 off During Our Annual Pro Sale. View Details »

Getting started with Progressive Web Apps

Vitor Alencar
February 24, 2017

Getting started with Progressive Web Apps

Getting started with Progressive Web Apps

Vitor Alencar

February 24, 2017
Tweet

More Decks by Vitor Alencar

Other Decks in Technology

Transcript

  1. Getting started with
    Progressive Web Apps

    View Slide

  2. Photo goes here
    Vitor Alencar
    Desenvolvedor com foco em
    tecnologias novas e escaláveis,
    graduando em sistemas de
    informação,Co fundador do DEV I/O
    FOR , Google developer groups
    organizer e Organizado do Front-in
    Fortaleza
    @vitormalencar
    GURU-CE

    View Slide

  3. flickr.com/photos/monado/4405843023

    View Slide

  4. This amazing software

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. vs.
    Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
    13% 87%
    Mobile web Apps

    View Slide

  10. 80%
    OF TIME SPENT IS
    IN
    USERS’ TOP 3 APPS
    Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

    View Slide

  11. Capability
    Reach

    View Slide

  12. ZERO
    NUMBER OF APPS
    AVERAGE USER
    INSTALLS PER MONTH
    Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

    View Slide

  13. Capability
    Reach

    View Slide

  14. Capability
    Reach

    View Slide

  15. are a new level of caring about
    the quality of your user experience
    Progressive Web Apps

    View Slide

  16. Reliable
    User experiences need to be...

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Lie-Fi

    View Slide

  21. Reliability means never showing
    the offline dinosaur

    View Slide

  22. Reliable Fast
    User experiences need to be...

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. of users abandon sites that take
    longer than 3 seconds to load
    53%

    View Slide

  27. Reliable Fast Engaging
    User experiences need to be...

    View Slide

  28. Full screen,
    theming,
    orientation, etc.
    Push
    notifications
    Immersive Notifications
    Engaging
    Auto-adding to
    Home Screen
    Home Screen

    View Slide

  29. `
    Web Push
    Notifications

    View Slide

  30. `
    No surprises!

    View Slide

  31. https://wapo.com/pw
    a
    https://wapo.com/pw
    a

    View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. `
    80ms
    article page load time in
    the Progressive Web App
    Poynter article

    View Slide

  39. Reliable Fast Engaging
    Progressive Web Apps are…

    View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. How do I get started?

    View Slide

  45. Stay Secure

    View Slide

  46. `
    HTTPS: Secure connection between
    site and users

    View Slide

  47. Trust
    Is this site who
    they claim to be?
    Data integrity
    Has anyone
    tampered with
    this page?
    User privacy
    Can anyone see
    my browsing
    behavior?
    Keeping Users Safe

    View Slide

  48. Chrome DevTools Security Panel

    View Slide

  49. Search Ranking
    Guidance
    bit.ly/https-migration

    View Slide

  50. Use a Service Worker

    View Slide

  51. View Slide

  52. WHAT ??

    View Slide

  53. View Slide

  54. Web server

    View Slide

  55. Service worker
    Client side proxy
    (written in JavaScript)
    Cache
    Web server

    View Slide

  56. Service Worker Life Cycle
    • Adds app-like lifecycle
    to a page
    • Wakes up only when the OS
    says
    • Only responds to system
    events
    Activated Error
    Idle
    Active Terminated
    Install
    Register

    View Slide

  57. Service Worker Life Cycle
    • Adds app-like lifecycle
    to a page
    • Wakes up only when the OS
    says
    • Only responds to system
    events
    Activated Error
    Idle
    Active Terminated
    Install
    Register

    View Slide

  58. Service Worker Life Cycle
    • Adds app-like lifecycle
    to a page
    • Wakes up only when the OS
    says
    • Only responds to system
    events
    Activated Error
    Idle
    Active Terminated
    Install
    Register

    View Slide

  59. Service Worker Life Cycle
    • Adds app-like lifecycle
    to a page
    • Wakes up only when the OS
    says
    • Only responds to system
    events
    Activated Error
    Idle
    Active Terminated
    Install
    Register

    View Slide

  60. is for the SECOND load.
    Service Worker

    View Slide

  61. Life Cycle of a Service Worker
    Installing the Service Worker
    1st Page Load
    install
    idle

    View Slide

  62. Life Cycle of a Service Worker
    Installing the Service Worker
    2nd Page Load
    activated
    check for
    update

    View Slide

  63. Life Cycle of a Service Worker
    Installing the Service Worker
    Close Page
    idle
    terminated
    activated

    View Slide

  64. Life Cycle of a Service Worker
    Updating a Service Worker
    Load Page with Service Worker
    activated
    check for
    update

    View Slide

  65. Life Cycle of a Service Worker
    Updating a Service Worker
    Load Page with Service Worker
    activated
    check for
    update
    install
    idle

    View Slide

  66. Life Cycle of a Service Worker
    Updating a Service Worker
    Load Page with Service Worker
    activated
    check for
    update
    install
    idle

    View Slide

  67. Caching strategies
    You are in control of the network

    View Slide

  68. Cache, Falling Back to Network

    View Slide

  69. Network, Falling Back to Cache

    View Slide

  70. Cache then Network

    View Slide

  71. Generic Fallback

    View Slide

  72. Cache and Network Race

    View Slide

  73. Caching strategies galore!

    View Slide

  74. Engage Your Users

    View Slide

  75. Add to
    Home Screen

    View Slide

  76. Add To Home Screen
    Was Broken

    View Slide

  77. Add To Home Screen
    Was Broken
    Required user interaction
    Buried deep in menus

    View Slide

  78. Add To Home Screen
    Was Broken
    Required user interaction
    Buried deep in menus
    Where would it start?
    Dependent on bookmark

    View Slide

  79. Add To Home Screen
    Was Broken
    Required user interaction
    Buried deep in menus
    Where would it start?
    Dependent on bookmark
    Would it work offline?
    Users didn't expect offline

    View Slide


  80. {
    "name": "The Washington Post",
    "short_name": "Wash Post",
    "icons": [{
    "src": "icon-48x48.png",
    "sizes": "48x48",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#000000",
    "theme_color": "#000000"
    }

    View Slide

  81. manifest.json
    {
    "name": "The Washington Post",
    "short_name": "Wash Post",
    "icons": [{
    "src": "icon-48x48.png",
    "sizes": "48x48",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#000000",
    "theme_color": "#000000"
    }

    View Slide

  82. manifest.json
    {
    "name": "The Washington Post",
    "short_name": "Wash Post",
    "icons": [{
    "src": "icon-48x48.png",
    "sizes": "48x48",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#000000",
    "theme_color": "#000000"
    }

    View Slide

  83. manifest.json
    {
    "name": "The Washington Post",
    "short_name": "Wash Post",
    "icons": [{
    "src": "icon-48x48.png",
    "sizes": "48x48",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#000000",
    "theme_color": "#000000"
    }

    View Slide

  84. manifest.json
    {
    "name": "The Washington Post",
    "short_name": "Wash Post",
    "icons": [{
    "src": "icon-48x48.png",
    "sizes": "48x48",
    "type": "image/png"
    }, {...}],
    "start_url": "/index.html",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#000000",
    "theme_color": "#000000"
    }

    View Slide

  85. `
    Good, but what
    about prompt to
    install?

    View Slide

  86. A Promise to the User
    Consistent
    Experience
    Works
    Offline
    The User is
    Engaged

    View Slide

  87. `
    Web Push
    Notifications

    View Slide

  88. `
    Web Push
    Notifications
    The browser doesn’t need to be
    open!

    View Slide

  89. `

    View Slide

  90. `
    38%
    open rate
    9x
    more conversions on
    previously abandoned carts

    View Slide

  91. Anatomy of a notification
    I feel I need it and
    it matters right now.
    when:
    it's timely

    View Slide

  92. Anatomy of a notification
    I feel I need it and
    it matters right now.
    when:
    it's timely

    View Slide

  93. Anatomy of a notification
    when:
    it's timely
    what:
    it's
    precise
    It has specific info
    that’s good to
    know or act upon.

    View Slide

  94. Anatomy of a notification
    when:
    it's timely
    what:
    it's
    precise
    what &
    who:
    it's
    relevant
    It’s from people or sources
    that matter to me, which
    makes it personal.

    View Slide

  95. Built on Service Workers
    /* ServiceWorker.js */
    onfetch = function(e) {
    if(e.request.url == "app.html") {
    e.respondWith(
    caches.match(e.request)
    );
    }
    if(e.request.url == "content.json") {
    // go to the network for updates,
    // meanwhile, use cached content
    fetch(...).then(function(r) {
    r.asJSON().then(function(json) {
    e.client.postMessage(json);
    });
    });
    }
    };
    GET /content.json HTTP/1.1
    HOST example.com
    GET /content.json HTTP/1.1
    HOST example.com
    GET /app.html HTTP/1.1
    HOST example.com

    View Slide

  96. Built on Service Workers
    /* ServiceWorker.js */
    onpush = function(event) {
    var data = event.data.json();
    var t = data.title;
    var opt = {
    body: data.body,
    icon: data.icon,
    tag: data.tag
    };
    self.registration
    .showNotification(t, opt);
    };
    End
    Point
    example.co
    m

    View Slide

  97. Check out the Push code lab

    View Slide

  98. Stay Secure

    View Slide

  99. Use a Service Worker

    View Slide

  100. Engage Your Users

    View Slide

  101. `

    View Slide

  102. `
    2x more
    page views
    74% increase
    in time spent

    View Slide

  103. `
    2x more
    page views
    74% increase
    in time spent
    82% more
    conversions on iOS

    View Slide

  104. are progressive.
    Progressive Web Apps

    View Slide

  105. are a new level of caring about
    the quality of your user experience
    Progressive Web Apps

    View Slide

  106. to Establish a Baseline
    goo.gl/S07woZ
    Use Lighthouse

    View Slide

  107. `
    98% 1430.2ms
    First meaningful paint
    94% 2069.4ms
    Time To Interactive
    96% 1591
    Perceptual Speed Index
    vitormalencar.com

    View Slide

  108. Show me the metrics

    View Slide

  109. Show me the metrics

    View Slide

  110. `
    100% 630.9ms
    First meaningful paint
    99% 1210.8ms
    Time To Interactive
    99% 1005
    Perceptual Speed Index
    vitormalencar.com

    View Slide

  111. Show me the metrics

    View Slide

  112. …but not a destination!
    Lighthouse:
    Fantastic Tool

    View Slide

  113. View Slide

  114. http://bit.ly/1ksSnNS

    View Slide

  115. http://bit.ly/2mbUaPN

    View Slide

  116. http://bit.ly/2mpN0U2

    View Slide

  117. View Slide

  118. View Slide

  119. Ready-to-rock Preact starter project
    http://bit.ly/2lKsK2g

    View Slide

  120. https://pwa-directory.appspot.com/

    View Slide

  121. View Slide

  122. +vitormalencar
    @vitormalencar

    View Slide