Slide 1

Slide 1 text

Forget about apps Could the future be in the mobile browser? Stéphanie Walter – Nightlybuild 2016

Slide 2

Slide 2 text

Web & UX designer. Mobile enthusiast Pixel and CSS Lover. www.stephaniewalter.fr @WalterStephanie Freelance Designer and working for Alsacréations Illustration by Laurence V.

Slide 3

Slide 3 text

Chapter 1. Accessing and handling images, video and audio directly in the browser.

Slide 4

Slide 4 text

Video and audio conference in the browser No need to install, maintain update any third part plugin or native application. apprtc.appspot.com

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

WebRTC Support WebRTC getUserMedia/Stream API

Slide 7

Slide 7 text

Taking a profile picture in the browser 3 values for the accept attribute: image, video and audio.

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

Taking a profile picture in the browser Now the user can take the picture and upload it as her profile picture.

Slide 10

Slide 10 text

Instagram totally in the browser?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Chapter 2. Enhancing a conference website into a Web App

Slide 13

Slide 13 text

Installating and launching the site as a Progressive Web App

Slide 14

Slide 14 text

W3C Web App Manifest The manifest.json file will help you enhance your website. manifest.json

Slide 15

Slide 15 text

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)

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

Launch icon on 3 different OSs The user can launch the site directly from her Home Screen

Slide 18

Slide 18 text

Boursorama: became full responsive, removed the native application and informed her customers about it "

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

"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)

Slide 21

Slide 21 text

"display": "browser" VS "display": "standalone" Customizing the Display Type

Slide 22

Slide 22 text

The

Slide 23

Slide 23 text

Changing the color of the URL bar

Slide 24

Slide 24 text

“theme_color": “#133742" Providing a site-wide theme color via manifest.json

Slide 25

Slide 25 text

One tool to generate them all realfavicongenerator.net

Slide 26

Slide 26 text

Notification access

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

Support Service Worker Push API

Slide 31

Slide 31 text

Play time: notification testing tool notification-generator

Slide 32

Slide 32 text

Offline schedule access

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

Some Offline examples https://www.pokedex.org/ https://2048-opera-pwa.surge.sh/

Slide 35

Slide 35 text

Demo time: Google IO 2016 events.google.com/io2016

Slide 36

Slide 36 text

Going full Progressive Web Apps ready Instant Loading Web Apps With An Application Shell Architecture By Addy Osmani & Matt Gaunt

Slide 37

Slide 37 text

pwa.rocks

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Chapter 3. Adapting the website to user’s current needs and context. Image michael davis-burchat

Slide 40

Slide 40 text

Detect Ambiant Light Using light sensors on the device, we could adapt the luminosity or contrast of a website to the ambiant light.

Slide 41

Slide 41 text

Support Ambient Light API Environment Media Features @media (light-level: dim | normal | washed) Working Draft, No support yet.

Slide 42

Slide 42 text

Bluetooth URL transfer

Slide 43

Slide 43 text

How about Conference Feedbacks Enhancement? Paper feedbacks: staff put a lot of work into this to summarize and share feedbacks to speakers.

Slide 44

Slide 44 text

The Physical Web

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

How about Conference Feedbacks Enhancement? The beacon broadcasts a URL, the browser can scan and display those URLs.

Slide 47

Slide 47 text

How about Conference Feedbacks Enhancement? The user then opens it directly in the browser and can fill the feedback form online.

Slide 48

Slide 48 text

Bluetooth API In the future we will be able to directly connect object (watches, sensors, smart thermostats, etc.) to a browser through Bluetooth.

Slide 49

Slide 49 text

Like this little Bluetooth controlled Turtle! https://www.youtube.com/watch?v=1LV1Fk5ZXwA

Slide 50

Slide 50 text

Geolocation and battery status

Slide 51

Slide 51 text

Geolocation to go back home We can access to user’s current static location, and also monitor changes in location when she moves.

Slide 52

Slide 52 text

Geolocation API Support Don’t forget the fallback

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

Battery Status API An API that gives you access to the battery level of the device.

Slide 55

Slide 55 text

Now it’s your turn! This is just the beginning of a promising future for the Applications in the mobile browser.

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

• 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

Slide 58

Slide 58 text

• 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