Secret Super Powers of Mobile Browsers

Do you dream of pushing notifications directly to the mobile browser of your users? Geolocation in the browser? 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 what HTML5 APIs and Progressive Web Apps (PWAs) can achieve to enhance the experience of your mobile users in the browser.

Transcript

1. Secret Super Powers of Mobile Browsers Stéphanie Walter - UX & UI Designer – Techfest Bucharest, September 2018
2. UX & UI Designer Mobile expert. Pixel & CSS Lover. stephaniewalter.design @WalterStephanie
3. Why would you build a native app today?
4. Visibility on “the store” and user’s phone
5. I want to engage with users
6. I want easy authentification and payment
7. I need access to device capabilities and sensors
8. Okay, what if you could do most of that in the browser?
9. Accessing and streaming medias
10. Access camera and files <input type="file" accept=“image/*"> <input type="file" accept=”video/*”>
11. Open the camera directly from browser <input type="file” capture accept=”…/*">
12. Accept attribute support
13. <input type="file" id="take- picture" accept="image/*" capture> Instagram directly in the browser? + CSS filters.
14. Video + audio chat in the browser
15. WebRTC Opens a direct real time communication channel between two clients. You can share sound, video and any other data.
16. WebRTC Support WebRTC getUserMedia/Stream API
17. Guitar tuner in the browser guitar-tuner.appspot.com
18. Accessing device capabilities and sensors
19. Accessing user’s geolocation
20. Geolocation API – support
21. Push notifications integrated in the operating system
22. Push API + Service Workers
23. Push API + Service Workers support
24. Play time: notification testing tool tests.peter.sh/notification-generator
25. Having fun with gyroscope and accelerometer 
 (and full screen) paperplanes.world
26. Gyroscope + Accelerometer support
27. Offline access anywhere, anytime
28. Service Workers intercept the request & provide cached files
29. Network type detection
30. Network API – support
31. Adapting the content to ambient light
32. 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)
33. Let’s propose less battery consuming resources when the battery is low! Adapting the content to battery level
34. Battery Status API
35. Making transactions and authentification easy
36. <input 
 name="cardNumber" 
 id="cardNumber-CC" 
 type="text"
 autocomplete="cc-number"
 pattern=“[0-9]*"> iOS credit card scan & autocomplete
37. iOS credit card autofill
38. Google Pay API (W3C Payment API)
39. Payment Request API – support
40. Webauth - an API that allows for the use of biometric-based authentication, as well as smart cards and USB tokens, for authentication Fingerprint authentication
41. Web Authentication API – support
42. Bluetooth: connecting to objects and more…
44. 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.
45. https://www.youtube.com/watch?v=1LV1Fk5ZXwA
46. Enterprise iOT potential is HUGE Collecting and monitoring data monitoring, controlling connected objects, etc.
47. Web Bluetooth API support
48. Progressive Web Apps, building native like web apps and websites
49. Add to Home screen from browser menu
50. Favicon on Home screen
51. realfavicongenerator.net
53. Service Workers Manifest.json
54. Android Mini Footer Bar 1.
55. Add to Home screen dialog 2.
56. Application installation 3.
57. Launch icon on Home screen and App Drawer 4.
58. Display mode
 (in manifest file) "display": "browser" "display": “standalone"
59. Native like features on Android
60. Changing the color of the URL bar <meta name="theme-color" content="#db5945">
61. “theme_color": “#133742" A global theme color via the manifest.json
62. Automatic Splashscreen Automagically generated based on ๏ background_color ๏ theme_color ๏ Application Name ๏ App icon
63. So, why should I build a Progressive Web App?
64. Free from the stores diktat
65. Fast UI, better user experience in the browser
66. UI tip: avoid platform specific design Nope
67. Bringing the experience offline
68. Keeping user engaged with notifications
69. ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications Nope
70. Nope ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications
71. Nope ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications
72. Yeah, I just met you, And this is crazy, But here’s my request for permissions, So let me notify you maybe?
73. Ask for permissions in context What do I gain from letting you access this?
74. DO NOT DEMAND PERMISSIONS ON PAGE LOAD This is the slide you need to take a picture of
75. Give user control Please don’t spam me, let me choose!
76. Because you will only get one chance to ask for permissions! Asking users to reset permissions is a tedious task
77. Provide fallbacks Geolocation OR manual address
78. Letting (Android) users share the content from the PWA
79. Web Share (unofficial) API – support
80. PWAs are not only for Android Chrome users
81. Firefox gets a nice banner
 (but not real installation)
82. ๏ No notifications integrated in system ๏ No installation banner ๏ No parameter access ๏ Can only store 50Mb offline ๏ A few “glitches” iOS partially supports PWAs
83. We can install PWA as Chrome Desktop apps chrome://flags/#enable-desktop-pwas
84. ๏ 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
85. pwa.rocks
86. ๏ 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?
87. UX & UI Designer Mobile expert. Pixel & CSS Lover. stephaniewalter.design @WalterStephanie Attribution-NonCommercial-NoDerivs 3.0 France (CC BY-NC-ND 3.0 FR) inpx.it/tf2018-mobile