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

Secret Super Powers of Mobile Browsers

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
September 24, 2018
1.1k

Secret Super Powers of Mobile Browsers

Do you dream of pushing notifications directly to the mobile browser of your users? Geolocation in the browser? Of a browser-based chatting system with video and audio directly available without needing to download a single mobile application or plugin? Of transforming your website into a fully functional web app with a launch icon and a cache system? Let's check out 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

September 24, 2018
Tweet

Transcript

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

    & UI Designer – Techfest Bucharest, September 2018
  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 most 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.
  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. Free 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. Nope ๏ Need good timing ๏ Are actionable ๏ Are

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

    personal Good Notifications
  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. Letting (Android) users share the content from the PWA

  79. Web Share (unofficial) API – support

  80. PWAs are not only for Android Chrome users

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

  82. ๏ No notifications integrated in system ๏ No installation banner

    ๏ No parameter access ๏ Can only store 50Mb offline ๏ A few “glitches” iOS partially supports PWAs
  83. We can install PWA as Chrome Desktop apps chrome://flags/#enable-desktop-pwas

  84. ๏ 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
  85. pwa.rocks

  86. ๏ 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?
  87. UX & UI Designer Mobile expert. Pixel & CSS Lover.

    stephaniewalter.design @WalterStephanie Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR) inpx.it/tf2018-mobile