Super Powers of Modern Mobile Browsers

So, do you dream of pushing notifications directly in the mobile browser of your users? Bringing Geolocation features to your mobile website ? What about a browser-based chatting system with video and audio directly available without needing to download a single mobile application or plugin? Do you wish to transform your website into a / build a fully functional web app users will be able to launch from an homescreen icon, with Offline Support and biometric authentification? Let's look at what HTML5 APIs and Progressive Web Apps (PWAs) can achieve to enhance the experience of your mobile users in the browser.

Transcript

1. Super Powers of Modern Mobile Browsers
   Stéphanie Walter - UX Designer & Mobile Expert – 2019
   You don’t
   need an app
   for that!
   

   View Slide

2. UX & UI Designer
   Mobile expert. Pixel & CSS Lover.
   stephaniewalter.design @WalterStephanie
   
   

   View Slide

3. Why would you build a native
   app today?
   

   View Slide

4. Visibility on
   “the store” and
   user’s phone
   

   View Slide

5. I want to
   engage with
   users
   

   View Slide

6. I want easy
   authentification
   and payment
   

   View Slide

7. I need access
   to device
   capabilities and
   sensors
   

   View Slide

8. Okay, what if you could do a
   lot of that in the browser?
   

   View Slide

9. Accessing and streaming
   medias
   

   View Slide

10. Access camera and files
    
    

    View Slide

11. Open the camera directly from browser
    
    

    View Slide

12. Accept attribute support
    

    View Slide

13. capture>
    Instagram directly
    in the browser?
    + CSS filters.
    una.im/CSSgram
    

    View Slide

14. Video + audio chat in the browser
    

    View Slide

15. WebRTC
    Opens a direct real time communication channel between two clients.
    You can share sound, video and any other data.
    

    View Slide

16. WebRTC Support
    WebRTC getUserMedia/Stream API
    

    View Slide

17. Guitar tuner in the browser
    guitar-tuner.appspot.com
    

    View Slide

18. Accessing device
    capabilities and sensors
    

    View Slide

19. Accessing user’s geolocation
    

    View Slide

20. Geolocation API – support
    

    View Slide

21. Push notifications integrated in the operating system
    

    View Slide

22. Push API + Service Workers
    

    View Slide

23. Push API + Service Workers support
    

    View Slide

24. Play time: notification testing tool
    tests.peter.sh/notification-generator
    

    View Slide

25. Having fun with
    gyroscope and
    accelerometer 

    (and full screen)
    paperplanes.world
    

    View Slide

26. Gyroscope + Accelerometer support
    

    View Slide

27. Offline access
    anywhere,
    anytime
    

    View Slide

28. Service
    Workers
    intercept the
    request & provide
    cached files
    

    View Slide

29. Network type detection
    

    View Slide

30. Network API – support
    

    View Slide

31. Adapting the content
    to ambient light
    

    View Slide

32. Ambient light API and CSS Media queries lvl 5
    Ambient Light API
    Environment Media Features :
    @media (light-level: dim |
    normal | washed) {
    // adaptation
    }
    (no support yet)
    

    View Slide

33. Let’s propose less battery consuming
    resources when the battery is low!
    Adapting the content
    to battery level
    

    View Slide

34. Battery Status API
    

    View Slide

35. Making transactions and
    authentification easy
    

    View Slide

36. name="cardNumber" 

    id="cardNumber-CC" 

    type="text"

    autocomplete="cc-number"

    pattern=“[0-9]*">
    iOS credit card
    scan &
    autocomplete
    

    View Slide

37. iOS credit
    card autofill
    

    View Slide

38. Google Pay API
    (W3C Payment API)
    

    View Slide

39. Payment Request API – support
    

    View Slide

40. Webauth - an API that allows for the
    use of biometric-based
    authentication, as well as smart
    cards and USB tokens, for
    authentication
    Fingerprint
    authentication
    

    View Slide

41. Web Authentication API – support
    

    View Slide

42. Bluetooth: connecting to
    objects and more…
    

    View Slide

43. View Slide

44. Beacons that can broadcast URLs
    A Bluetooth Low Energy (BLE) beacon can broadcast and push URLs to users’s phones.
    Browsers can detect those URLs and open the webpage.
    

    View Slide

45. https://www.youtube.com/watch?v=1LV1Fk5ZXwA
    

    View Slide

46. Enterprise iOT
    potential is HUGE
    Collecting and monitoring data
    monitoring, controlling connected
    objects, etc.
    

    View Slide

47. Web Bluetooth API support
    

    View Slide

48. Progressive Web Apps,
    building native like web apps and websites
    

    View Slide

49. Add to Home screen from browser menu
    

    View Slide

50. Favicon on Home screen
    

    View Slide

51. realfavicongenerator.net
    

    View Slide

52. View Slide

53. Service
    Workers
    Manifest.json
    

    View Slide

54. Android Mini
    Footer Bar
    1.
    

    View Slide

55. Add to Home
    screen dialog
    2.
    

    View Slide

56. Application
    installation
    3.
    

    View Slide

57. Launch icon
    on Home
    screen and
    App Drawer
    4.
    

    View Slide

58. Display mode

    (in manifest file)
    "display": "browser"
    "display": “standalone"
    

    View Slide

59. Native like
    features on
    Android
    

    View Slide

60. Changing the color
    of the URL bar
    content="#db5945">
    

    View Slide

61. “theme_color": “#133742"
    A global theme
    color via the
    manifest.json
    

    View Slide

62. Automatic Splashscreen
    Automagically generated based on:
    ๏ background_color
    ๏ theme_color
    ๏ Application Name
    ๏ App icon
    

    View Slide

63. So, why should I build a
    Progressive Web App?
    

    View Slide

64. The web
    frees you from
    the stores
    diktat
    

    View Slide

65. Fast UI,
    better user
    experience in
    the browser
    

    View Slide

66. UI tip: avoid platform specific design
    Nope
    

    View Slide

67. Bringing the experience offline
    

    View Slide

68. Keeping user
    engaged with
    notifications
    

    View Slide

69. ๏ Need good
    timing
    ๏ Are actionable
    ๏ Are personal
    Good Notifications
    Nope
    

    View Slide

70. ๏ Need good
    timing
    ๏ Are actionable
    ๏ Are personal
    Good Notifications
    Nope
    

    View Slide

71. ๏ Need good
    timing
    ๏ Are actionable
    ๏ Are personal
    Good Notifications
    Nope
    

    View Slide

72. Yeah, I just met you,
    And this is crazy,
    But here’s my request for permissions,
    So let me notify you maybe?
    
    

    View Slide

73. Ask for
    permissions in
    context
    What do I gain
    from letting you
    access this?
    

    View Slide

74. DO
    NOT
    DEMAND
    PERMISSIONS
    ON PAGE LOAD
    This is the
    slide you need
    to take a
    picture of
    

    View Slide

75. Give user control
    Please don’t
    spam me, let me
    choose!
    

    View Slide

76. Because you will
    only get one
    chance to ask for
    permissions!
    Asking users to
    reset permissions is
    a tedious task
    

    View Slide

77. Provide fallbacks
    Geolocation OR
    manual address
    

    View Slide

78. Use geolocation
    wisely
    Geolocation to
    auto-format phone
    prefixes is NOT a
    good idea
    

    View Slide

79. Letting
    (Android) users
    share the
    content from
    the PWA
    

    View Slide

80. Web Share (unofficial) API – support
    

    View Slide

81. PWAs are not only for
    Android Chrome users
    

    View Slide

82. Firefox gets a nice
    banner

    (but not real installation)
    

    View Slide

83. ๏ No notifications integrated in system
    ๏ No installation banner
    ๏ No parameter access
    ๏ Can only store 50Mb offline
    ๏ A few “glitches”
    iOS partially
    supports PWAs
    Source
    

    View Slide

84. We can install PWA as Chrome Desktop apps
    chrome://flags/#enable-desktop-pwas
    

    View Slide

85. ๏ Microsoft manually published some
    selected PWAs in their store
    ๏ Bing is indexing PWAs
    ๏ Showing PWAs in Bing search
    results
    ๏ PWAs getting available in Microsoft
    store
    Microsoft PWA
    

    View Slide

86. pwa.rocks
    

    View Slide

87. ๏ Widgets on the phone
    ๏ Access to contact & calendar
    ๏ Notification badges
    ๏ UI control for keyboard trigger
    ๏ Performance (list view, scroll)
    So, what’s missing in mobile browsers?
    

    View Slide

88. UX & UI Designer
    Mobile expert. Pixel & CSS Lover.
    stephaniewalter.design @WalterStephanie
    
    Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)
    

    View Slide