[
  {
    "path": "README.md",
    "content": "It's 2020, and browsers can do amazing stuff.  \n\nThis repo contains a non-exhaustive list of less-known features implemented in browsers **today**.\n\nThis list isn't intended for a technical audience; instead it wants to be a \"I didn't know we could do that in a browser!\" list.\n\nIn many cases, listed features aren't yet part of the standard, and may only be available on certain browsers or configurations.\n\n\n---\n\n## [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)\nMany OSes provide light or dark color theme (notably dark mode on macOS). Websites can detect the preferred color scheme.\n\n---\n\n## [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)\nSimilarly to dark mode, users in their OS can remove/reduce animations, we can also detect that.\n\n<img src=\"images/reduce.png\" width=\"800\"/>\n\n---\n\n## [Payment Request API](https://developers.google.com/web/fundamentals/payments)\nProcess payments via native browser UI which will be autofilled with credit card, shipping info etc.\n\n<img src=\"images/payments.png\" width=\"300\"/>\n<img src=\"images/paymentsios.png\" width=\"300\"/>\n\n---\n\n## [Web Share API](https://web.dev/web-share/)\nDelegate the share of URLs or files to the OS, providing share options based on the installed apps and user preference.\n\n<img src=\"images/webshare1.png\" width=\"600\"/>\n<img src=\"images/webshare2.png\" width=\"300\"/>\n\n---\n\n## [WebAudio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)  \nA high level API to allow developers to create and process audio in the browser.  \n\n---\n\n## [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)\nBrowsers can register push notifications. Sending later, at any moment push notifications, those notifications can contain images, buttons and inline replies.\n\n<img src=\"images/notification.png\" width=\"600\"/>\n\n---\n\n## [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers)\nAmong other features, service workers can enable offline browsing and background tasking.\n\nExample:\n- Provide a fallback when internet isn't available.\n- Submitting a form when internet connectivity isn't available, will result in data lost. A service worker can be used to save the data and submit it later when the internet connection is up again.\n\n---\n\n## [Web/native app install banners](https://web.dev/customize-install/)\nDisplay a native banner to encourage users to add the app/website on the home or to install a native app.\n\n<img src=\"images/banner.png\" width=\"300\"/>\n\n---\n\n## [Get Installed Related Apps API](https://web.dev/get-installed-related-apps/)\nCheck if the native app related to your site is already installed.\n\n\n---\n\n## [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)\nAllows to run VR/AR on the web.\n\n---\n\n## [Picture-in-Picture (PiP)](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)\nConsent to play a video and detach it from the current page, staying sticky and always visible.\n\n<img src=\"images/pip.png\" width=\"800\"/>\n\n---\n\n## [Media Session API](https://developers.google.com/web/updates/2017/02/media-session)\nCustomize media notifications by providing metadata and actions.\n\n<img src=\"images/with-media-session.png\" width=\"400\"/>\n\n---\n\n\n## [Media Source Extensions (MSE)](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API)\nCreate a rich streaming experience in the browser without any plugin by having full control of video and audio media stream.\n\n---\n\n## [Encrypted Media Extension (EME)](https://developer.mozilla.org/fr/docs/Web/API/Encrypted_Media_Extensions_API)\nA programming interface that allows playback of a video that is subject to a digital restrictions management scheme or more commonly know as digital right management.\n\n---\n\n## [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)\nEnables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary.\n\n\n---\n\n## [Chrome Sender API](https://developers.google.com/cast/docs/developers)\nIf chromecast is available, you can stream a video/audio to your TV/Chromecast enabled device.\n\n---\n\n## [AirPlay](https://developer.apple.com/documentation/webkitjs/adding_an_airplay_button_to_your_safari_media_controls)\nConsent to stream a media over AirPlay (like AppleTV).\n\n---\n\n## [Force Touch API](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html)\nWith some Apple-specific hardware (like iPhone6S+ and Magic Trackpad) you can detect force pressure.\n\n---\n\n## [AR Quick Look](https://developer.apple.com/augmented-reality/quick-look/)\nOn iOS you can display an `.usdz` 3D asset using a native AR UI:\n\n<img src=\"images/arquick.jpg\" width=\"400\"/>\n\n\n---\n\n## [GamePad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)\nAllows to use a physical gamepad.\n\n---\n\n## [WebUSB API](https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web)\nAllows to access and use peripherals connected via USB.\n\n---\n\n## [Web Bluetooth API](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web)\nAllows to access and use bluetooth devices.\n\n---\n\n## [Web Locks API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API)\nPrevents display sleep and enables wake lock.\n\n---\n\n## [Keyboard Lock](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/lock)\nWhile in fullscreen, allows to receive keys that are normally handled by the system or the browser like Cmd/Alt-Tab, or Esc.\n\n---\n\n## [Generic Sensor API](https://developers.google.com/web/updates/2017/09/sensors-for-the-web)\nAllows to use several sensors like Accelerometer, Gyroscope, AmbientLightSensor, and Magnetometer.\n\n---\n\n## [Credential Management API](https://developers.google.com/web/fundamentals/security/credential-management/)\nEnables to store and retrieve password credentials, it elso enables tap to sign in and automatic sign back, password sharing on multiple device and many more.\n\n<img src=\"images/cmapi.png\" width=\"444\"/>\n\n---\n\n## [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)\nAllows to read and write text and images into the OS clipboard buffer.\n\n---\n\n## [Presentation API](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API)\nGives ability to access external presentation-type displays and use them for presenting web content.\n\n---\n\n## [Screen Orientation API](https://www.w3.org/TR/screen-orientation/)\nReads and locks screen orientation.\n\n---\n\n## [getUserMedia camera selection](https://paul.kinlan.me/pixel-4xl-infrared-sensor-via-getusermedia/)\nSelect the input source when using camera/microphone (e.g front or back camera). On the Pixel 4XL we can even access the infrared camera (e.g for face detection).\n\n<img src=\"images/ir.png\" width=\"300\"/>\n\n---\n\n## [Pointer Lock (Mouse Lock)](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)\nGives access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits of how far mouse movement can go in a single direction, and removes the cursor from view. Obvious use cases are for first person or real time strategy games.\n\n---\n\n## [Theme Color](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)\nCustomise tab color (Android only).\n\n<img src=\"images/theme.png\" width=\"300\"/>\n\n---\n\n## [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)\nProvides access to the vibration mechanism of the hosting device.\n\n---\n\n## [Web Coffee API](https://www.youtube.com/watch?v=dQw4w9WgXcQ)\nUse covfefe protocol to start coffee machines.\n\n---\n\n## [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API#Browser_compatibility)\nAllows access to see the battery level of the device's battery.\n\n---\n\n## [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)\nProvides an API to ask whether the current tab is visible or not.\n\n---\n\n## [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)\nEnables web developers to incorporate speech recognition and speech synthesis.\n\n---\n\n## [Contacts API](https://web.dev/contact-picker/)\nProvides native UI to select contacts from your OS and retrieve informations.\n\n---\n\n# Stuff under Origin Trial\n\n## [Native File System](https://web.dev/native-file-system/)\nAllows access to the file system.\n\n---\n\n## [Web OTP API](https://web.dev/web-otp/)\nAllows the site to read received SMS, for example for OTP and phone number validation.\n\n---\n\n## [Badging API](https://web.dev/badging-api/)\nAllows to set badge in OS in places like shelf or homescreen.\n\n---\n\n## [Web NFC](https://web.dev/nfc/)\nProvide sites the ability to read and write to NFC tags.\n\n---\n\n"
  }
]