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

Super Powers of Modern Mobile Browsers

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.

Stéphanie Walter

January 09, 2019
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

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. WebRTC Opens a direct real time communication channel between two

    clients. You can share sound, video and any other data.
  4. 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)
  5. Webauth - an API that allows for the use of

    biometric-based authentication, as well as smart cards and USB tokens, for authentication Fingerprint authentication
  6. 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.
  7. Yeah, I just met you, And this is crazy, But

    here’s my request for permissions, So let me notify you maybe?
  8. DO NOT DEMAND PERMISSIONS ON PAGE LOAD This is the

    slide you need to take a picture of
  9. Because you will only get one chance to ask for

    permissions! Asking users to reset permissions is a tedious task
  10. ๏ No notifications integrated in system ๏ No installation banner

    ๏ No parameter access ๏ Can only store 50Mb offline ๏ A few “glitches” iOS partially supports PWAs Source
  11. ๏ 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
  12. ๏ 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?
  13. UX & UI Designer Mobile expert. Pixel & CSS Lover.

    stephaniewalter.design @WalterStephanie Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)