Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luruke/browser-2020
Things you can do with a browser in 2020 ☕️
https://github.com/luruke/browser-2020
Last synced: about 1 month ago
JSON representation
Things you can do with a browser in 2020 ☕️
- Host: GitHub
- URL: https://github.com/luruke/browser-2020
- Owner: luruke
- Created: 2019-12-30T08:48:54.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-10-28T13:56:07.000Z (about 3 years ago)
- Last Synced: 2024-10-16T18:49:22.033Z (about 2 months ago)
- Homepage:
- Size: 2.23 MB
- Stars: 8,052
- Watchers: 181
- Forks: 202
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- my-awesome-list - browser-2020
- awesome - luruke/browser-2020 - Things you can do with a browser in 2020 ☕️ (Others)
- awesome-github-repos - luruke/browser-2020 - Things you can do with a browser in 2020 ☕️ (Others)
- awesome-github-star - browser-2020
- awesome-starts - luruke/browser-2020 - Things you can do with a browser in 2020 ☕️ (Others)
- awesome-list - browser-2020
- awesome-web-dev-resources - browser-2020
- jimsghstars - luruke/browser-2020 - Things you can do with a browser in 2020 ☕️ (Others)
README
It's 2020, and browsers can do amazing stuff.
This repo contains a non-exhaustive list of less-known features implemented in browsers **today**.
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.
In many cases, listed features aren't yet part of the standard, and may only be available on certain browsers or configurations.
---
## [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
Many OSes provide light or dark color theme (notably dark mode on macOS). Websites can detect the preferred color scheme.---
## [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
Similarly to dark mode, users in their OS can remove/reduce animations, we can also detect that.---
## [Payment Request API](https://developers.google.com/web/fundamentals/payments)
Process payments via native browser UI which will be autofilled with credit card, shipping info etc.
---
## [Web Share API](https://web.dev/web-share/)
Delegate the share of URLs or files to the OS, providing share options based on the installed apps and user preference.
---
## [WebAudio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
A high level API to allow developers to create and process audio in the browser.---
## [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
Browsers can register push notifications. Sending later, at any moment push notifications, those notifications can contain images, buttons and inline replies.---
## [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers)
Among other features, service workers can enable offline browsing and background tasking.Example:
- Provide a fallback when internet isn't available.
- 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.---
## [Web/native app install banners](https://web.dev/customize-install/)
Display a native banner to encourage users to add the app/website on the home or to install a native app.---
## [Get Installed Related Apps API](https://web.dev/get-installed-related-apps/)
Check if the native app related to your site is already installed.---
## [WebXR](https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API)
Allows to run VR/AR on the web.---
## [Picture-in-Picture (PiP)](https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture)
Consent to play a video and detach it from the current page, staying sticky and always visible.---
## [Media Session API](https://developers.google.com/web/updates/2017/02/media-session)
Customize media notifications by providing metadata and actions.---
## [Media Source Extensions (MSE)](https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API)
Create a rich streaming experience in the browser without any plugin by having full control of video and audio media stream.---
## [Encrypted Media Extension (EME)](https://developer.mozilla.org/fr/docs/Web/API/Encrypted_Media_Extensions_API)
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.---
## [WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)
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.---
## [Chrome Sender API](https://developers.google.com/cast/docs/developers)
If chromecast is available, you can stream a video/audio to your TV/Chromecast enabled device.---
## [AirPlay](https://developer.apple.com/documentation/webkitjs/adding_an_airplay_button_to_your_safari_media_controls)
Consent to stream a media over AirPlay (like AppleTV).---
## [Force Touch API](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html)
With some Apple-specific hardware (like iPhone6S+ and Magic Trackpad) you can detect force pressure.---
## [AR Quick Look](https://developer.apple.com/augmented-reality/quick-look/)
On iOS you can display an `.usdz` 3D asset using a native AR UI:---
## [GamePad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)
Allows to use a physical gamepad.---
## [WebUSB API](https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web)
Allows to access and use peripherals connected via USB.---
## [Web Bluetooth API](https://developers.google.com/web/updates/2015/07/interact-with-ble-devices-on-the-web)
Allows to access and use bluetooth devices.---
## [Web Locks API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API)
Prevents display sleep and enables wake lock.---
## [Keyboard Lock](https://developer.mozilla.org/en-US/docs/Web/API/Keyboard/lock)
While in fullscreen, allows to receive keys that are normally handled by the system or the browser like Cmd/Alt-Tab, or Esc.---
## [Generic Sensor API](https://developers.google.com/web/updates/2017/09/sensors-for-the-web)
Allows to use several sensors like Accelerometer, Gyroscope, AmbientLightSensor, and Magnetometer.---
## [Credential Management API](https://developers.google.com/web/fundamentals/security/credential-management/)
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.---
## [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
Allows to read and write text and images into the OS clipboard buffer.---
## [Presentation API](https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API)
Gives ability to access external presentation-type displays and use them for presenting web content.---
## [Screen Orientation API](https://www.w3.org/TR/screen-orientation/)
Reads and locks screen orientation.---
## [getUserMedia camera selection](https://paul.kinlan.me/pixel-4xl-infrared-sensor-via-getusermedia/)
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).---
## [Pointer Lock (Mouse Lock)](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
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.---
## [Theme Color](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)
Customise tab color (Android only).---
## [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)
Provides access to the vibration mechanism of the hosting device.---
## [Web Coffee API](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
Use covfefe protocol to start coffee machines.---
## [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API#Browser_compatibility)
Allows access to see the battery level of the device's battery.---
## [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API)
Provides an API to ask whether the current tab is visible or not.---
## [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
Enables web developers to incorporate speech recognition and speech synthesis.---
## [Contacts API](https://web.dev/contact-picker/)
Provides native UI to select contacts from your OS and retrieve informations.---
# Stuff under Origin Trial
## [Native File System](https://web.dev/native-file-system/)
Allows access to the file system.---
## [Web OTP API](https://web.dev/web-otp/)
Allows the site to read received SMS, for example for OTP and phone number validation.---
## [Badging API](https://web.dev/badging-api/)
Allows to set badge in OS in places like shelf or homescreen.---
## [Web NFC](https://web.dev/nfc/)
Provide sites the ability to read and write to NFC tags.---