Getting started with Progressive Web Apps

Getting started with Progressive Web Apps

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