Concatenate Conference 2018 — Designing Progressive Web Apps

Transcript

1. Designing
   Progressive
   Web Apps
   

   View Slide

2. We need a
   progressive
   web app!
   

   View Slide

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

   View Slide

4. View Slide

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
   

   View Slide

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

   View Slide

7. View Slide

8. What is a
   progressive
   web app?
   

   View Slide

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.
   

   View Slide

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
    

    View Slide

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

    View Slide

12. LET’S DO THIS!
    

    View Slide

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

    View Slide

14. 1. Making it feel like an app
    

    View Slide

15. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. How many platforms will you adapt to?
    

    View Slide

20. Will you jump every time the platform changes?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. We’re spoiled by our browsers
    

    View Slide

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

    View Slide

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

    View Slide

27. The warm comforts of the browser
    sharing
    printing
    email
    

    View Slide

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?
    

    View Slide

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

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

    View Slide

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

32. Fast, Fluid Experience
    

    View Slide

33. Smooth Pages — Avoid Jumps, Use Skeleton Pages
    

    View Slide

34. App Shell model of PWAs
    

    View Slide

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

    View Slide

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

    View Slide

37. PWA != SPA
    

    View Slide

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

    View Slide

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
    

    View Slide

40. 2. Installation and Discovery
    

    View Slide

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
    

    View Slide

42. Startup Screen with Background Color
    Chrome Opera Samsung
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. Add to Home Screen Badges
    

    View Slide

47. Add to Home Screen Banners
    Chrome Opera
    

    View Slide

48. Add to Home Screen Banner’s
    Engagement Heuristic
    

    View Slide

49. Pick the Optimal Time to Ask for Install
    Asking on order
    confirmation page
    resulted in 3x
    increase in
    conversion for
    Flipkart
    

    View Slide

50. Chrome Changing Add-to-Homescreen Behavior
    

    View Slide

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
    

    View Slide

52. 3. Offline Mode
    

    View Slide

53. Cache for performance and offline fallback
    

    View Slide

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
    

    View Slide

55. Let User’s Choose What They Want Offline
    

    View Slide

56. Pre-cache Content and Apps
    

    View Slide

57. Give People Control
    

    View Slide

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
    

    View Slide

59. 4. Push Notifications
    

    View Slide

60. Many
    Hidden
    Challenges
    

    View Slide

61. Flowchart for how Slack
    decides whether to send
    a notification or not.
    https://twitter.com/codevisuals/status/
    838881724016787457
    

    View Slide

62. Many people are annoyed by notifications
    http://info.localytics.com/blog/the-inside-view-how-consumers-really-feel-about-push-notifications
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

66. View Slide

67. 62 63
    https://cloudfour.com/thinks/time-to-update-your-permissions-ux/
    

    View Slide

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
    

    View Slide

69. How do we
    create a plan
    for this?
    

    View Slide

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
    

    View Slide

71. Define Your Ideal
    Progressive Web App
    

    View Slide

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
    

    View Slide

73. Benchmark & Plan to Measure
    

    View Slide

74. Assess Current Website
    

    View Slide

75. Is Your Website
    Reasonably Fast?
    

    View Slide

76. Is it Usable?
    

    View Slide

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
    

    View Slide

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

    View Slide

79. View Slide

80. Thank You!
    

    View Slide

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.
    

    View Slide