A year with progressive web apps! #webinale

About a year ago, we started using Progressive Web Apps (PWAs). The idea behind PWA was to replace native mobile apps. In this talk, I will show you what is possible to build with PWA, what kind of limitations exist, and what we learned in our journey. Along the way, you will see where progressive web apps can be a good fit for your own projects.

Transcript

1. A year with progressive web
   apps!
   Antonio Perić-Mažar, Locastic
   
   06.04.2019., #webinale
   

   View Slide

2. Antonio Perić-Mažar
   CEO @ Locastic
   Co-Founder @ Tinel Meetup
   Co-Founder @ Blockada
   antonio@locastic.com
   @antonioperic
   

   View Slide

3. Locastic
   • We help clients create amazing web and mobile apps (since 2011)
   • mobile development
   • web development
   • UX/UI
   • Training and Consulting
   • Shift Conference, Symfony Croatia
   • www.locastic.com t: @locastic
   

   View Slide

4. Stop call progressive web
   apps trendy!
   

   View Slide

5. Our world today
   

   View Slide

6. MOBILE
   

   View Slide

7. UX
   

   View Slide

8. MOBILE.UX.
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. https://www.morevisibility.com/blogs/analytics/setting-up-and-reporting-on-site-speed-in-google-analytics.html
    October 2016
    

    View Slide

13. View Slide

14. Mobile web (UX) is broken!!!
    

    View Slide

15. View Slide

16. And trust me… you will never had enough cheese
    

    View Slide

17. “I don't care how many kick-ass Visio architecture diagrams
    you have; as far as the user is concerned, the UI is the
    application. I know UI US HARD, but you have to build an
    impressive UI if you want to be taken seriously. Give your UI
    the high priority it deserves.”
    Jeff Atwood, Coding Horror blog
    

    View Slide

18. “I don't care how many kick-ass Visio architecture diagrams
    you have; as far as the user is concerned, the UI is the
    application. I know UI US HARD, but you have to build an
    impressive UI if you want to be taken seriously. Give your UI
    the high priority it deserves.”
    Jeff Atwood, Coding Horror blog
    

    View Slide

19. View Slide

20. Capebility
    Reach
    

    View Slide

21. “A Progressive Web App uses
    modern web capabilities to deliver
    an app-like user experience.”
    

    View Slide

22. “A Progressive Web App uses
    modern web capabilities to deliver
    an app-like user experience.”
    

    View Slide

23. PWA is:
    • Progressive - Works for every user, regardless of browser choice because it's
    built with progressive enhancement as a core tenet.
    • Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
    • Connectivity independent - Enhanced with service workers to work offline or
    on low-quality networks.
    • App-like - Feels like an app, because the app shell model separates the
    application functionality from application content .
    • Fresh - Always up-to-date thanks to the service worker update process.
    

    View Slide

24. PWA is:
    • Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been
    tampered with.
    • Discoverable - Is identifiable as an "application" thanks to W3C manifest and
    service worker registration scope, allowing search engines to find it.
    • Re-engageable - Makes re-engagement easy through features like push
    notifications.
    • Installable - Allows users to add apps they find most useful to their home
    screen without the hassle of an app store.
    • Linkable - Easily share the application via URL, does not require complex
    installation.
    

    View Slide

25. View Slide

26. Fast Integrated
    Reliable Engaging
    4
    things to focus on
    

    View Slide

27. Fast Integrated
    Reliable Engaging
    

    View Slide

28. Fast
    • No junky scrolling
    • No slow load performance
    • Measure and improve all the time
    • Bad connection (or no connection) is not excuse
    

    View Slide

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

    View Slide

30. https://cloudfour.com/thinks/ios-doesnt-support-progressive-web-apps-so-what/
    

    View Slide

31. View Slide

32. App shell model
    • Reliable performance that is consistently fast
    • Native-like interactions
    • Economical use of data
    

    View Slide

33. Fast Integrated
    Reliable Engaging
    

    View Slide

34. Integrated
    • User should not reach browser to reach your app
    • They should be able to interact same as with any other
    app on their device
    • They expect to have all possibilities as other apps
    • Users should be able to start app from their home
    screen
    

    View Slide

35. https://www.mobigyaan.com/android-8-0-oreo-vs-ios-11-which-is-better
    

    View Slide

36. https://techcrunch.com/2017/08/25/majority-of-u-s-consumers-still-download-zero-apps-per-month-says-comscore/
    

    View Slide

37. https://techcrunch.com/2017/08/25/majority-of-u-s-consumers-still-download-zero-apps-per-month-says-comscore/
    

    View Slide

38. https://www.technology.org/2017/07/28/progressive-web-apps-vs-native-which-is-better-for-your-business/
    

    View Slide

39. 80%
    users intentionally moved apps
    to their home screen
    

    View Slide

40. Broken experience
    • Required user interaction
    • Where it will start?
    • Would it work offline?
    https://medium.com/@saigeleslie/how-to-create-a-progressive-web-app-with-react-in-5-mins-or-less-3aae3fe98902
    

    View Slide

41. Web manifest
    • Simple JSON file
    • Tell browsers about your app and how it should behave once
    app is ‘installed’
    • Having manifest is required to show add to home screen pop-up
    • Works for desktop and mobile apps (chrome)
    • https://manifest-validator.appspot.com/
    • https://app-manifest.firebaseapp.com/
    

    View Slide

42. {
    "background_color":"#ffffff",
    "display":"standalone",
    "icons":[
    …
    ],
    "name":"Twitter",
    "short_name":"Twitter",
    "start_url":"/",
    "theme_color":"#ffffff",
    “scope":"/"
    }
    
    You can add it now to 

    your app
    

    View Slide

43. View Slide

44. https://ponyfoo.com/articles/progressive-app-serviceworker
    

    View Slide

45. 40%
    higher interaction rate from
    Home screen
    

    View Slide

46. Web Payment API!
    

    View Slide

47. 66%
    of purchases on mobile are
    on the mobile web
    

    View Slide

48. 1/3
    of purchases on Web are
    via mobile
    That means the UX
    

    is BROKEN!
    

    View Slide

49. Checkout forms today:
    • Manual
    • Tedious
    • Slow
    • N-taps
    http://www.alyssatucker.com/improving-hollars-ios-checkout-process/
    

    View Slide

50. Autofill - step forward
    • Autocomplete attributes
    • 30% faster
    • Automatic
    • Simple
    • Slow
    • n-taps
    http://www.alyssatucker.com/improving-hollars-ios-checkout-process/
    

    View Slide

51. Web Payment API!
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. Web Payment API!
    • Automatic
    • Simple
    • Fast
    • 1-tap
    • Supportes payment gatway,

    or some applications payment 

    (Google Pay)
    https://paymentrequest.show/images/pr-woocommerce.gif
    

    View Slide

56. More APIs
    • Media Session
    • Media Capture API
    • Casting support
    • Web bluetooth
    • Web Share
    

    View Slide

57. More APIs
    • Media Session
    • Media Capture API
    • Casting support
    • Web bluetooth
    • Web Share
    

    View Slide

58. Remember
    users expect to be able to
    interact with your app in the
    same way that they do all of
    the other apps on their device
    

    View Slide

59. Fast Integrated
    Reliable Engaging
    

    View Slide

60. Reliable
    Reliability means, never showing the Downsaur
    

    View Slide

61. View Slide

62. Reliable
    • The quality of a network connection can be affected by a number of factors such as:
    • Poor coverage of a provider.
    • Extreme weather conditions.
    • Power outages.
    • Users travelling into “dead zones” such as buildings that block their network
    connections.
    • Travelling on a train and going through a tunnel.
    • Internet connection is managed by a third party and time boxed when it will be
    active or inactive like in an airport or hotel.
    • Cultural practises that require limited or no internet access at specific times or days.
    

    View Slide

63. Reliable
    • We need instant loading offline
    • 60% of mobile connection is 2G
    • Fast Application is UX
    • 14 sec to load average website on 4g
    • 19 sec to load average website on 3G
    

    View Slide

64. Service Workers
    

    View Slide

65. Service Workers
    

    View Slide

66. Service Workers
    Service Workers
    

    View Slide

67. Service Workers
    • Rich offline experiences
    • Background syncs
    • Push notifications
    • …
    

    View Slide

68. Service Workers
    • Script that browser runs in background, separated
    from web page
    • It is Javascript worker, so it cannot access to DOM
    directly
    • Service worker is a programmable network proxy,
    allowing you to control how network requests from
    your page are handled.
    

    View Slide

69. Service Workers
    • It's terminated when not in use, and restarted when
    it's next needed, so you cannot rely on global state
    within a service worker's onfetch and onmessage
    handlers.
    • Service workers make extensive use of promises
    • Service worker is for second load
    

    View Slide

70. Service Workers lifecycle
    

    View Slide

71. Register a Service Worker
    if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration)
    {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',
    registration.scope);
    }, function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
    });
    });
    }
    

    View Slide

72. View Slide

73. Service workers Events
    • On install - as a dependency
    • On install - not as a dependency
    • On activate
    • On user interaction
    • On network response
    • Stale-while-revalidate
    • On push message
    • On background-sync
    

    View Slide

74. On install - as a dependency
    

    View Slide

75. On install - as a dependency
    self.addEventListener('install', function(event) {
    event.waitUntil(
    caches.open('mysite-static-v3').then(function(cache) {
    return cache.addAll([
    '/css/whatever-v3.css',
    '/css/imgs/sprites-v6.png',
    '/css/fonts/whatever-v8.woff',
    '/js/all-min-v4.js'
    // etc
    ]);
    })
    );
    });
    

    View Slide

76. On install - not as a dependency
    

    View Slide

77. Update Service Worker
    • Update your service worker JavaScript file. When the user navigates to your
    site, the browser tries to redownload the script file that defined the service
    worker in the background. If there is even a byte's difference in the service
    worker file compared to what it currently has, it considers it new.
    • Your new service worker will be started and the install event will be fired.
    • At this point the old service worker is still controlling the current pages so the
    new service worker will enter a waiting state.
    • When the currently open pages of your site are closed, the old service worker
    will be killed and the new service worker will take control.
    • Once your new service worker takes control, its activate event will be fired.
    

    View Slide

78. On activate
    

    View Slide

79. Update Service Worker
    • self.skipWaiting()
    • Skips waiting for refresh to start using new SW
    

    View Slide

80. On User Interaction
    

    View Slide

81. On Network response
    

    View Slide

82. State-while-revalidate
    

    View Slide

83. On Background Sync
    

    View Slide

84. SW: Serving suggestions - responding to requests
    • Cache only
    • Network only
    • Cache, falling back to network
    • Cache & network race
    • Network falling back to cache
    • Cache then network
    • Generic fallback
    

    View Slide

85. Cache only
    

    View Slide

86. Network only
    

    View Slide

87. Cache, falling back to network
    

    View Slide

88. Cache & network race
    

    View Slide

89. Network, falling back to Cache
    

    View Slide

90. Cache, than Network
    

    View Slide

91. Generic fallback
    

    View Slide

92. View Slide

93. View Slide

94. View Slide

95. Reliable conclusion
    • Think how you design for the success, failure and instability of a
    network connection
    • Data may be expensive, so be considerate to the user
    • Make sure performance is part of your design process and UX
    • Try to provide offline by default if your app doesn't require much
    data
    • Inform users of their current state and of changes in states
    • https://serviceworke.rs/ - different examples
    

    View Slide

96. https://serviceworke.rs/ - different examples
    

    View Slide

97. Your goal is to provide a good
    experience that lessens the
    impact of changes in
    connectivity
    

    View Slide

98. Fast Integrated
    Reliable Engaging
    

    View Slide

99. Engaging
    • Charming and Attractive
    • Shift way how we think in patterns and designs from
    web patterns to some native patterns
    • Push notifications (browser doesn’t need to be
    opened)
    • Push Notification API
    

    View Slide

100. Engaging
     

     View Slide

101. What makes good notification
     Push. Push. Back upon now. (Courtesy Enrique Iglesias)
     

     View Slide

102. What makes good notification
     • Timely - I feel I need and it matters now
     • Precise - specific info, what happens
     • Personal - make it personal
     

     View Slide

103. What makes good notification
     

     View Slide

104. https://www.slideshare.net/SeulgiChoi4/pwa-push-notification
     

     View Slide

105. https://www.slideshare.net/SeulgiChoi4/pwa-push-notification
     

     View Slide

106. View Slide

107. Push Notifications
     {
     "body": "Did you make a $1,000,000 purchase at Dr. Evil...",
     "icon": "images/ccard.png",
     "vibrate": [200, 100, 200, 100, 200, 100, 400],
     "tag": "request",
     "actions": [
     { "action": "yes", "title": "Yes", "icon": "images/yes.png" },
     { "action": "no", "title": "No", "icon": "images/no.png" }
     ]
     }
     

     View Slide

108. 43%
     agrees to an app’s request to
     allow push notifications
     

     View Slide

109. View Slide

110. Tools!
     

     View Slide

111. Lighthouse
     

     View Slide

112. View Slide

113. http://mobilehtml5.org/
     http://mobilehtml5.org/ts/
     http://mobilehtml5.org/tests/
     http://mobilehtml5.org/tests/
     
     te
     
     http://mobilehtml5.org/tests/
     
     t
     
     http://mobilehtml5.org/tests/
     
     

     View Slide

114. Some show case!
     

     View Slide

115. 65% increase in page per session
     75% increase in Tweets sent

     20% decrease in bounce rate
     Twitter Lite
     

     View Slide

116. 76% higher conversation across browsers
     4x higher interaction rate from Add to screen
     Increased usage of native apps also
     Alibaba
     

     View Slide

117. 80%+ conversation
     54% smaller than Android app
     120% smaller than iOS app
     BookMyShow
     

     View Slide

118. Cut load times from 11.91 to 4.69
     seconds
     90% smaller than Native Android App
     https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-
     case-study-78919d98ece0
     Tinder
     

     View Slide

119. Myths about PWA!
     

     View Slide

120. PWAs are only for
     offline apps
     

     View Slide

121. PWAs are a mobile thing
     

     View Slide

122. View Slide

123. PWAs are a Google-only
     thing
     

     View Slide

124. View Slide

125. PWAs are not ready yet
     

     View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. https://pwa.rocks/
     

     View Slide

131. View Slide

132. View Slide

133. Don’t be driven with hype,
     choose the best fit for your
     project
     

     View Slide

134. It is not about PWA vs Native
     apps, it is about Users
     

     View Slide

135. Thank you!
     

     View Slide

136. antonio@locastic.com
     @antonioperic
     www.locastic.com
     Questions?
     

     View Slide