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

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

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

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

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

Браузерные API

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

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

VisualViewport API

VisualViewport = {
  // Read-only
  offsetLeft
  offsetTop
  pageLeft
  pageTop
  width  
  height
  scale
}

 
// Как получить значение зума*
const scale = VisualViewport.scale

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

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

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

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

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

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

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

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

Broadcast Channel API

Broadcast Channel API

const bc = new BroadcastChannel('test_channel')

bc.postMessage('This is a test message.')

bc.onmessage = function (ev) { ... }

bc.close();

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

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

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

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

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

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

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

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

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

Barcode Detection API

const barcodeDetector = new BarcodeDetector();

 barcodeDetector.detect(image)
  .then(barcodes => { ... })
  .catch(e => { ... });

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

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

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

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

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

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

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

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

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

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

Vibration API

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

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

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

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

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

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

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

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

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

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

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

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

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 => { ... })

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

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

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

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

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

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

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

bit.ly/FwDays-WebAPIs
Саша Шинкевич (@neesoglasnaja)