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)