Необычные браузерные API

Необычные браузерные API

Саша Шинкевич (@neesoglasnaja)

Gravity Falls © Disney

Кто я?

Что же такое эти ваши «браузерные API»?

В браузере есть только...

Браузерные API

Web APIs | MDN

Манипуляции DOM и стилями

Как узнать, что пользователь «зумил» страницу?

Simple browser zoom detect with jquery #codevember
Visual vs. Layout Viewport Demo

VisualViewport API

VisualViewport = {
  // Read-only
  offsetLeft
  offsetTop
  pageLeft
  pageTop
  width  
  height
  scale
}
 
// Как получить значение зума*
const scale = VisualViewport.scale
Example with hide on zoom
Caniuse — VisualViewport API

Манипуляции DOM и стилями

DOM
CSS Counter Styles
CSS Font Loading API
CSS Painting API
CSS Typed OM
CSSOM
HTML Drag and Drop API
Intersection Observer API
Page Visibility API
Pointer events
Pointer Lock API
Resize Observer API
Touch events
Visual Viewport API

Манипуляции DOM и стилями

DOM
CSS Counter Styles
CSS Font Loading API
CSS Painting API
CSS Typed OM
CSSOM
HTML Drag and Drop API
Intersection Observer API
Page Visibility API
Pointer events
Pointer Lock API
Resize Observer API
Touch events
Visual Viewport API

Манипуляции DOM и стилями

DOM
CSS Counter Styles
CSS Font Loading API
CSS Painting API
CSS Typed OM
CSSOM
HTML Drag and Drop API
Intersection Observer API
Page Visibility API
Pointer events
Pointer Lock API
Resize Observer API
Touch events
Visual Viewport API

Манипуляции DOM и стилями

DOM
CSS Counter Styles
CSS Font Loading API
CSS Painting API
CSS Typed OM
CSSOM
HTML Drag and Drop API
Intersection Observer API
Page Visibility API
Pointer events
Pointer Lock API
Resize Observer API
Touch events
Visual Viewport API

Манипуляции DOM и стилями

DOM
CSS Counter Styles
CSS Font Loading API
CSS Painting API
CSS Typed OM
CSSOM
HTML Drag and Drop API
Intersection Observer API
Page Visibility API
Pointer events
Pointer Lock API
Resize Observer API
Touch events
Visual Viewport API

Манипуляции DOM и стилями

DOM
CSS Counter Styles
CSS Font Loading API
CSS Painting API
CSS Typed OM
CSSOM
HTML Drag and Drop API
Intersection Observer API
Page Visibility API
Pointer events
Pointer Lock API
Resize Observer API
Touch events
Visual Viewport API

Передача данных и состояние сети

Как общаться между вкладками, не используя сеть?

Broadcast Channel API

Demo - BroadcastChannel

Broadcast Channel API

const bc = new BroadcastChannel('test_channel')
bc.postMessage('This is a test message.')
bc.onmessage = function (ev) { ... }
bc.close();
Caniuse — BroadcastChannel

Передача данных и состояние сети

Background Fetch API
Beacon API
Broadcast Channel API
Content Index API
Channel Messaging API
Fetch API
History API
Network Information API
Service Worker API
Server-sent events
Streams API
Web Periodic Background Synchronization API
URL API
WebSockets
XMLHttpRequest

Передача данных и состояние сети

Background Fetch API
Beacon API
Broadcast Channel API
Content Index API
Channel Messaging API
Fetch API
History API
Network Information API
Service Worker API
Server-sent events
Streams API
Web Periodic Background Synchronization API
URL API
WebSockets
XMLHttpRequest

Передача данных и состояние сети

Background Fetch API
Beacon API
Broadcast Channel API
Content Index API
Channel Messaging API
Fetch API
History API
Network Information API
Service Worker API
Server-sent events
Streams API
Web Periodic Background Synchronization API
URL API
WebSockets
XMLHttpRequest

Передача данных и состояние сети

Background Fetch API
Beacon API
Broadcast Channel API
Content Index API
Channel Messaging API
Fetch API
History API
Network Information API
Service Worker API
Server-sent events
Streams API
Web Periodic Background Synchronization API
URL API
WebSockets
XMLHttpRequest

Передача данных и состояние сети

Background Fetch API
Beacon API
Broadcast Channel API
Content Index API
Channel Messaging API
Fetch API
History API
Network Information API
Service Worker API
Server-sent events
Streams API
Web Periodic Background Synchronization API
URL API
WebSockets
XMLHttpRequest

Передача данных и состояние сети

Background Fetch API
Beacon API
Broadcast Channel API
Content Index API
Channel Messaging API
Fetch API
History API
Network Information API
Service Worker API
Server-sent events
Streams API
Web Periodic Background Synchronization API
URL API
WebSockets
XMLHttpRequest

Графика и медиа

Можно ли распознать QR‑код из браузера?

Считываем код телефоном

Barcode Detection Using the Shape Detection API

Barcode Detection API

const barcodeDetector = new BarcodeDetector();
 barcodeDetector.detect(image)
  .then(barcodes => { ... })
  .catch(e => { ... });
Caniuse — BarcodeDetector API

Графика и медиа

Barcode Detection API
Canvas API
Encrypted Media Extensions API
Fullscreen API
Media Capabilities API
Media Session API
Media Source API
Media Stream
MediaStream Recording API
MediaStream Image Capture API
Picture-in-Picture API
Presentation API
Screen Capture API
Screen Wake Lock API
Web Animations API
Web Audio API
WebGL
WebRTC API
Web Speech API
Web Video Text Tracks Format
WebVR API WebXR Device API

Графика и медиа

Barcode Detection API
Canvas API
Encrypted Media Extensions API
Fullscreen API
Media Capabilities API
Media Session API
Media Source API
Media Stream
MediaStream Recording API
MediaStream Image Capture API
Picture-in-Picture API
Presentation API
Screen Capture API
Screen Wake Lock API
Web Animations API
Web Audio API
WebGL
WebRTC API
Web Speech API
Web Video Text Tracks Format
WebVR API WebXR Device API

Графика и медиа

Barcode Detection API
Canvas API
Encrypted Media Extensions API
Fullscreen API
Media Capabilities API
Media Session API
Media Source API
Media Stream
MediaStream Recording API
MediaStream Image Capture API
Picture-in-Picture API
Presentation API
Screen Capture API
Screen Wake Lock API
Web Animations API
Web Audio API
WebGL
WebRTC API
Web Speech API
Web Video Text Tracks Format
WebVR API WebXR Device API

Графика и медиа

Barcode Detection API
Canvas API
Encrypted Media Extensions API
Fullscreen API
Media Capabilities API
Media Session API
Media Source API
Media Stream
MediaStream Recording API
MediaStream Image Capture API
Picture-in-Picture API
Presentation API
Screen Capture API
Screen Wake Lock API
Web Animations API
Web Audio API
WebGL
WebRTC API
Web Speech API
Web Video Text Tracks Format
WebVR API WebXR Device API

Графика и медиа

Barcode Detection API
Canvas API
Encrypted Media Extensions API
Fullscreen API
Media Capabilities API
Media Session API
Media Source API
Media Stream
MediaStream Recording API
MediaStream Image Capture API
Picture-in-Picture API
Presentation API
Screen Capture API
Screen Wake Lock API
Web Animations API
Web Audio API
WebGL
WebRTC API
Web Speech API
Web Video Text Tracks Format
WebVR API WebXR Device API

Графика и медиа

Barcode Detection API
Canvas API
Encrypted Media Extensions API
Fullscreen API
Media Capabilities API
Media Session API
Media Source API
Media Stream
MediaStream Recording API
MediaStream Image Capture API
Picture-in-Picture API
Presentation API
Screen Capture API
Screen Wake Lock API
Web Animations API
Web Audio API
WebGL
WebRTC API
Web Speech API
Web Video Text Tracks Format
WebVR API WebXR Device API

Графика и медиа

Barcode Detection API
Canvas API
Encrypted Media Extensions API
Fullscreen API
Media Capabilities API
Media Session API
Media Source API
Media Stream
MediaStream Recording API
MediaStream Image Capture API
Picture-in-Picture API
Presentation API
Screen Capture API
Screen Wake Lock API
Web Animations API
Web Audio API
WebGL
WebRTC API
Web Speech API
Web Video Text Tracks Format
WebVR API WebXR Device API

Графика и медиа

Barcode Detection API
Canvas API
Encrypted Media Extensions API
Fullscreen API
Media Capabilities API
Media Session API
Media Source API
Media Stream
MediaStream Recording API
MediaStream Image Capture API
Picture-in-Picture API
Presentation API
Screen Capture API
Screen Wake Lock API
Web Animations API
Web Audio API
WebGL
WebRTC API
Web Speech API
Web Video Text Tracks Format
WebVR API WebXR Device API

Управление устройствами

Я и ИоТ, Вадим Макеев (Youtube)
George Mandis — Make More Than Music with Tiny Computers, JavaScript and MIDI (Youtube)

Как заставить телефон делать «вж‑вж‑вж‑вж»?

Бросим кубики

Vibration API

if ("vibrate" in navigator) {
  ...
  navigator.vibrate(200) // одиночная вибрация
  navigator.vibrate([100,30,100,30,...]) // последовательность
  ...
}
Caniuse — Vibration API

Управление устройствами

Clipboard API
Gamepad API
Geolocation API
Notifications API
Permissions API
Push API
Battery Status API Proximity Events
Sensor APIs
Vibration API
Web Bluetooth API
WebHID API
Web MIDI API

Управление устройствами

Clipboard API
Gamepad API
Geolocation API
Notifications API
Permissions API
Push API
Battery Status API Proximity Events
Sensor APIs
Vibration API
Web Bluetooth API
WebHID API
Web MIDI API

Управление устройствами

Clipboard API
Gamepad API
Geolocation API
Notifications API
Permissions API
Push API
Battery Status API Proximity Events
Sensor APIs
Vibration API
Web Bluetooth API
WebHID API
Web MIDI API

Управление устройствами

Clipboard API
Gamepad API
Geolocation API
Notifications API
Permissions API
Push API
Battery Status API Proximity Events
Sensor APIs
Vibration API
Web Bluetooth API
WebHID API
Web MIDI API

Управление устройствами

Clipboard API
Gamepad API
Geolocation API
Notifications API
Permissions API
Push API
Battery Status API Proximity Events
Sensor APIs
Vibration API
Web Bluetooth API
WebHID API
Web MIDI API

Управление устройствами

Clipboard API
Gamepad API
Geolocation API
Notifications API
Permissions API
Push API
Battery Status API Proximity Events
Sensor APIs
Vibration API
Web Bluetooth API
WebHID API
Web MIDI API

Управление устройствами

Clipboard API
Gamepad API
Geolocation API
Notifications API
Permissions API
Push API
Battery Status API Proximity Events
Sensor APIs
Vibration API
Web Bluetooth API
WebHID API
Web MIDI API

Хранение и управление данными

Как оградить сайт от «опасного кода» в комментариях?

sanitize-html

Запретим опасный код

Caniuse — Sanitizer API

Хочу доступ к контактам, как в мобильных приложениях

Contact Picker API Demo

Contact Picker API

const supported = ('contacts' in navigator
   && 'ContactsManager' in window);
const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = { multiple: true };
navigator.contacts.select(props, opts)
  .then(contacts => { ... })
  .catch(e => { ... })
ContactsManager - Web APIs | MDN

Хранение и управление данными

Background Tasks API
Console API
Contact Picker API
Credential Management API
Encoding API
HTML Sanitizer API
File and Directory Entries API
File System Access API
Frame Timing API
IndexedDB API
Long Tasks API
Navigation Timing API
Performance API
Performance Timeline
Resource Timing API
Payment Request API
Storage Access API
Storage API
Web Authentication API
Web Crypto API
Web Storage API
Web Workers API

Хранение и управление данными

Background Tasks API
Console API
Contact Picker API
Credential Management API
Encoding API
HTML Sanitizer API
File and Directory Entries API
File System Access API
Frame Timing API
IndexedDB API
Long Tasks API
Navigation Timing API
Performance API
Performance Timeline
Resource Timing API
Payment Request API
Storage Access API
Storage API
Web Authentication API
Web Crypto API
Web Storage API
Web Workers API

Хранение и управление данными

Background Tasks API
Console API
Contact Picker API
Credential Management API
Encoding API
HTML Sanitizer API
File and Directory Entries API
File System Access API
Frame Timing API
IndexedDB API
Long Tasks API
Navigation Timing API
Performance API
Performance Timeline
Resource Timing API
Payment Request API
Storage Access API
Storage API
Web Authentication API
Web Crypto API
Web Storage API
Web Workers API

Хранение и управление данными

Background Tasks API
Console API
Contact Picker API
Credential Management API
Encoding API
HTML Sanitizer API
File and Directory Entries API
File System Access API
Frame Timing API
IndexedDB API
Long Tasks API
Navigation Timing API
Performance API
Performance Timeline
Resource Timing API
Payment Request API
Storage Access API
Storage API
Web Authentication API
Web Crypto API
Web Storage API
Web Workers API

Хранение и управление данными

Background Tasks API
Console API
Contact Picker API
Credential Management API
Encoding API
HTML Sanitizer API
File and Directory Entries API
File System Access API
Frame Timing API
IndexedDB API
Long Tasks API
Navigation Timing API
Performance API
Performance Timeline
Resource Timing API
Payment Request API
Storage Access API
Storage API
Web Authentication API
Web Crypto API
Web Storage API
Web Workers API

Хранение и управление данными

Background Tasks API
Console API
Contact Picker API
Credential Management API
Encoding API
HTML Sanitizer API
File and Directory Entries API
File System Access API
Frame Timing API
IndexedDB API
Long Tasks API
Navigation Timing API
Performance API
Performance Timeline
Resource Timing API
Payment Request API
Storage Access API
Storage API
Web Authentication API
Web Crypto API
Web Storage API
Web Workers API

Вместо выводов

— Нельзя поверить в невозможное!

— Просто у тебя мало опыта, – заметила Королева. – В твоем возрасте я уделяла этому полчаса каждый день! В иные дни я успевала поверить в десяток невозможностей до завтрака!

Льюис Кэрролл, «Алиса в стране чудес»
WebAssembly