{"id":13395179,"url":"https://github.com/luruke/browser-2020","last_synced_at":"2025-05-14T09:08:51.474Z","repository":{"id":39121293,"uuid":"230881127","full_name":"luruke/browser-2020","owner":"luruke","description":"Things you can do with a browser in 2020 ☕️","archived":false,"fork":false,"pushed_at":"2021-10-28T13:56:07.000Z","size":2343,"stargazers_count":8033,"open_issues_count":11,"forks_count":201,"subscribers_count":179,"default_branch":"master","last_synced_at":"2025-04-05T20:12:00.735Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luruke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-30T08:48:54.000Z","updated_at":"2025-03-29T14:58:40.000Z","dependencies_parsed_at":"2022-08-09T10:37:08.697Z","dependency_job_id":null,"html_url":"https://github.com/luruke/browser-2020","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luruke%2Fbrowser-2020","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luruke%2Fbrowser-2020/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luruke%2Fbrowser-2020/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luruke%2Fbrowser-2020/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luruke","download_url":"https://codeload.github.com/luruke/browser-2020/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631788,"owners_count":21136568,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:45.250Z","updated_at":"2025-04-12T21:18:48.086Z","avatar_url":"https://github.com/luruke.png","language":null,"readme":"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\u003cimg src=\"images/reduce.png\" width=\"800\"/\u003e\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\u003cimg src=\"images/payments.png\" width=\"300\"/\u003e\n\u003cimg src=\"images/paymentsios.png\" width=\"300\"/\u003e\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\u003cimg src=\"images/webshare1.png\" width=\"600\"/\u003e\n\u003cimg src=\"images/webshare2.png\" width=\"300\"/\u003e\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\u003cimg src=\"images/notification.png\" width=\"600\"/\u003e\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\u003cimg src=\"images/banner.png\" width=\"300\"/\u003e\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\u003cimg src=\"images/pip.png\" width=\"800\"/\u003e\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\u003cimg src=\"images/with-media-session.png\" width=\"400\"/\u003e\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\u003cimg src=\"images/arquick.jpg\" width=\"400\"/\u003e\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\u003cimg src=\"images/cmapi.png\" width=\"444\"/\u003e\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\u003cimg src=\"images/ir.png\" width=\"300\"/\u003e\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\u003cimg src=\"images/theme.png\" width=\"300\"/\u003e\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","funding_links":[],"categories":["Others","Uncategorized","miscellaneous"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluruke%2Fbrowser-2020","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluruke%2Fbrowser-2020","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluruke%2Fbrowser-2020/lists"}