Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Forget about apps, could the future be in the mobile browser?

Stéphanie Walter
September 02, 2016

Forget about apps, could the future be in the mobile browser?

Do you dream of pushing notifications to your website users to tell them the conference they signed up for is starting in 10 minutes? Of a browser-based chatting system with video and audio directly available without needing to download a single mobile application or plugin? Of transforming your website into a fully functional web app with a launch icon and a cache system? Let's check out a few tangible examples to see what HTML5 APIs and CSS3 will achieve for our mobile browsers in a really close future.

Stéphanie Walter

September 02, 2016
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Forget about apps Could the future be in the mobile

    browser? Stéphanie Walter – Nightlybuild 2016
  2. Web & UX designer. Mobile enthusiast Pixel and CSS Lover.

    www.stephaniewalter.fr @WalterStephanie Freelance Designer and working for Alsacréations Illustration by Laurence V.
  3. Chapter 1. Accessing and handling images, video and audio directly

    in the browser.
  4. Video and audio conference in the browser No need to

    install, maintain update any third part plugin or native application. apprtc.appspot.com
  5. WebRTC Opens a direct real time communication channel between two

    clients. You can share sound, video and any other data.
  6. WebRTC Support WebRTC getUserMedia/Stream API

  7. 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/*">
  8. 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/*">
  9. 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/*">
  10. Instagram totally in the browser? <input type="file" id="take-picture" accept="image/*” capture>

    + CSS filters.
  11. Guitar tuner in the browser guitar-tuner.appspot.com

  12. Chapter 2. Enhancing a conference website into a Web App

  13. Installating and launching the site as a Progressive Web App

  14. W3C Web App Manifest The manifest.json file will help you

    enhance your website. manifest.json
  15. 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)
  16. 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.
  17. Launch icon on 3 different OSs The user can launch

    the site directly from her Home Screen
  18. Boursorama: became full responsive, removed the native application and informed

    her customers about it "
  19. 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.
  20. "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)
  21. "display": "browser" VS "display": "standalone" Customizing the Display Type

  22. 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.
  23. <meta name="theme-color" content="#db5945"> Changing the color of the URL bar

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

  25. One tool to generate them all realfavicongenerator.net

  26. Notification access

  27. 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.
  28. 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.
  29. 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.
  30. Support Service Worker Push API

  31. Play time: notification testing tool notification-generator

  32. Offline schedule access

  33. 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.
  34. Some Offline examples https://www.pokedex.org/ https://2048-opera-pwa.surge.sh/

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

  36. Going full Progressive Web Apps ready Instant Loading Web Apps

    With An Application Shell Architecture By Addy Osmani & Matt Gaunt
  37. pwa.rocks

  38. 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
  39. Chapter 3. Adapting the website to user’s current needs and

    context. Image michael davis-burchat
  40. Detect Ambiant Light Using light sensors on the device, we

    could adapt the luminosity or contrast of a website to the ambiant light.
  41. Support Ambient Light API Environment Media Features @media (light-level: dim

    | normal | washed) Working Draft, No support yet.
  42. Bluetooth URL transfer

  43. How about Conference Feedbacks Enhancement? Paper feedbacks: staff put a

    lot of work into this to summarize and share feedbacks to speakers.
  44. The Physical Web

  45. 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.
  46. How about Conference Feedbacks Enhancement? The beacon broadcasts a URL,

    the browser can scan and display those URLs.
  47. How about Conference Feedbacks Enhancement? The user then opens it

    directly in the browser and can fill the feedback form online.
  48. Bluetooth API In the future we will be able to

    directly connect object (watches, sensors, smart thermostats, etc.) to a browser through Bluetooth.
  49. Like this little Bluetooth controlled Turtle! https://www.youtube.com/watch?v=1LV1Fk5ZXwA

  50. Geolocation and battery status

  51. Geolocation to go back home We can access to user’s

    current static location, and also monitor changes in location when she moves.
  52. Geolocation API Support Don’t forget the fallback

  53. 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.
  54. Battery Status API An API that gives you access to

    the battery level of the device.
  55. Now it’s your turn! This is just the beginning of

    a promising future for the Applications in the mobile browser.
  56. 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
  57. • 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
  58. • 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