├── README.md └── images ├── arquick.jpg ├── banner.png ├── cmapi.png ├── ir.png ├── notification.png ├── payments.png ├── paymentsios.png ├── pip.png ├── reduce.png ├── theme.png ├── webshare1.png ├── webshare2.png └── with-media-session.png /README.md: -------------------------------------------------------------------------------- 1 | It's 2020, and browsers can do amazing stuff. 2 | 3 | This repo contains a non-exhaustive list of less-known features implemented in browsers **today**. 4 | 5 | This 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. 6 | 7 | In many cases, listed features aren't yet part of the standard, and may only be available on certain browsers or configurations. 8 | 9 | 10 | --- 11 | 12 | ## [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 13 | Many OSes provide light or dark color theme (notably dark mode on macOS). Websites can detect the preferred color scheme. 14 | 15 | --- 16 | 17 | ## [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) 18 | Similarly to dark mode, users in their OS can remove/reduce animations, we can also detect that. 19 | 20 | 21 | 22 | --- 23 | 24 | ## [Payment Request API](https://developers.google.com/web/fundamentals/payments) 25 | Process payments via native browser UI which will be autofilled with credit card, shipping info etc. 26 | 27 | 28 | 29 | 30 | --- 31 | 32 | ## [Web Share API](https://web.dev/web-share/) 33 | Delegate the share of URLs or files to the OS, providing share options based on the installed apps and user preference. 34 | 35 | 36 | 37 | 38 | --- 39 | 40 | ## [WebAudio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) 41 | A high level API to allow developers to create and process audio in the browser. 42 | 43 | --- 44 | 45 | ## [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) 46 | Browsers can register push notifications. Sending later, at any moment push notifications, those notifications can contain images, buttons and inline replies. 47 | 48 | 49 | 50 | --- 51 | 52 | ## [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers) 53 | Among other features, service workers can enable offline browsing and background tasking. 54 | 55 | Example: 56 | - Provide a fallback when internet isn't available. 57 | - 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. 58 | 59 | --- 60 | 61 | ## [Web/native app install banners](https://web.dev/customize-install/) 62 | Display a native banner to encourage users to add the app/website on the home or to install a native app. 63 | 64 | 65 | 66 | --- 67 | 68 | ## [Get Installed Related Apps API](https://web.dev/get-installed-related-apps/) 69 | Check if the native app related to your site is already installed. 70 | 71 | 72 | --- 73 | 74 | ## [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API) 75 | Allows to run VR/AR on the web. 76 | 77 | --- 78 | 79 | ## [Picture-in-Picture (PiP)](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture) 80 | Consent to play a video and detach it from the current page, staying sticky and always visible. 81 | 82 | 83 | 84 | --- 85 | 86 | ## [Media Session API](https://developers.google.com/web/updates/2017/02/media-session) 87 | Customize media notifications by providing metadata and actions. 88 | 89 | 90 | 91 | --- 92 | 93 | 94 | ## [Media Source Extensions (MSE)](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API) 95 | Create a rich streaming experience in the browser without any plugin by having full control of video and audio media stream. 96 | 97 | --- 98 | 99 | ## [Encrypted Media Extension (EME)](https://developer.mozilla.org/fr/docs/Web/API/Encrypted_Media_Extensions_API) 100 | A 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. 101 | 102 | --- 103 | 104 | ## [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) 105 | Enables 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. 106 | 107 | 108 | --- 109 | 110 | ## [Chrome Sender API](https://developers.google.com/cast/docs/developers) 111 | If chromecast is available, you can stream a video/audio to your TV/Chromecast enabled device. 112 | 113 | --- 114 | 115 | ## [AirPlay](https://developer.apple.com/documentation/webkitjs/adding_an_airplay_button_to_your_safari_media_controls) 116 | Consent to stream a media over AirPlay (like AppleTV). 117 | 118 | --- 119 | 120 | ## [Force Touch API](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html) 121 | With some Apple-specific hardware (like iPhone6S+ and Magic Trackpad) you can detect force pressure. 122 | 123 | --- 124 | 125 | ## [AR Quick Look](https://developer.apple.com/augmented-reality/quick-look/) 126 | On iOS you can display an `.usdz` 3D asset using a native AR UI: 127 | 128 | 129 | 130 | 131 | --- 132 | 133 | ## [GamePad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) 134 | Allows to use a physical gamepad. 135 | 136 | --- 137 | 138 | ## [WebUSB API](https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web) 139 | Allows to access and use peripherals connected via USB. 140 | 141 | --- 142 | 143 | ## [Web Bluetooth API](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web) 144 | Allows to access and use bluetooth devices. 145 | 146 | --- 147 | 148 | ## [Web Locks API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API) 149 | Prevents display sleep and enables wake lock. 150 | 151 | --- 152 | 153 | ## [Keyboard Lock](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/lock) 154 | While in fullscreen, allows to receive keys that are normally handled by the system or the browser like Cmd/Alt-Tab, or Esc. 155 | 156 | --- 157 | 158 | ## [Generic Sensor API](https://developers.google.com/web/updates/2017/09/sensors-for-the-web) 159 | Allows to use several sensors like Accelerometer, Gyroscope, AmbientLightSensor, and Magnetometer. 160 | 161 | --- 162 | 163 | ## [Credential Management API](https://developers.google.com/web/fundamentals/security/credential-management/) 164 | Enables 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. 165 | 166 | 167 | 168 | --- 169 | 170 | ## [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) 171 | Allows to read and write text and images into the OS clipboard buffer. 172 | 173 | --- 174 | 175 | ## [Presentation API](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API) 176 | Gives ability to access external presentation-type displays and use them for presenting web content. 177 | 178 | --- 179 | 180 | ## [Screen Orientation API](https://www.w3.org/TR/screen-orientation/) 181 | Reads and locks screen orientation. 182 | 183 | --- 184 | 185 | ## [getUserMedia camera selection](https://paul.kinlan.me/pixel-4xl-infrared-sensor-via-getusermedia/) 186 | Select 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). 187 | 188 | 189 | 190 | --- 191 | 192 | ## [Pointer Lock (Mouse Lock)](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) 193 | Gives 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. 194 | 195 | --- 196 | 197 | ## [Theme Color](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android) 198 | Customise tab color (Android only). 199 | 200 | 201 | 202 | --- 203 | 204 | ## [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API) 205 | Provides access to the vibration mechanism of the hosting device. 206 | 207 | --- 208 | 209 | ## [Web Coffee API](https://www.youtube.com/watch?v=dQw4w9WgXcQ) 210 | Use covfefe protocol to start coffee machines. 211 | 212 | --- 213 | 214 | ## [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API#Browser_compatibility) 215 | Allows access to see the battery level of the device's battery. 216 | 217 | --- 218 | 219 | ## [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) 220 | Provides an API to ask whether the current tab is visible or not. 221 | 222 | --- 223 | 224 | ## [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) 225 | Enables web developers to incorporate speech recognition and speech synthesis. 226 | 227 | --- 228 | 229 | ## [Contacts API](https://web.dev/contact-picker/) 230 | Provides native UI to select contacts from your OS and retrieve informations. 231 | 232 | --- 233 | 234 | # Stuff under Origin Trial 235 | 236 | ## [Native File System](https://web.dev/native-file-system/) 237 | Allows access to the file system. 238 | 239 | --- 240 | 241 | ## [Web OTP API](https://web.dev/web-otp/) 242 | Allows the site to read received SMS, for example for OTP and phone number validation. 243 | 244 | --- 245 | 246 | ## [Badging API](https://web.dev/badging-api/) 247 | Allows to set badge in OS in places like shelf or homescreen. 248 | 249 | --- 250 | 251 | ## [Web NFC](https://web.dev/nfc/) 252 | Provide sites the ability to read and write to NFC tags. 253 | 254 | --- 255 | 256 | -------------------------------------------------------------------------------- /images/arquick.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/arquick.jpg -------------------------------------------------------------------------------- /images/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/banner.png -------------------------------------------------------------------------------- /images/cmapi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/cmapi.png -------------------------------------------------------------------------------- /images/ir.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/ir.png -------------------------------------------------------------------------------- /images/notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/notification.png -------------------------------------------------------------------------------- /images/payments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/payments.png -------------------------------------------------------------------------------- /images/paymentsios.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/paymentsios.png -------------------------------------------------------------------------------- /images/pip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/pip.png -------------------------------------------------------------------------------- /images/reduce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/reduce.png -------------------------------------------------------------------------------- /images/theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/theme.png -------------------------------------------------------------------------------- /images/webshare1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/webshare1.png -------------------------------------------------------------------------------- /images/webshare2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/webshare2.png -------------------------------------------------------------------------------- /images/with-media-session.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luruke/browser-2020/b66908cd43c812987c434d3296e6b55f9bf27a3c/images/with-media-session.png --------------------------------------------------------------------------------