Forget about apps, could the future be in the mobile browser?
-
Upload
stephanie-walter -
Category
Design
-
view
245 -
download
0
Transcript of Forget about apps, could the future be in the mobile browser?
![Page 1: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/1.jpg)
Forget about apps
Could the future be in the mobile browser?
Stéphanie Walter – Nightlybuild 2016
![Page 2: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/2.jpg)
Web & UX designer. Mobile enthusiast Pixel and CSS Lover.
www.stephaniewalter.fr @WalterStephanie
Freelance Designer and working for Alsacréations
Illustration by Laurence V.
![Page 3: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/3.jpg)
Chapter 1.
Accessing and handling images, video and audio directly in the browser.
![Page 4: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/4.jpg)
Video and audio conference in the browser
No need to install, maintain update any third part plugin or native application.
apprtc.appspot.com
![Page 5: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/5.jpg)
WebRTC
Opens a direct real time communication channel between two clients.
You can share sound, video and any other data.
![Page 6: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/6.jpg)
WebRTC Support
WebRTC getUserMedia/Stream API
![Page 7: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/7.jpg)
Taking a profile picture in the browser
3 values for the accept attribute: image, video and audio.
<input type="file" id="take-picture" accept="image/*">
![Page 8: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/8.jpg)
Taking a profile picture in the browser
If you want to skip the selection dialog and directly access the camera to take the picture you can add the capture attribute.
<input type="file" id="take-picture" accept="image/*">
![Page 9: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/9.jpg)
Taking a profile picture in the browser
Now the user can take the picture and upload it as her profile picture.
<input type="file" id="take-picture" accept="image/*">
![Page 10: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/10.jpg)
Instagram totally in the browser?
<input type="file" id="take-picture" accept="image/*” capture> + CSS filters.
![Page 12: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/12.jpg)
Chapter 2.
Enhancing a conference website into a Web App
![Page 13: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/13.jpg)
Installating and launching the site as a Progressive Web App
![Page 14: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/14.jpg)
W3C Web App Manifest
The manifest.json file will help you enhance your website.
manifest.json
![Page 15: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/15.jpg)
Favicon for the Home Screen
A small banner helps the user discover that she can add the site to the Home Screen. (Chrome 42+ Android)
![Page 16: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/16.jpg)
Favicon for the Home Screen
Even without a banner it is possible to add the site to Home Screen directly from the browser. Unfortunately not a lot of user know about that.
![Page 17: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/17.jpg)
Launch icon on 3 different OSs
The user can launch the site directly from her Home Screen
![Page 18: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/18.jpg)
Boursorama: became full responsive, removed the native application and informed her customers about it
"
![Page 19: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/19.jpg)
Launch Screen
Chrome 47 >: the browser uses the manifest
theme_color, background_color , name and
favicon to generate a Launch Screen while the
site loads.
![Page 20: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/20.jpg)
"display": "standalone"
Customizing the Display Type
Standalone mode: developers can
choose to launch the site into a full
screen mode without any URL bar.
(Chrome + Opera)
![Page 21: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/21.jpg)
"display": "browser" VS "display": "standalone"
Customizing the Display Type
![Page 22: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/22.jpg)
The<meta name="apple-mobile-web-app-capable”> on iOS
By default, it opens the launched page in full screen, then any URL in a new tab.
![Page 23: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/23.jpg)
<meta name="theme-color" content="#db5945">
Changing the color of the URL bar
![Page 24: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/24.jpg)
“theme_color": “#133742"
Providing a site-wide theme color via manifest.json
![Page 25: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/25.jpg)
One tool to generate them all
realfavicongenerator.net
![Page 26: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/26.jpg)
Notification access
![Page 27: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/27.jpg)
Asking user access to notifications
User must allow access through the browser dialog.
She needs to understand what she will gain from giving you access to notifications.
![Page 28: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/28.jpg)
The notifications are integrated into the OS
Notifications will pop even if the browser and
the site are closed. They also get displayed in
the native notification center of the device.
![Page 29: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/29.jpg)
Push API + Service Worker
A Service Worker is JavaScript running in the background once installed. It acts as sort of small proxy. It’s used to push notifications to the browser.
![Page 30: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/30.jpg)
Support
Service Worker Push API
![Page 31: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/31.jpg)
Play time: notification testing tool
notification-generator
![Page 32: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/32.jpg)
Offline schedule access
![Page 33: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/33.jpg)
Caching the schedule for offline access
Service Worker can intercept the request and provide cached files to display the page faster with or without a connexion. It can also check if the files need to be updated.
![Page 34: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/34.jpg)
Some Offline examples
https://www.pokedex.org/ https://2048-opera-pwa.surge.sh/
![Page 36: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/36.jpg)
Going full Progressive Web Apps ready
Instant Loading Web Apps With An Application Shell Architecture By Addy Osmani & Matt Gaunt
![Page 38: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/38.jpg)
With great power…
There’s currently a lot of debate in the community about hidding the URLs and the potential issues of Progressive Web Apps
![Page 39: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/39.jpg)
Chapter 3.
Adapting the website to user’s current needs and context.
Image michael davis-burchat
![Page 40: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/40.jpg)
Detect Ambiant Light
Using light sensors on the device, we could
adapt the luminosity or contrast of a website
to the ambiant light.
![Page 41: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/41.jpg)
Support
Ambient Light API Environment Media Features
@media (light-level: dim | normal | washed)
Working Draft, No support yet.
![Page 42: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/42.jpg)
Bluetooth URL transfer
![Page 43: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/43.jpg)
How about Conference Feedbacks Enhancement?
Paper feedbacks: staff put a lot of work into this to summarize and share feedbacks to speakers.
![Page 45: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/45.jpg)
How about Conference Feedbacks Enhancement?
A Bluetooth Low Energy (BLE) beacon supporting Eddystone protocol specification is embedded into the conference poster next to the door.
![Page 46: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/46.jpg)
How about Conference Feedbacks Enhancement?
The beacon broadcasts a URL, the browser can scan and display those URLs.
![Page 47: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/47.jpg)
How about Conference Feedbacks Enhancement?
The user then opens it directly in the browser and can fill the feedback form online.
![Page 48: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/48.jpg)
Bluetooth API
In the future we will be able to directly connect object (watches, sensors, smart thermostats, etc.) to a browser through Bluetooth.
![Page 49: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/49.jpg)
Like this little Bluetooth controlled Turtle!
https://www.youtube.com/watch?v=1LV1Fk5ZXwA
![Page 50: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/50.jpg)
Geolocation and battery status
![Page 51: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/51.jpg)
Geolocation to go back home
We can access to user’s current static location, and also monitor changes in location when she moves.
![Page 53: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/53.jpg)
Adapting to battery level
Let’s propose less battery consuming
ressources when the battery is low! This would
be really useful for battery consuming functions
like GPS, P2P, animations, etc.
![Page 54: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/54.jpg)
Battery Status API
An API that gives you access to the battery level of the device.
![Page 55: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/55.jpg)
Now it’s your turn!
This is just the beginning of a promising future for the Applications in the mobile browser.
![Page 56: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/56.jpg)
Web & UX designer.
Mobile enthusiast Pixel and CSS Lover.
www.stephaniewalter.fr @WalterStephanie
Illustration by Laurence V.
Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR)
inpx.it/mobile-nb2016
![Page 57: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/57.jpg)
• APIs and Browsers:
– HTML5 APIs: https://whatwebcando.today/
– Mobile compatibility: http://mobilehtml5.org/
• Media, audio, video
– Tutorial : Getting Started with WebRTC
– 100% video conf in the browser demo
– Camera API demo
• On Progressiv Web Apps:
– Getting started with Progressive Web Apps , Installable Web Apps with the Web App Manifest in Chrome for Android
and Progressive Web App: A New Way to Experience Mobile + How we made the RioRun progressive web app
– Regressive Web Apps
– https://pwa.rocks/
Crédits & Bibliographie
![Page 58: Forget about apps, could the future be in the mobile browser?](https://reader031.fdocuments.us/reader031/viewer/2022030314/588b32611a28ab5a5b8b47af/html5/thumbnails/58.jpg)
• Notifications
– UX guidelines for notifications
– Testing the notifications : https://tests.peter.sh/notification-generator, https://simple-push-
demo.appspot.com/ and http://goroost.com/try-web-push
– Introduction to Service Worker for an introduction Service Workers and Beyond Offline for other cool things
you can do with Service Workers
– Using the Push API
– Service Workers status : isserviceworkerready
• Other ressources
– The Physical web
Crédits & Bibliographie