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

PWA Challenges — Toronto Web Perf Meetup

PWA Challenges — Toronto Web Perf Meetup

Jason Grigsby

November 28, 2018
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. PWA Challenges

    View Slide

  2. We need a
    progressive
    web app!

    View Slide

  3. What is a
    progressive
    web app?

    View Slide

  4. How do we
    create a plan
    for this?

    View Slide

  5. Do we need a
    progressive
    web app?

    View Slide

  6. How does the CEO even
    know about progressive
    web apps?

    View Slide

  7. Cool. I’ve been wanting to play with
    service workers… Maybe we can use
    Vue.js here as well… I wonder if this
    can be used as excuse to switch to
    node js…

    View Slide

  8. View Slide

  9. How does the CEO even
    know about progressive
    web apps?

    View Slide

  10. View Slide

  11. View Slide

  12. Ola Cabs
    • 68% increase in mobile traffic
    • Tier 2 cities conversion rate same as
    native app. Tier 3 cities, conversion
    rate is 30% higher with PWA.
    • PWA is 200KB which 300x smaller
    than Android and 500x than iOS.
    • 20% of users who book in the PWA
    had previously uninstalled app.
    Source: Google, http://bit.ly/2q9D4EA

    View Slide

  13. Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

    View Slide

  14. View Slide

  15. What is a
    progressive
    web app?

    View Slide

  16. Original Definition by Frances Berriman and Alex Russell
    Responsive 

    Fit any form factor. RWD FTW!
    Connectivity Independent

    Offline features thanks to service workers.
    App-like interactions

    App shell for apps navigation.
    Fresh

    Up-to-date thanks to service workers.
    Safe

    Served on HTTPS.
    Discoverable

    Manifest files identify them as apps.
    Re-engageable

    Push notifications bring people back to apps.
    Installable

    Can be installed to the home screen w/o app stores.
    Linkable

    Still part of the web—URLs still work.
    Progressive

    Use progressive enhancement for better experience.

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. https://docs.google.com/presentation/d/14fBthXt3i3nRbi7vUrVXj3CjI1ILcYlKDAUMf1LXWpY/edit#slide=id.p22

    View Slide

  25. PWA is a website that has been enhanced with:
    {manifest}
    https service worker
    Credit to Jeremy Keith for explicitly declaring a technical definition: https://adactio.com/journal/13098

    View Slide

  26. {manifest}
    https service worker

    View Slide

  27. service worker

    View Slide

  28. Progressive Web App Service Worker
    Cache
    Network
    Explicit control of network requests and cache

    View Slide

  29. Service workers key to performance boon
    Source: Google, http://bit.ly/2fpGrRr

    View Slide

  30. Service workers key to performance boon
    Source: Google, http://bit.ly/2fpGrRr

    View Slide

  31. Service workers key to performance boon
    Source: Google, http://bit.ly/2fpGrRr

    View Slide

  32. Side note: Measuring the impact of your
    own service worker using synthetic data
    is a pain (right now?).

    View Slide

  33. View Slide

  34. Service workers are
    also key to providing
    an offline experience
    and push notifications

    View Slide

  35. PWA is a website that has been enhanced with:
    {manifest}
    https service worker
    But PWAs can be much more…

    View Slide

  36. Progressive web
    apps allow us to
    build experiences
    that previously
    required a native
    application.

    View Slide

  37. The hype can be a turn off
    https://twitter.com/elliotecweb/status/864070806569066497

    View Slide

  38. The name isn’t for you and worrying about it is
    distraction from just building things that work better for
    everyone. The name is for your boss, for your investor,
    for your marketeer.
    —Frances Berriman, Naming Progressive Web Apps

    View Slide

  39. View Slide

  40. Do we need a
    progressive
    web app?

    View Slide

  41. If so, you would probably benefit from a PWA.
    Does your organization have a website?

    View Slide

  42. Does your organization make money on
    your website via e-commerce,
    advertising, or some other method?
    If so, you definitely need a progressive web app.

    View Slide

  43. FUD
    Fear, Uncertainty, Doubt

    View Slide

  44. We already
    have a native
    app, why do we
    need a PWA?

    View Slide

  45. Reach people who don’t have your native app
    installed or are on a different device.

    View Slide

  46. Your website is often a
    customer’s first interaction
    with your company. 

    A better web experience will likely mean
    more revenue and more native app installs.

    View Slide

  47. The web can’t do
    [insert thing here]

    View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. https://www.flickr.com/photos/ashleyrosex/2861690380
    The web can do more
    than we think.

    View Slide

  62. But iOS
    doesn’t
    support
    PWAs…

    View Slide

  63. View Slide

  64. PWAs work
    fine on older
    browers.
    They are
    progressive.

    View Slide

  65. AliExpress
    • 104% for new users across all
    browsers in conversion
    • 82% increase in iOS conversion
    Source: Google, http://bit.ly/2fq2ckc

    View Slide

  66. Wego
    • 50% increase in iOS conversion
    • 35% increase in average iOS session
    duration
    Source: Google, https://bit.ly/2uOsoNM

    View Slide

  67. The Washington Post saw 5x increase in user engagement

    View Slide

  68. Why? Performance. PWA faster even without SW.

    View Slide

  69. PWAs are a trojan horse
    for performance.

    View Slide

  70. LET’S DO THIS!

    View Slide

  71. 1. Making it feel like an app
    2. Installation and Discovery
    3. Offline mode
    4. Push Notifications
    5. Beyond PWAs

    View Slide

  72. 1. Making it feel like an app
    2. Installation and Discovery
    3. Offline mode
    4. Push Notifications
    5. Beyond PWAs

    View Slide

  73. Making it feel like an app

    View Slide

  74. View Slide

  75. Like obscenity and brunch, web apps can be
    described but not defined.
    —Jeremy Keith, By any other name

    View Slide

  76. Make it look
    native?
    https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt

    View Slide

  77. Do you switch design language between platforms?
    Material Design iOS Design

    View Slide

  78. How many platforms will you adapt to?

    View Slide

  79. What about desktop browsers?

    View Slide

  80. Will you jump every time the platform changes?

    View Slide

  81. Define your own design and be consistent.
    Tripcase maintains same design across platforms.

    View Slide

  82. More immersive experience
    https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/

    View Slide

  83. Manifest file display options
    display: "standalone" display: "fullscreen"
    display: "browser" display: “minimal-ui”

    View Slide

  84. We’re spoiled by our browsers

    View Slide

  85. The warm comforts of the browser
    navigation bar
    status bar
    address bar

    View Slide

  86. The warm comforts of the browser
    info, refresh,
    download
    tabs
    downloads
    find in page

    View Slide

  87. The warm comforts of the browser
    sharing
    printing
    email

    View Slide

  88. Roughing it in app land

    View Slide

  89. Adding a back button is harder than it seems
    • Manage the browser history so back
    button goes to right location.
    • Back button in an app often implies
    a hierarchy, not simply going to the
    last screen you were on.
    • Do you rearchitect your site to
    create an app hierarchy?

    View Slide

  90. View Slide

  91. Where does this button go?
    Does it do the same thing as
    the browser back button?
    Should
    there be an
    app back
    button?

    View Slide

  92. .backButton {
    display: none;
    }
    @media (display-mode: standalone), (display-mode: fullscreen) {
    .backButton {
    display: block;
    }
    }
    Display mode media query

    View Slide

  93. Not every customer or potential customer will add
    your Progressive Web App to their home screen
    …but every visitor will “install” your PWA!

    View Slide

  94. Fast, Fluid Experience

    View Slide

  95. Provide Immediate Feedback

    View Slide

  96. Smooth Pages — Avoid Jumps, Use Skeleton Pages

    View Slide

  97. App Shell model of PWAs

    View Slide

  98. App Shell means first paint happens quickly
    No PWA, No App Shell, 4G PWA with App Shell, 4G

    View Slide

  99. WARNING: App Shell model often assumes
    you’re building a single page application

    View Slide

  100. View Slide

  101. PWA != SPA

    View Slide

  102. Should feeling like an app be the goal?
    Should feeling
    like an app be
    your goal?

    View Slide

  103. Feel Like an App
    Website with
    Performance
    Improvements
    Full screen, app
    shell with native
    design language
    Minimal-ui
    Standalone
    System Fonts Fullscreen
    Animation and Polish App Shell
    Native Design
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  104. Offline Mode

    View Slide

  105. Cache for performance and offline fallback

    View Slide

  106. Offline Fallback Pages
    Can Keep People
    Engaged
    • Trivago found that 67% of people
    continue to browse the site when they
    come back online.
    Source: http://bit.ly/2GoXjCi

    View Slide

  107. Many
    Hidden
    Challenges

    View Slide

  108. DOMException: Quota exceeded.

    View Slide

  109. View Slide

  110. WHAT? 

    THE BROWSER ONLY
    DOWNLOADED 15
    THUMBNAIL IMAGES!

    View Slide

  111. When 7 KB = 7 MB!

    View Slide

  112. https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses

    View Slide

  113. crossorigin=‘anonymous’>

    View Slide

  114. View Slide

  115. Cache recently viewed content for offline use

    View Slide

  116. Cache recently viewed content for offline use

    View Slide

  117. Display the Information You Have

    View Slide

  118. Let User’s Choose What They Want Offline

    View Slide

  119. Pre-cache Content and Apps

    View Slide

  120. Give People Transparency and Control

    View Slide

  121. Offline Interactivity — Or Disallow Editing

    View Slide

  122. View Slide

  123. The goal isn’t offline; offline is just a special case
    of flakiness (and the easiest one to detect
    technically). PWAs and SWs give you the ability to
    be reliable for your users. That’s the advantage
    across all connection states (even online!)
    —Alex Russell

    View Slide

  124. Offline
    Cache for
    Performance
    Only
    Offline
    Interactivity
    Offline
    Fallback
    Offline
    Indicator
    Cache Recently
    Viewed Pages
    Disable
    Interactivity
    Pre-cache
    Predetermined Pages
    Pre-cache
    Dynamic Items
    User Choose
    What to Cache
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  125. Beyond PWAs

    View Slide

  126. Accelerated Mobile Project

    View Slide

  127. I have some opinions about AMP…

    View Slide

  128. But if you must AMP, then AMP to PWA Install Path
    https://developer.washingtonpost.com/pb/blog/post/2016/07/15/amp-up-with-progressive-web-apps/

    View Slide

  129. Auto-login with
    Credential
    Management API

    View Slide

  130. Payment Request API

    View Slide

  131. Redefining Perceived Performance

    View Slide

  132. View Slide

  133. View Slide

  134. View Slide

  135. View Slide

  136. View Slide

  137. View Slide

  138. View Slide

  139. View Slide

  140. Beyond PWAs
    Basic PWA Multiple New APIs
    Autofill Support
    AMP to PWA
    Credential Management API
    Camera, other sensors Payment Request API
    AMP in PWA
    MORE COMPLEX
    LESS COMPLEX

    View Slide

  141. How do we
    create a plan
    for this?

    View Slide

  142. PWAs are progressive because… Progressive Roadmap
    {manifest}
    https
    Jul 13
    Redesign launches
    Better security with HTTPS
    Faster site via HTTP/2
    Better bookmarks via manifest
    Oct 3
    Faster pages
    Offline fallback
    It’s a PWA!
    service worker
    Oct 18
    Offline pages
    Offline indicator
    Improved font loading
    Nov 22
    Push notifications
    HTTP/2 Link Preload
    Dec 7
    Small tweaks
    PWA announced

    View Slide

  143. Every step on
    the path to a
    PWA makes
    sense on its
    own.

    View Slide

  144. View Slide

  145. Available now!
    Follow @thepwabook for updates.
    https://abookapart.com/products/
    progressive-web-apps
    No
    28
    PROGRESSIVE
    WEB APPS
    Jason Grigsby

    View Slide

  146. Thank You!

    View Slide

  147. Thank You!
    White Blank Notebook by Tirachard Kumtanom
    Woman Executive Holding Tablet by Pixabay
    Schedule Planning by Startup Stock Photos
    Hackers by Christopher Dombres
    NSA by by Mario Antonio Pena Zapatería
    Map Location Symbol by Tumisa
    Smartphone on Bridge by Jeremy Levin
    Hype by Kerry J
    Instagram App on iPhone by Pixabay
    Man in Fuzzy Hat by Gratisography
    Southbank - Samsung Galaxy S8 (1) by TaylorHerring
    Now THIS is comfort! by Garry Wilmore
    Trojan Horse by Hsing Wei
    Cold Snow Man Person
    Asphalt Blur Car City by Pixabay
    Woman Listening to Music by bruce mars
    Woman and Dog by Tookapic
    Focus by Mark Hunter
    Person Holding Silver iPhone by rawpixel.com
    MacBook Air Beside Painting by rawpixel.com
    Android Phone by freestocks.org
    Smart Watch by Oliur Rahman
    Apple Office Internet iPad by Pixabay
    Woman Jumping by Quang Anh Ha Nguyen
    SEM by Pixabay
    Legs on Chair by kaboompics.com
    In Hiding by Taylor McBride
    Medusa Kill Switch by Scott Hart
    White Auto Gauge by Mikes Photos
    Blue and Silver Stethoscope by Pixabay
    Tortoise by Frans Van Heerden
    iPhone Photo on Railroad Tracks by Kaique Rocha
    database by ✦ Shmidt Sergey ✦ from the Noun Project
    Cloud by Blackwoodmedia.com.au from the Noun Project
    Responsive Design by Delwar Hossain from the Noun Project
    cogs by Gregor Cresnar from the Noun Project
    Special thanks to these fabulous people who graciously
    shared their work under Creative Commons.

    View Slide