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