Web APIs you might not know about

Web APIs you might not know about

Sasha Shynkevich (@neesoglasnaja)

What does "Web APIs" mean?

What we have to deal with in browser

Web APIs

DOM and styles manipulations

How to detect a page zoom?

VisualViewport API

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

 
// How to get a page zoom value*
const scale = VisualViewport.scale

DOM and styles manipulations

DOM and styles manipulations

DOM and styles manipulations

DOM and styles manipulations

DOM and styles manipulations

DOM and styles manipulations

Data transferring and network

How to communicate between tabs while there is no Internet connection?

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();

Data transferring and network

Data transferring and network

Data transferring and network

Data transferring and network

Data transferring and network

Data transferring and network

Media

How to detect QR-codes from a browser?

Detect QR-code

Barcode Detection API

const barcodeDetector = new BarcodeDetector();

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

Media

Media

Media

Media

Media

Media

Media

Media

Devices

How to make your phone buzzing?

Vibration API

if ("vibrate" in navigator) {
  ...
  navigator.vibrate(200) // one-time vibro
  navigator.vibrate([100,30,100,30,...]) // sequential vibro
  ...
}

Devices

Devices

Devices

Devices

Devices

Devices

Devices

Data management

How to disable unsafe code execution for user-created content?

Sanitize unsafe text

Can I get access to user's contacts as if it's a mobile app?

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

Data management

Data management

Data management

Data management

Data management

Data management

Takeaways

• There is always something new in the browser
• You might not need a third-party lib/tool
• Never stop learning

bit.ly/JSCongress2021-APIs
Sasha Shynkevich (@neesoglasnaja)