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

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

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!

Stéphanie Walter

June 30, 2020
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Why do you build a
    native app?

    View full-size slide

  4. What are mobile browsers
    capable of today?

    View full-size slide

  5. Accessing, capturing and
    streaming medias

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Instagram directly in
    the browser?
    Yes please!

    View full-size slide

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

    View full-size 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 full-size slide

  12. WebRTC and getUserMedia/Stream API

    View full-size slide

  13. Tuner in the
    browser
    tuner.ninja

    View full-size 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 full-size slide

  15. MediaSession API (Editor’s Draft)

    View full-size slide

  16. Talking to your browser:
    Web Speech API
    demo

    View full-size slide

  17. Web Speech API

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Accessing device position
    and sensors

    View full-size slide

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

    View full-size slide

  23. Geolocation API

    View full-size slide

  24. Provide fallbacks
    Geolocation
    OR manual
    address

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  28. Gyroscope Accelerometer
    Chrome Chrome

    View full-size slide

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

    View full-size slide

  30. The responsive
    cooking blog
    example

    View full-size slide

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

    View full-size slide

  32. AmbientLightSensor API
    Chrome

    View full-size 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 full-size 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 full-size slide

  35. Seamless experience in every
    network conditions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Network Information API

    View full-size 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 full-size slide

  43. Battery Status API

    View full-size slide

  44. (Re)Engaging Users

    View full-size slide

  45. Dial the phone number

    View full-size slide

  46. Launch from home
    screen: remember
    the favicon?

    View full-size slide

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

    View full-size slide

  48. realfavicongenerator.net
    Tool

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. Web Share API

    View full-size 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 full-size slide

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

    View full-size slide

  54. Push API + Service Workers
    Service Worker
    Push service

    View full-size slide

  55. Push API Service Workers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. Asking for permissions
    without annoying your users

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. The “double
    permission
    pattern”
    1
    2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. Making transactions and
    authentication easy

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  72. Payment Request API

    View full-size 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 full-size slide

  74. Web Authentication API
    Safari 13.3

    View full-size slide

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

    View full-size slide

  76. Connecting to objects,
    external sources and more…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  80. Web Bluetooth API

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  83. 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 full-size slide

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

    View full-size slide

  85. PWA demo time!

    View full-size slide

  86. Launch icon on
    Home screen
    and App Drawer

    View full-size slide

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

    View full-size slide

  88. It behaves like
    a native app

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  94. The web frees
    you from the
    stores diktat

    View full-size slide

  95. Fast UI, better user
    experience in the
    browser

    View full-size slide

  96. 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 full-size slide

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

    View full-size slide

  98. PWAs are not only for Android
    Chrome users

    View full-size slide

  99. We can install
    PWA as Chrome
    Desktop apps

    View full-size slide

  100. Firefox gets a nice +
    icon and banner

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  103. ๏ 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  106. Quick
    Actions
    Only native

    View full-size slide

  107. Widgets
    Only native

    View full-size slide

  108. 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 full-size slide

  109. 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 full-size slide

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

    View full-size slide

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

    View full-size slide