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

Concatenate Conference 2018 — Designing Progressive Web Apps

Concatenate Conference 2018 — Designing Progressive Web Apps

Jason Grigsby

August 10, 2018

More Decks by Jason Grigsby

Other Decks in Technology


  1. Designing Progressive Web Apps

  2. We need a progressive web app!

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

  4. None
  5. Konga • 92% less data for initial load, vs. native

    app • 82% less data to complete first transaction, vs. native app • 63% less data for initial load, vs. previous mobile web experience • 84% less data to complete first transaction, vs. previous mobile web experience Source: Google, http://bit.ly/2f64lRo
  6. Source: https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154

  7. None
  8. What is a progressive web app?

  9. 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.
  10. 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
  11. Progressive web apps allow us to build experiences that previously

    required a native application.
  12. LET’S DO THIS!

  13. 1. Making it feel like an app 2. Installation and

    Discovery 3. Offline mode 4. Push Notifications 5. Beyond PWAs
  14. 1. Making it feel like an app

  15. None
  16. Like obscenity and brunch, web apps can be described but

    not defined. —Jeremy Keith, By any other name
  17. Make it look native? https://material.io/guidelines/platforms/platform-adaptation.html#platform-adaptation-when-to-adapt

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

  19. How many platforms will you adapt to?

  20. Will you jump every time the platform changes?

  21. Define your own design and be consistent. Tripcase maintains same

    design across platforms.
  22. More immersive experience https://www.flickr.com/photos/taylorherringpr/33138630633/in/album-72157679764685922/

  23. Manifest file display options display: "standalone" display: "fullscreen" display: "browser"

    display: “minimal-ui”
  24. We’re spoiled by our browsers

  25. The warm comforts of the browser navigation bar status bar

    address bar
  26. The warm comforts of the browser info, refresh, download tabs

    downloads find in page
  27. The warm comforts of the browser sharing printing email

  28. 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?
  29. Where does this button go? Does it do the same

    thing as the browser back button? Should there be an app back button?
  30. .backButton { display: none; } @media (display-mode: standalone), (display-mode: fullscreen)

    { .backButton { display: block; } } Display mode media query
  31. Not every customer or potential customer will add your Progressive

    Web App to their home screen …but every visitor will “install” your PWA!
  32. Fast, Fluid Experience

  33. Smooth Pages — Avoid Jumps, Use Skeleton Pages

  34. App Shell model of PWAs

  35. Perceived performance matters most By Addy Osmani, http://bit.ly/2o0YBgu

  36. WARNING: App Shell model often assumes you’re building a single

    page application
  37. PWA != SPA

  38. Should feeling like an app be the goal? Should feeling

    like an app be your goal?
  39. 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
  40. 2. Installation and Discovery

  41. { name: "Cloud Four", short_name: "Cloud Four", description: "We design

    and develop responsive websites and progressive web apps.", icons: [ { src: "/android-chrome-192x192.png", sizes: "192x192", type: "image/png" }, { src: "/android-chrome-512x512.png", sizes: "512x512", type: "image/png" } ], theme_color: "#456BD9", background_color: "#FFFFFF", display: "standalone", orientation: "natural", start_url: "/", gcm_sender_id: "482941778795" } Manifest files are simple JSON documents
  42. Startup Screen with Background Color Chrome Opera Samsung

  43. Theme Color Chrome Default Theme Color Chrome Custom Theme Color

  44. Add to Home Screen Badges Firefox Samsung Non PWA PWA

  45. Add to Home Screen Badges Firefox Samsung Non PWA PWA

  46. Add to Home Screen Badges

  47. Add to Home Screen Banners Chrome Opera

  48. Add to Home Screen Banner’s Engagement Heuristic

  49. Pick the Optimal Time to Ask for Install Asking on

    order confirmation page resulted in 3x increase in conversion for Flipkart
  50. Chrome Changing Add-to-Homescreen Behavior

  51. Installation and Discovery No Add to Home Screen Native App

    Stores Manifest Spiders find PWA Manually submit PWA PhoneGap Trusted Web Activity MORE COMPLEX LESS COMPLEX
  52. 3. Offline Mode

  53. Cache for performance and offline fallback

  54. 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
  55. Let User’s Choose What They Want Offline

  56. Pre-cache Content and Apps

  57. Give People Control

  58. 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
  59. 4. Push Notifications

  60. Many Hidden Challenges

  61. Flowchart for how Slack decides whether to send a notification

    or not. https://twitter.com/codevisuals/status/ 838881724016787457
  62. Many people are annoyed by notifications http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications

  63. Don’t immediately ask for permission to send push notifications

  64. Twitter Lite handles push notifications well Browser prompt Confirm and

    Customize Twitter prompt
  65. Twitter Lite handles push notifications well Browser prompt Confirm and

    Customize Twitter prompt
  66. None
  67. 62 63 https://cloudfour.com/thinks/time-to-update-your-permissions-ux/

  68. Push Notifications No Push Notifications Personalized and Integrated Notifications CMS

    Plugin Subscribe via Push Provider One-off Marketing Push Notifications Background Updates Notification Design Analytics and Segmentation Backend Integration MORE COMPLEX LESS COMPLEX
  69. How do we create a plan for this?

  70. 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
  71. Define Your Ideal Progressive Web App

  72. Offline Interactivity Cache for Perf Only Offline Native App Stores

    Website with Perf Improvements Full Screen, App Shell New APIs No Add to Home Screen Basic PWA Feels Like An App Installation and Discovery No Push Notifications Personalized and Integrated Push Push Notifications Beyond PWAs
  73. Benchmark & Plan to Measure

  74. Assess Current Website

  75. Is Your Website Reasonably Fast?

  76. Is it Usable?

  77. Baseline PWA Front-end Additions Larger Initiatives Progressive Web App Blueprint

    Planning & Definition Technical Debt (if Necessary) Gather team Brainstorm Ideal PWA Benchmarks and measurement plans Build roadmap Assess current website Fix performance issues Fix usability issues Manifest HTTPS Service worker for performance Offline Fallback Cache recently viewed pages Precache popular or important pages Add third-party push notification service CMS plugin for push notifications Payment Request API Credentials Management API Integrate notifications with backend systems Background sync Move to app shell
  78. Every step on the path to a PWA makes sense

    on its own.
  79. None
  80. Thank You!

  81. 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.