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

Super Powers of Modern Mobile Browsers

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
January 09, 2019

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.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

January 09, 2019
Tweet

Transcript

  1. Super Powers of Modern Mobile Browsers Stéphanie Walter - UX

    Designer & Mobile Expert – 2019 You don’t need an app for that!
  2. UX & UI Designer Mobile expert. Pixel & CSS Lover.

    stephaniewalter.design @WalterStephanie
  3. Why would you build a native app today?

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

  5. I want to engage with users

  6. I want easy authentification and payment

  7. I need access to device capabilities and sensors

  8. Okay, what if you could do a lot of that

    in the browser?
  9. Accessing and streaming medias

  10. Access camera and files <input type="file" accept=“image/*"> <input type="file" accept=”video/*”>

  11. Open the camera directly from browser <input type="file” capture accept=”…/*">

  12. Accept attribute support

  13. <input type="file" id="take- picture" accept="image/*" capture> Instagram directly in the

    browser? + CSS filters. una.im/CSSgram
  14. Video + audio chat in the browser

  15. WebRTC Opens a direct real time communication channel between two

    clients. You can share sound, video and any other data.
  16. WebRTC Support WebRTC getUserMedia/Stream API

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

  18. Accessing device capabilities and sensors

  19. Accessing user’s geolocation

  20. Geolocation API – support

  21. Push notifications integrated in the operating system

  22. Push API + Service Workers

  23. Push API + Service Workers support

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

  25. Having fun with gyroscope and accelerometer 
 (and full screen)

    paperplanes.world
  26. Gyroscope + Accelerometer support

  27. Offline access anywhere, anytime

  28. Service Workers intercept the request & provide cached files

  29. Network type detection

  30. Network API – support

  31. Adapting the content to ambient light

  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)
  33. Let’s propose less battery consuming resources when the battery is

    low! Adapting the content to battery level
  34. Battery Status API

  35. Making transactions and authentification easy

  36. <input 
 name="cardNumber" 
 id="cardNumber-CC" 
 type="text"
 autocomplete="cc-number"
 pattern=“[0-9]*"> iOS

    credit card scan & autocomplete
  37. iOS credit card autofill

  38. Google Pay API (W3C Payment API)

  39. Payment Request API – support

  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
  41. Web Authentication API – support

  42. Bluetooth: connecting to objects and more…

  43. None
  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.
  45. https://www.youtube.com/watch?v=1LV1Fk5ZXwA

  46. Enterprise iOT potential is HUGE Collecting and monitoring data monitoring,

    controlling connected objects, etc.
  47. Web Bluetooth API support

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

  49. Add to Home screen from browser menu

  50. Favicon on Home screen

  51. realfavicongenerator.net

  52. None
  53. Service Workers Manifest.json

  54. Android Mini Footer Bar 1.

  55. Add to Home screen dialog 2.

  56. Application installation 3.

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

  58. Display mode
 (in manifest file) "display": "browser" "display": “standalone"

  59. Native like features on Android

  60. Changing the color of the URL bar <meta name="theme-color" content="#db5945">

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

  62. Automatic Splashscreen Automagically generated based on: ๏ background_color ๏ theme_color

    ๏ Application Name ๏ App icon
  63. So, why should I build a Progressive Web App?

  64. The web frees you from the stores diktat

  65. Fast UI, better user experience in the browser

  66. UI tip: avoid platform specific design Nope

  67. Bringing the experience offline

  68. Keeping user engaged with notifications

  69. ๏ Need good timing ๏ Are actionable ๏ Are personal

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

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

    Good Notifications Nope
  72. Yeah, I just met you, And this is crazy, But

    here’s my request for permissions, So let me notify you maybe?
  73. Ask for permissions in context What do I gain from

    letting you access this?
  74. DO NOT DEMAND PERMISSIONS ON PAGE LOAD This is the

    slide you need to take a picture of
  75. Give user control Please don’t spam me, let me choose!

  76. Because you will only get one chance to ask for

    permissions! Asking users to reset permissions is a tedious task
  77. Provide fallbacks Geolocation OR manual address

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

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

  80. Web Share (unofficial) API – support

  81. PWAs are not only for Android Chrome users

  82. Firefox gets a nice banner
 (but not real installation)

  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
  84. We can install PWA as Chrome Desktop apps chrome://flags/#enable-desktop-pwas

  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
  86. pwa.rocks

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