Super Powers of Modern Mobile Browsers

Slide 1

Slide 1 text

Super Powers of Modern Mobile Browsers Stéphanie Walter - UX Designer & Mobile Expert – 2019 You don’t need an app for that!

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Why would you build a native app today?

Slide 4

Slide 4 text

Visibility on “the store” and user’s phone

Slide 5

Slide 5 text

I want to engage with users

Slide 6

Slide 6 text

I want easy authentification and payment

Slide 7

Slide 7 text

I need access to device capabilities and sensors

Slide 8

Slide 8 text

Okay, what if you could do a lot of that in the browser?

Slide 9

Slide 9 text

Accessing and streaming medias

Slide 10

Slide 10 text

Access camera and files

Slide 11

Slide 11 text

Open the camera directly from browser

Slide 12

Slide 12 text

Accept attribute support

Slide 13

Slide 13 text

Instagram directly in the browser? + CSS filters. una.im/CSSgram

Slide 14

Slide 14 text

Video + audio chat in the browser

Slide 15

Slide 15 text

WebRTC Opens a direct real time communication channel between two clients. You can share sound, video and any other data.

Slide 16

Slide 16 text

WebRTC Support WebRTC getUserMedia/Stream API

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Accessing device capabilities and sensors

Slide 19

Slide 19 text

Accessing user’s geolocation

Slide 20

Slide 20 text

Geolocation API – support

Slide 21

Slide 21 text

Push notifications integrated in the operating system

Slide 22

Slide 22 text

Push API + Service Workers

Slide 23

Slide 23 text

Push API + Service Workers support

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Having fun with gyroscope and accelerometer   (and full screen) paperplanes.world

Slide 26

Slide 26 text

Gyroscope + Accelerometer support

Slide 27

Slide 27 text

Offline access anywhere, anytime

Slide 28

Slide 28 text

Service Workers intercept the request & provide cached files

Slide 29

Slide 29 text

Network type detection

Slide 30

Slide 30 text

Network API – support

Slide 31

Slide 31 text

Adapting the content to ambient light

Slide 32

Slide 32 text

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)

Slide 33

Slide 33 text

Let’s propose less battery consuming resources when the battery is low! Adapting the content to battery level

Slide 34

Slide 34 text

Battery Status API

Slide 35

Slide 35 text

Making transactions and authentification easy

Slide 36

Slide 36 text

iOS credit card scan & autocomplete

Slide 37

Slide 37 text

iOS credit card autofill

Slide 38

Slide 38 text

Google Pay API (W3C Payment API)

Slide 39

Slide 39 text

Payment Request API – support

Slide 40

Slide 40 text

Webauth - an API that allows for the use of biometric-based authentication, as well as smart cards and USB tokens, for authentication Fingerprint authentication

Slide 41

Slide 41 text

Web Authentication API – support

Slide 42

Slide 42 text

Bluetooth: connecting to objects and more…

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

https://www.youtube.com/watch?v=1LV1Fk5ZXwA

Slide 46

Slide 46 text

Enterprise iOT potential is HUGE Collecting and monitoring data monitoring, controlling connected objects, etc.

Slide 47

Slide 47 text

Web Bluetooth API support

Slide 48

Slide 48 text

Progressive Web Apps, building native like web apps and websites

Slide 49

Slide 49 text

Add to Home screen from browser menu

Slide 50

Slide 50 text

Favicon on Home screen

Slide 51

Slide 51 text

realfavicongenerator.net

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Service Workers Manifest.json

Slide 54

Slide 54 text

Android Mini Footer Bar 1.

Slide 55

Slide 55 text

Add to Home screen dialog 2.

Slide 56

Slide 56 text

Application installation 3.

Slide 57

Slide 57 text

Launch icon on Home screen and App Drawer 4.

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Native like features on Android

Slide 60

Slide 60 text

Changing the color of the URL bar

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

So, why should I build a Progressive Web App?

Slide 64

Slide 64 text

The web frees you from the stores diktat

Slide 65

Slide 65 text

Fast UI, better user experience in the browser

Slide 66

Slide 66 text

UI tip: avoid platform specific design Nope

Slide 67

Slide 67 text

Bringing the experience offline

Slide 68

Slide 68 text

Keeping user engaged with notifications

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Yeah, I just met you, And this is crazy, But here’s my request for permissions, So let me notify you maybe?

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

DO NOT DEMAND PERMISSIONS ON PAGE LOAD This is the slide you need to take a picture of

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Because you will only get one chance to ask for permissions! Asking users to reset permissions is a tedious task

Slide 77

Slide 77 text

Provide fallbacks Geolocation OR manual address

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Letting (Android) users share the content from the PWA

Slide 80

Slide 80 text

Web Share (unofficial) API – support

Slide 81

Slide 81 text

PWAs are not only for Android Chrome users

Slide 82

Slide 82 text

Firefox gets a nice banner  (but not real installation)

Slide 83

Slide 83 text

๏ No notifications integrated in system ๏ No installation banner ๏ No parameter access ๏ Can only store 50Mb offline ๏ A few “glitches” iOS partially supports PWAs Source

Slide 84

Slide 84 text

We can install PWA as Chrome Desktop apps chrome://flags/#enable-desktop-pwas

Slide 85

Slide 85 text

๏ 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

Slide 86

Slide 86 text

pwa.rocks

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

UX & UI Designer Mobile expert. Pixel & CSS Lover. stephaniewalter.design @WalterStephanie Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)