Slide 1

Slide 1 text

Stephanie Walter - 2020 There is a mobile a app, NO, a web API for that.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Why do you build a native app?

Slide 4

Slide 4 text

What are mobile browsers capable of today?

Slide 5

Slide 5 text

Accessing, capturing and streaming medias

Slide 6

Slide 6 text

Access phone’s photos (gallery)

Slide 7

Slide 7 text

Access phone’s videos (gallery)

Slide 8

Slide 8 text

Capture image / videos directly

Slide 9

Slide 9 text

Instagram directly in the browser? Yes please!

Slide 10

Slide 10 text

Video + audio chat in the browser Stéphanie Walter - 2019 ๏ appr.tc

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

WebRTC and getUserMedia/Stream API

Slide 13

Slide 13 text

Tuner in the browser tuner.ninja

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

MediaSession API (Editor’s Draft)

Slide 16

Slide 16 text

Talking to your browser: Web Speech API demo

Slide 17

Slide 17 text

Web Speech API

Slide 18

Slide 18 text

Augmented Reality with Apple’s ARKit 3 and Android’s ARCore Native Source

Slide 19

Slide 19 text

Apple’s AR Quick Look can be embedded in websites (Safari) Source

Slide 20

Slide 20 text

Android brings AR to Chrome with ARCore + WebXR technology

Slide 21

Slide 21 text

Accessing device position and sensors

Slide 22

Slide 22 text

Geolocation API Demand geolocation access in context, NOT on pageload!!!

Slide 23

Slide 23 text

Geolocation API

Slide 24

Slide 24 text

Provide fallbacks Geolocation OR manual address

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

From video games to watching the stars: apps can use gyroscope and accelerometer Native

Slide 27

Slide 27 text

Gyroscope API and Accelerometer API are also available on the web + full screen API for the fullscreen in the demo paperplanes.world Web

Slide 28

Slide 28 text

Gyroscope Accelerometer Chrome Chrome

Slide 29

Slide 29 text

Prevent screen from dimming or locking with Screen Wake Lock API (unofficial Chrome spec)

Slide 30

Slide 30 text

The responsive cooking blog example

Slide 31

Slide 31 text

Adapt the content and design to ambient light with AmbientLightSensor API Light it up demo

Slide 32

Slide 32 text

AmbientLightSensor API Chrome

Slide 33

Slide 33 text

Dark and Light mode based on user preference @media (prefers-color-scheme: light){ // light mode } @media (prefers-color-scheme: dark) { // dark mode }


Slide 34

Slide 34 text

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)

Slide 35

Slide 35 text

Seamless experience in every network conditions

Slide 36

Slide 36 text

Offline access anywhere, anytime thanks to Service Workers + Cache API. The disconnect

Slide 37

Slide 37 text

Service Workers intercept the request & provide cached files Specifications

Slide 38

Slide 38 text

Bringing the experience offline Stéphanie Walter - 2019

Slide 39

Slide 39 text

Periodically synchronise data in the background with Background Sync API (initial draft)

Slide 40

Slide 40 text

The Network Information API provides information about the connection a device is using Specifications

Slide 41

Slide 41 text

Network Information API

Slide 42

Slide 42 text

Let’s offer less battery consuming resources when the battery is low! Adapting the content to battery level with Battery Status API

Slide 43

Slide 43 text

Battery Status API

Slide 44

Slide 44 text

(Re)Engaging Users

Slide 45

Slide 45 text

Dial the phone number

Slide 46

Slide 46 text

Launch from home screen: remember the favicon?

Slide 47

Slide 47 text

Add to Home screen from browser menu Stéphanie Walter - 2019

Slide 48

Slide 48 text

realfavicongenerator.net Tool

Slide 49

Slide 49 text

Badges on app icons for notifications are also coming to the web with Badging API (origin trial in Chrome 73+ desktop)

Slide 50

Slide 50 text

Letting users share the web content with Web Share API

Slide 51

Slide 51 text

Web Share API

Slide 52

Slide 52 text

Contact Picker API - Share contact from contact list Stéphanie Walter - 2019 Does NOT give access to whole contact book, users have to pick

Slide 53

Slide 53 text

Web Push notifications integrated in the operating system Stéphanie Walter - 2019

Slide 54

Slide 54 text

Push API + Service Workers Service Worker Push service

Slide 55

Slide 55 text

Push API Service Workers

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications Nein!

Slide 58

Slide 58 text

๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications Still no

Slide 59

Slide 59 text

Asking for permissions without annoying your users

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

In native you can ask again later but user needs to go in parameters

Slide 64

Slide 64 text

The “double permission pattern” 1 2

Slide 65

Slide 65 text

DO NOT DEMAND PERMISSIONS ON PAGE LOAD / FIRST LAUNCH

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

This is true for any type of permissions (push, media, geolocation, etc.)

Slide 68

Slide 68 text

Making transactions and authentication easy

Slide 69

Slide 69 text

iOS credit card scan & autocomplete Stack overflow thread to “guess” this

Slide 70

Slide 70 text

The Payment Request API allows merchants to easily collect payment information with minimal integration. paymentrequest.show

Slide 71

Slide 71 text

> iOS 10: Apple Pay on WebViews with Apple Pay JS + Payment Request API

Slide 72

Slide 72 text

Payment Request API

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Web Authentication API Safari 13.3

Slide 75

Slide 75 text

Login with Google account (same on iOS with Apple account) Web Native

Slide 76

Slide 76 text

Connecting to objects, external sources and more…

Slide 77

Slide 77 text

Source

Slide 78

Slide 78 text

Pairing the browser with a monitor for heart beats with Bluetooth API for the web Source

Slide 79

Slide 79 text

Interact with NFC tags and devices with Web NFC API (unofficial draft)

Slide 80

Slide 80 text

From collecting and monitoring data monitoring to controlling connected objects, etc. Enterprise iOT potential is HUGE

Slide 81

Slide 81 text

Web Bluetooth API

Slide 82

Slide 82 text

Not there’s also WebUSB API This will be more useful for tablet than mobile I think (unofficial draft supported on Android Chrome)

Slide 83

Slide 83 text

Progressive Web Apps, building native like web apps and websites

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

PWAs (Progressive Web Apps) are just websites that are progressively enhanced to function like native apps on supporting platforms

Slide 86

Slide 86 text

PWA demo time!

Slide 87

Slide 87 text

Launch icon on Home screen and App Drawer

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

It behaves like a native app

Slide 90

Slide 90 text

Changing the color of the URL bar

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

So, why should I build a Progressive Web App?

Slide 94

Slide 94 text

It’s “just” a responsive site with some extra features

Slide 95

Slide 95 text

The web frees you from the stores diktat

Slide 96

Slide 96 text

Fast UI, better user experience in the browser

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Access to Notifications, geolocation, offline support, and all the other cool APIs and features I presented you earlier

Slide 99

Slide 99 text

PWAs are not only for Android Chrome users

Slide 100

Slide 100 text

We can install PWA as Chrome Desktop apps

Slide 101

Slide 101 text

Firefox gets a nice + icon and banner

Slide 102

Slide 102 text

๏ They work on Edge (Win 10) desktop ๏ You can submit them to Microsoft Store and they will appear alongside native apps. Microsoft PWA

Slide 103

Slide 103 text

You will be able to publish them on Google Play Store Source

Slide 104

Slide 104 text

๏ 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

Slide 105

Slide 105 text

๏ Apple Pay is now available in the PWAs ๏ PWAs run in the background iOS partially supports PWAs Source

Slide 106

Slide 106 text

Apple will not implement some of those APIs (#WWDC20)

Slide 107

Slide 107 text

Quick Actions Only native

Slide 108

Slide 108 text

Widgets Only native

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

So, there’s an App API for that?

Slide 112

Slide 112 text

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