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