Pro Yearly is on sale from $80 to $50! »

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

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!

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

June 30, 2020
Tweet

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