• Stars
    star
    8,066
  • Rank 4,582 (Top 0.1 %)
  • Language
  • Created almost 5 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Things you can do with a browser in 2020 ☕️

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

Many OSes provide light or dark color theme (notably dark mode on macOS). Websites can detect the preferred color scheme.


prefers-reduced-motion

Similarly to dark mode, users in their OS can remove/reduce animations, we can also detect that.


Payment Request API

Process payments via native browser UI which will be autofilled with credit card, shipping info etc.


Web Share API

Delegate the share of URLs or files to the OS, providing share options based on the installed apps and user preference.


WebAudio API

A high level API to allow developers to create and process audio in the browser.


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

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

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

Check if the native app related to your site is already installed.


WebXR

Allows to run VR/AR on the web.


Picture-in-Picture (PiP)

Consent to play a video and detach it from the current page, staying sticky and always visible.


Media Session API

Customize media notifications by providing metadata and actions.


Media Source Extensions (MSE)

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)

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

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

If chromecast is available, you can stream a video/audio to your TV/Chromecast enabled device.


AirPlay

Consent to stream a media over AirPlay (like AppleTV).


Force Touch API

With some Apple-specific hardware (like iPhone6S+ and Magic Trackpad) you can detect force pressure.


AR Quick Look

On iOS you can display an .usdz 3D asset using a native AR UI:


GamePad API

Allows to use a physical gamepad.


WebUSB API

Allows to access and use peripherals connected via USB.


Web Bluetooth API

Allows to access and use bluetooth devices.


Web Locks API

Prevents display sleep and enables wake lock.


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

Allows to use several sensors like Accelerometer, Gyroscope, AmbientLightSensor, and Magnetometer.


Credential Management API

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

Allows to read and write text and images into the OS clipboard buffer.


Presentation API

Gives ability to access external presentation-type displays and use them for presenting web content.


Screen Orientation API

Reads and locks screen orientation.


getUserMedia camera selection

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)

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

Customise tab color (Android only).


Vibration API

Provides access to the vibration mechanism of the hosting device.


Web Coffee API

Use covfefe protocol to start coffee machines.


Battery Status API

Allows access to see the battery level of the device's battery.


Page Visibility API

Provides an API to ask whether the current tab is visible or not.


Web Speech API

Enables web developers to incorporate speech recognition and speech synthesis.


Contacts API

Provides native UI to select contacts from your OS and retrieve informations.


Stuff under Origin Trial

Native File System

Allows access to the file system.


Web OTP API

Allows the site to read received SMS, for example for OTP and phone number validation.


Badging API

Allows to set badge in OS in places like shelf or homescreen.


Web NFC

Provide sites the ability to read and write to NFC tags.


More Repositories

1

awesome-casestudy

📕 Curated list of technical case studies on WebGL and creative development
2,556
star
2

aladino

🧞‍♂️ Your magic WebGL carpet
JavaScript
843
star
3

magicshader

🔮 Tiny helper for three.js to debug and write shaders
JavaScript
239
star
4

human-gpu

🤖 Hello human, I'm sick to be your GPU!!
JavaScript
177
star
5

antipasto

🍽 Juicy starter for three.js
JavaScript
162
star
6

bidello

👨‍🏫 Don't leave your Class alone
JavaScript
56
star
7

clip-rect

✂️ - clip-rect is an helper to create painless `clip: rect()` animations with GSAP.
JavaScript
42
star
8

gl-backend

🚪 POC Detect WebGL rendering backend
JavaScript
33
star
9

adapttext.js

🙌 - AdaptText.js is a dependency free and simple javascript solution capable to fit your text inside the parent element
JavaScript
28
star
10

corrente

evening jelly experiment in WebGL
JavaScript
22
star
11

split-in-lines

Take an HTML element with text, and split it in lines.
JavaScript
18
star
12

tubbbo

〰A little WebGL experiment
JavaScript
17
star
13

appear-animation

Easily add animation when elements comes in the viewport.
JavaScript
11
star
14

dev-excuses-chrome

Chrome, please, gimme an excuse! - A little chrome extension that allow you to easily fetch an excuse from https://api.githunt.io/programmingexcuses and paste it in your current textarea/input field.
JavaScript
9
star
15

monolith

ddd-2018 devx experiment
HTML
6
star
16

three-emoji

emh...emoji!!
HTML
4
star
17

selfielapse

Simple desktop app that take a snapshot a day from your webcam.
JavaScript
4
star
18

totodile

A wild DOMElement appears!
JavaScript
3
star
19

infinite-runner-code-golf

A little exercise in 510byte.
HTML
3
star
20

luruke.com

Personal site
HTML
2
star
21

three.js

JavaScript 3D library.
JavaScript
2
star
22

fastnavigation

a proof of concept for a fast navigation PJAX+localstorage+intent
HTML
1
star
23

hasshhh

Generate number starting from a string seed
JavaScript
1
star
24

vooautoconnect

Keep the connection up using VOO_HOMESPOT wifi
Shell
1
star
25

foglio

HTML
1
star
26

test-babylon-export-gltf

HTML
1
star
27

intl-localematcher

JavaScript
1
star
28

arcoreval

JavaScript
1
star