There is an app, NO, a web API for that!

"There's an app for that" used to be Apple’s catchphrase. For a really long time, mobile browsers' capabilities were really limited, and native applications were the norm. But times have changed!

There are a lot of features you can now use to enhance users’ experience in mobile browsers. Did you know you could push notifications and provide offline content for responsive websites? That you could access media, camera or voice recorder and could build an online video audio chat directly in the mobile browser, use AR, etc.? And that’s just a small sneak peak at what is possible.

Responsive design, just adapting your layout to make the site fit smaller screens is not enough anymore. Let’s unleash the capabilities of mobile browsers to create a truly mobile optimized experience. Let’s bring your website almost to the level of a native app experience!

Transcript

1. Stephanie Walter - 2020 There is a mobile a app, NO, a web API for that.
2. UX & Product Designer Mobile expert. Pixel & CSS Lover stephaniewalter.design @WalterStephanie
3. Why do you build a native app?
4. What are mobile browsers capable of today?
5. Accessing, capturing and streaming medias
6. <input type="file" accept="image/*"> Access phone’s photos (gallery)
7. <input type="file" accept="video/*"> Access phone’s videos (gallery)
8. <input type="file" capture accept="image/*"> Capture image / videos directly <input type="file" capture accept=“video/*">
9. Instagram directly in the browser? Yes please!
10. Video + audio chat in the browser Stéphanie Walter - 2019 ๏ appr.tc
11. WebRTC API + getUserMedia/ MediaStream API Opens a direct real time communication channel between two clients. You can share sound, video and any other data.
12. WebRTC and getUserMedia/Stream API
13. Tuner in the browser tuner.ninja
14. Custom media notifications with MediaSession API ๏ customise notification artwork and data, ๏ seek and change track, ๏ hardware support (keys, headset), ๏ still plays when phone is locked. Specifications
15. MediaSession API (Editor’s Draft)
16. Talking to your browser: Web Speech API demo
17. Web Speech API
18. Augmented Reality with Apple’s ARKit 3 and Android’s ARCore Native Source
19. Apple’s AR Quick Look can be embedded in websites (Safari) Source
20. Android brings AR to Chrome with ARCore + WebXR technology
21. Accessing device position and sensors
22. Geolocation API Demand geolocation access in context, NOT on pageload!!!
23. Geolocation API
24. Provide fallbacks Geolocation OR manual address
25. Use geolocation wisely Geolocation to auto-format phone prefixes is NOT a good idea
26. From video games to watching the stars: apps can use gyroscope and accelerometer Native
27. Gyroscope API and Accelerometer API are also available on the web + full screen API for the fullscreen in the demo paperplanes.world Web
28. Gyroscope Accelerometer Chrome Chrome
29. Prevent screen from dimming or locking with Screen Wake Lock API (unofficial Chrome spec)
30. The responsive cooking blog example
31. Adapt the content and design to ambient light with AmbientLightSensor API Light it up demo
32. AmbientLightSensor API Chrome
33. Dark and Light mode based on user preference @media (prefers-color-scheme: light){ // light mode } @media (prefers-color-scheme: dark) { // dark mode }

34. Switching to “dark mode” when there’s less light in the room with light-level @media (light-level: dim | normal | washed) { // adaptation } (CSS level 5 media query no support yet)
35. Seamless experience in every network conditions
36. Offline access anywhere, anytime thanks to Service Workers + Cache API. The disconnect
37. Service Workers intercept the request & provide cached files Specifications
38. Bringing the experience offline Stéphanie Walter - 2019
39. Periodically synchronise data in the background with Background Sync API (initial draft)
40. The Network Information API provides information about the connection a device is using Specifications
41. Network Information API
42. Let’s offer less battery consuming resources when the battery is low! Adapting the content to battery level with Battery Status API
43. Battery Status API
44. (Re)Engaging Users
45. Dial the phone number <a href="tel:0388230271">
46. Launch from home screen: remember the favicon?
47. Add to Home screen from browser menu Stéphanie Walter - 2019
48. realfavicongenerator.net Tool
49. Badges on app icons for notifications are also coming to the web with Badging API (origin trial in Chrome 73+ desktop)
50. Letting users share the web content with Web Share API
51. Web Share API
52. Contact Picker API - Share contact from contact list Stéphanie Walter - 2019 Does NOT give access to whole contact book, users have to pick
53. Web Push notifications integrated in the operating system Stéphanie Walter - 2019
54. Push API + Service Workers Service Worker Push service
55. Push API Service Workers
56. ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications Nope
57. ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications Nein!
58. ๏ Need good timing ๏ Are actionable ๏ Are personal Good Notifications Still no
59. Asking for permissions without annoying your users
60. Yeah, I just met you, And this is crazy, But here’s my request for permissions, So let me notify you maybe?
61. Ask for permissions in context What do I gain from letting you access this?
62. On web you will only get one chance to ask for permissions! Asking users to reset permissions is a tedious task
63. In native you can ask again later but user needs to go in parameters
64. The “double permission pattern” 1 2
65. DO NOT DEMAND PERMISSIONS ON PAGE LOAD / FIRST LAUNCH
66. Give user control Please don’t spam me, let me choose!
67. This is true for any type of permissions (push, media, geolocation, etc.)
68. Making transactions and authentication easy
69. <input 
 name="cardNumber" 
 id="cardNumber-CC" 
 type="text"
 autocomplete="cc-number"
 pattern=“[0-9]*"> iOS credit card scan & autocomplete Stack overflow thread to “guess” this
70. The Payment Request API allows merchants to easily collect payment information with minimal integration. paymentrequest.show
71. > iOS 10: Apple Pay on WebViews with Apple Pay JS + Payment Request API
72. Payment Request API
73. Web Authentication API - an API that allows for the use of biometric-based authentication, as well as smart cards and USB tokens, for authentication webauthn.guide
74. Web Authentication API Safari 13.3
75. Login with Google account (same on iOS with Apple account) Web Native
76. Connecting to objects, external sources and more…
77. Source
78. Pairing the browser with a monitor for heart beats with Bluetooth API for the web Source
79. Interact with NFC tags and devices with Web NFC API (unofficial draft)
80. From collecting and monitoring data monitoring to controlling connected objects, etc. Enterprise iOT potential is HUGE
81. Web Bluetooth API
82. Not there’s also WebUSB API This will be more useful for tablet than mobile I think (unofficial draft supported on Android Chrome)
83. Progressive Web Apps, building native like web apps and websites
84. W3C Web App Manifest Un fichier manifest.json qui va nous permettre de déclarer notre site comme une web app. Stéphanie Walter - 2019 Service Workers Manifest.json
85. PWAs (Progressive Web Apps) are just websites that are progressively enhanced to function like native apps on supporting platforms
86. PWA demo time!
87. Launch icon on Home screen and App Drawer
88. Display mode browser or fullscreen (in manifest file) "display": "browser" "display": “standalone"
89. It behaves like a native app
90. Changing the color of the URL bar <meta name="theme-color" content="#db5945">
91. “theme_color": “#133742" A global theme color via the manifest.json
92. Automatic Splashscreen Automagically generated based on: ๏ background_color ๏ theme_color ๏ Application Name ๏ App icon
93. So, why should I build a Progressive Web App?
94. It’s “just” a responsive site with some extra features
95. The web frees you from the stores diktat
96. Fast UI, better user experience in the browser
97. Harness to power of web browsers to reduce cost multiplication ๏ No more specific development for each operating system ๏ No Maintenance and updates of several apps
98. Access to Notifications, geolocation, offline support, and all the other cool APIs and features I presented you earlier
99. PWAs are not only for Android Chrome users
100. We can install PWA as Chrome Desktop apps
101. Firefox gets a nice + icon and banner
102. ๏ They work on Edge (Win 10) desktop ๏ You can submit them to Microsoft Store and they will appear alongside native apps. Microsoft PWA
103. You will be able to publish them on Google Play Store Source
104. ๏ No Push (yet? Still not yet in ๏ No App installation banner or API ๏ PWAs will not be available in the Apple store iOS partially supports PWAs Source
105. ๏ Apple Pay is now available in the PWAs ๏ PWAs run in the background iOS partially supports PWAs Source
106. Apple will not implement some of those APIs (#WWDC20)
107. Quick Actions Only native
108. Widgets Only native
109. Performance ๏ Native apps download a lot of assets on user’s phone so they feel fast when they load ๏ Native apps can use GPU acceleration (for video games for example) so they still feel a lot faster most of the time than websites
110. And more ๏ Caching LARGE files is still complicated (because the cache size is limited) ๏ Customisation of certain native UI (gallery, HTML5 date picker, etc.) ๏ Specific protocol supports (SSH, FTP, etc.) ๏ SMS, Alarm clock
111. So, there’s an App API for that?
112. UX & Product Designer Mobile expert. Pixel & CSS Lover stephaniewalter.design @WalterStephanie