There is an app, NO, a web API for that!

"There's an app for that" used to be Apple’s catchphrase. For a really long time, mobile browsers' capabilities were really limited, and native applications were the norm. But times have changed!

There are a lot of features you can now use to enhance users’ experience in mobile browsers. Did you know you could push notifications and provide offline content for responsive websites? That you could access media, camera or voice recorder and could build an online video audio chat directly in the mobile browser, use AR, etc.? And that’s just a small sneak peak at what is possible.

Responsive design, just adapting your layout to make the site fit smaller screens is not enough anymore. Let’s unleash the capabilities of mobile browsers to create a truly mobile optimized experience. Let’s bring your website almost to the level of a native app experience!

Transcript

1. Stephanie Walter - 2020
   There is a mobile a app,
   NO, a web API for that.
   

   View Slide

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

   View Slide

3. Why do you build a
   native app?
   

   View Slide

4. What are mobile browsers
   capable of today?
   

   View Slide

5. Accessing, capturing and
   streaming medias
   

   View Slide

6. accept="image/*">
   Access phone’s
   photos (gallery)
   

   View Slide

7. accept="video/*">
   Access phone’s
   videos (gallery)
   

   View Slide

8. accept="image/*">
   Capture image /
   videos directly
   accept=“video/*">
   

   View Slide

9. Instagram directly in
   the browser?
   Yes please!
   

   View Slide

10. Video + audio chat in the browser
    Stéphanie Walter - 2019
    ๏ appr.tc
    

    View Slide

11. WebRTC API + getUserMedia/ MediaStream API
    Opens a direct real time communication channel between two clients.
    You can share sound, video and any other data.
    

    View Slide

12. WebRTC and getUserMedia/Stream API
    

    View Slide

13. Tuner in the
    browser
    tuner.ninja
    

    View Slide

14. Custom media
    notifications with
    MediaSession API
    ๏ customise notification artwork
    and data,
    ๏ seek and change track,
    ๏ hardware support (keys,
    headset),
    ๏ still plays when phone is locked.
    Specifications
    

    View Slide

15. MediaSession API (Editor’s Draft)
    

    View Slide

16. Talking to your browser:
    Web Speech API
    demo
    

    View Slide

17. Web Speech API
    

    View Slide

18. Augmented
    Reality with
    Apple’s ARKit 3
    and Android’s
    ARCore
    Native
    Source
    

    View Slide

19. Apple’s AR Quick
    Look can be
    embedded in
    websites (Safari)
    Source
    

    View Slide

20. Android brings AR to Chrome with ARCore + WebXR technology
    

    View Slide

21. Accessing device position
    and sensors
    

    View Slide

22. Geolocation API
    Demand
    geolocation access
    in context, NOT on
    pageload!!!
    

    View Slide

23. Geolocation API
    

    View Slide

24. Provide fallbacks
    Geolocation
    OR manual
    address
    

    View Slide

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

    View Slide

26. From video games to watching the stars:
    apps can use gyroscope and accelerometer
    Native
    

    View Slide

27. Gyroscope API and
    Accelerometer API are
    also available on the web
    + full screen API for the
    fullscreen in the demo
    paperplanes.world
    Web
    

    View Slide

28. Gyroscope Accelerometer
    Chrome Chrome
    

    View Slide

29. Prevent screen from
    dimming or locking with
    Screen Wake Lock API
    (unofficial Chrome spec)
    

    View Slide

30. The responsive
    cooking blog
    example
    

    View Slide

31. Adapt the content and
    design to ambient light with
    AmbientLightSensor API
    Light it up demo
    

    View Slide

32. AmbientLightSensor API
    Chrome
    

    View Slide

33. Dark and Light
    mode based on user
    preference
    @media (prefers-color-scheme: light){
    // light mode
    }
    @media (prefers-color-scheme: dark) {
    // dark mode
    }

    

    View Slide

34. Switching to “dark
    mode” when there’s
    less light in the room
    with light-level
    @media (light-level: dim | normal
    | washed) {
    // adaptation
    }
    (CSS level 5 media query no support yet)
    

    View Slide

35. Seamless experience in every
    network conditions
    

    View Slide

36. Offline access anywhere,
    anytime thanks to
    Service Workers +
    Cache API.
    The disconnect
    

    View Slide

37. Service Workers
    intercept the request
    & provide cached files
    Specifications
    

    View Slide

38. Bringing the experience offline
    Stéphanie Walter - 2019
    

    View Slide

39. Periodically synchronise
    data in the background
    with Background Sync API
    (initial draft)
    

    View Slide

40. The Network
    Information API
    provides information
    about the connection a
    device is using
    Specifications
    

    View Slide

41. Network Information API
    

    View Slide

42. Let’s offer less battery consuming
    resources when the battery is low!
    Adapting the content
    to battery level with
    Battery Status API
    

    View Slide

43. Battery Status API
    

    View Slide

44. (Re)Engaging Users
    

    View Slide

45. Dial the phone number
    
    

    View Slide

46. Launch from home
    screen: remember
    the favicon?
    

    View Slide

47. Add to Home screen from browser menu
    Stéphanie Walter - 2019
    

    View Slide

48. realfavicongenerator.net
    Tool
    

    View Slide

49. Badges on app icons
    for notifications are
    also coming to the
    web with Badging API
    (origin trial in Chrome 73+
    desktop)
    

    View Slide

50. Letting users
    share the web
    content with
    Web Share API
    

    View Slide

51. Web Share API
    

    View Slide

52. Contact Picker API - Share contact from contact list
    Stéphanie Walter - 2019
    Does NOT give access
    to whole contact book,
    users have to pick
    

    View Slide

53. Web Push notifications integrated in the operating system
    Stéphanie Walter - 2019
    

    View Slide

54. Push API + Service Workers
    Service Worker
    Push service
    

    View Slide

55. Push API Service Workers
    

    View Slide

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

    View Slide

57. ๏ Need good timing
    ๏ Are actionable
    ๏ Are personal
    Good Notifications
    Nein!
    

    View Slide

58. ๏ Need good timing
    ๏ Are actionable
    ๏ Are personal
    Good Notifications
    Still no
    

    View Slide

59. Asking for permissions
    without annoying your users
    

    View Slide

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

    View Slide

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

    View Slide

62. On web you will
    only get one
    chance to ask for
    permissions!
    Asking users to
    reset permissions
    is a tedious task
    

    View Slide

63. In native you can
    ask again later but
    user needs to go in
    parameters
    

    View Slide

64. The “double
    permission
    pattern”
    1
    2
    

    View Slide

65. DO
    NOT
    DEMAND
    PERMISSIONS
    ON PAGE LOAD / FIRST LAUNCH
    

    View Slide

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

    View Slide

67. This is true for any type
    of permissions (push,
    media, geolocation, etc.)
    

    View Slide

68. Making transactions and
    authentication easy
    

    View Slide

69. name="cardNumber" 

    id="cardNumber-CC" 

    type="text"

    autocomplete="cc-number"

    pattern=“[0-9]*">
    iOS credit card
    scan &
    autocomplete
    Stack overflow thread to “guess” this
    

    View Slide

70. The Payment Request API
    allows merchants to
    easily collect payment
    information with minimal
    integration.
    paymentrequest.show
    

    View Slide

71. > iOS 10: Apple Pay on
    WebViews with Apple Pay JS
    + Payment Request API
    

    View Slide

72. Payment Request API
    

    View Slide

73. Web Authentication API -
    an API that allows for the
    use of biometric-based
    authentication, as well as
    smart cards and USB
    tokens, for authentication
    webauthn.guide
    

    View Slide

74. Web Authentication API
    Safari 13.3
    

    View Slide

75. Login with
    Google account
    (same on iOS
    with Apple
    account)
    Web
    Native
    

    View Slide

76. Connecting to objects,
    external sources and more…
    

    View Slide

77. Source
    

    View Slide

78. Pairing the browser with a
    monitor for heart beats with
    Bluetooth API for the web
    Source
    

    View Slide

79. Interact with NFC tags and
    devices with Web NFC API
    (unofficial draft)
    

    View Slide

80. From collecting and monitoring
    data monitoring to controlling
    connected objects, etc.
    Enterprise iOT
    potential is HUGE
    

    View Slide

81. Web Bluetooth API
    

    View Slide

82. Not there’s also WebUSB API
    This will be more useful for tablet
    than mobile I think
    (unofficial draft supported on Android
    Chrome)
    

    View Slide

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

    View Slide

84. W3C Web App Manifest
    Un fichier manifest.json qui va nous permettre de déclarer notre site comme une web app.
    Stéphanie Walter - 2019
    Service
    Workers
    Manifest.json
    

    View Slide

85. PWAs (Progressive Web Apps) are just websites that are progressively enhanced to
    function like native apps on supporting platforms
    

    View Slide

86. PWA demo time!
    

    View Slide

87. Launch icon on
    Home screen
    and App Drawer
    

    View Slide

88. Display mode
    browser or
    fullscreen
    (in manifest file)
    "display": "browser"
    "display": “standalone"
    

    View Slide

89. It behaves like
    a native app
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

94. It’s “just” a responsive site
    with some extra features
    

    View Slide

95. The web frees
    you from the
    stores diktat
    

    View Slide

96. Fast UI, better user
    experience in the
    browser
    

    View Slide

97. Harness to power of web
    browsers to reduce cost
    multiplication
    ๏ No more specific development for
    each operating system
    ๏ No Maintenance and updates of
    several apps
    

    View Slide

98. Access to Notifications,
    geolocation, offline
    support, and all the other
    cool APIs and features I
    presented you earlier
    

    View Slide

99. PWAs are not only for Android
    Chrome users
    

    View Slide

100. We can install
     PWA as Chrome
     Desktop apps
     

     View Slide

101. Firefox gets a nice +
     icon and banner
     

     View Slide

102. ๏ They work on Edge (Win 10)
     desktop
     ๏ You can submit them to
     Microsoft Store and they will
     appear alongside native apps.
     Microsoft PWA
     

     View Slide

103. You will be able to
     publish them on
     Google Play Store
     Source
     

     View Slide

104. ๏ No Push (yet? Still not yet in
     ๏ No App installation banner or API
     ๏ PWAs will not be available in the Apple
     store
     iOS partially supports PWAs
     Source
     

     View Slide

105. ๏ Apple Pay is now available in the
     PWAs
     ๏ PWAs run in the background
     iOS partially supports PWAs
     Source
     

     View Slide

106. Apple will not implement
     some of those APIs
     (#WWDC20)
     

     View Slide

107. Quick
     Actions
     Only native
     

     View Slide

108. Widgets
     Only native
     

     View Slide

109. Performance
     ๏ Native apps download a lot of
     assets on user’s phone so they feel
     fast when they load
     ๏ Native apps can use GPU
     acceleration (for video games for
     example) so they still feel a lot faster
     most of the time than websites
     

     View Slide

110. And more
     ๏ Caching LARGE files is still complicated
     (because the cache size is limited)
     ๏ Customisation of certain native UI
     (gallery, HTML5 date picker, etc.)
     ๏ Specific protocol supports (SSH, FTP,
     etc.)
     ๏ SMS, Alarm clock
     

     View Slide

111. So, there’s an App
     API for that?
     

     View Slide

112. UX & Product Designer
     Mobile expert. Pixel & CSS Lover
     stephaniewalter.design @WalterStephanie
     
     

     View Slide