Web APIs you (probably) didn't know existed
4 likes947 views
The document discusses various web APIs that enhance web applications, such as Page Visibility, Online State, and Vibration API. It provides code snippets and explanations on how to implement these APIs, including their browser support information. Additionally, it touches upon other emerging technologies like WebAssembly, VR, and Gamepad access.
![// Vibrate for 1 second
navigator.vibrate(1000);
// Vibrate with a pattern
navigator.vibrate([400, 300, 300, 200, 500]);
// Turn off vibration
navigator.vibrate(0);
VIBRATION
vibrate wait vibrate wait vibrate](https://image.slidesharecdn.com/slides-160823152442/85/Web-APIs-you-probably-didn-t-know-existed-36-320.jpg)
![// Super Mario
navigator.vibrate([125,75,125,275,200,275,125,75,125,27
5,200,600,200,600]);
// Star Wars
navigator.vibrate([500,110,500,110,450,110,200,110,170,
40,450,110,200,110,170,40,500]);
// Go Go Power Rangers
navigator.vibrate([150,150,150,150,75,75,150,150,150,15
0,450]);
VIBRATION
https://goo.gl/bX4ZQv](https://image.slidesharecdn.com/slides-160823152442/85/Web-APIs-you-probably-didn-t-know-existed-37-320.jpg)
![window.addEventListener('gamepadconnected', () => {
let gp = navigator.getGamepads()[0];
console.log(‘ID:’, gp.id);
console.log(‘Axes:’, gp.axes.length);
console.log(‘Buttons:’, gp.buttons.length);
});
gamepad](https://image.slidesharecdn.com/slides-160823152442/85/Web-APIs-you-probably-didn-t-know-existed-92-320.jpg)
![window.addEventListener('gamepadconnected', gameLoop);
function gameLoop() {
let gp = navigator.getGamepads()[0];
if (gp.buttons[0].pressed) {
console.log('X');
}
requestAnimationFrame(gameLoop);
}
game loop](https://image.slidesharecdn.com/slides-160823152442/85/Web-APIs-you-probably-didn-t-know-existed-93-320.jpg)
Web APIs you (probably) didn't know existed
- 2. 2008
- 3. 2008
- 4. 2009
- 5. 2009
- 6. 2010
- 7. 2010
- 8. 2011
- 9. 2011
- 10. 2012
- 11. 2012
- 12. 2013
- 13. 2013
- 14. 2014
- 15. 2014
- 18. page visibility
- 19. Provides an API to ask whether the current page is visible or not. page visibility
- 20. window.addEventListener('visibilitychange', () => { if (document.hidden) { console.log('Tab is hidden'); } else { console.log('Tab is focused'); } }); page visibility
- 22. window.addEventListener('visibilitychange', () => { switch(document.visibilityState) { case 'prerender': console.log('Tab is pre-rendering'); break; case 'hidden': console.log('Tab is hidden'); break; case 'visible': console.log('Tab is focused'); break; } });
- 24. where to use it?
- 26. state online
- 27. Exposes a network connection availability information to the web. online state
- 28. console.log(navigator.onLine ? 'online' : 'offline') online state
- 29. window.addEventListener('offline', networkStatus); window.addEventListener('online', networkStatus); function networkStatus(e) { console.log(e.type); } online state
- 32. where to use it?
- 34. VIBRATION
- 35. Provides access to a form of tactile feedback. vibration
- 36. // Vibrate for 1 second navigator.vibrate(1000); // Vibrate with a pattern navigator.vibrate([400, 300, 300, 200, 500]); // Turn off vibration navigator.vibrate(0); VIBRATION vibrate wait vibrate wait vibrate
- 37. // Super Mario navigator.vibrate([125,75,125,275,200,275,125,75,125,27 5,200,600,200,600]); // Star Wars navigator.vibrate([500,110,500,110,450,110,200,110,170, 40,450,110,200,110,170,40,500]); // Go Go Power Rangers navigator.vibrate([150,150,150,150,75,75,150,150,150,15 0,450]); VIBRATION https://goo.gl/bX4ZQv
- 39. where to use it?
- 43. Provides access to device's physical orientation. device orientation
- 44. device orientation window.addEventListener('deviceorientation', (e) => { console.log(‘Gamma:’, e.gamma); console.log(‘Beta:’, e.beta); console.log(‘Alpha:’, e.alpha); });
- 45. device orientation let logo = document.querySelector(‘img'); window.addEventListener('deviceorientation', (e) => { let tiltLR = e.gamma; let tiltFB = e.beta; logo.style.transform = `rotate(${tiltLR}deg) rotate3d(1,0,0, ${tiltFB * -1}deg)`; });
- 48. where to use it?
- 51. Standard APIs for interacting with the clipboard (copy/cut/paste). clipboard
- 53. // 1. User interaction is required let button = document.querySelector('button'); button.addEventListener('click', () => { select(); copy(); }); clipboard
- 54. // 2. Programmatically select an element function select() { let input = document.querySelector('input'); input.focus(); input.setSelectionRange(0, input.value.length); } clipboard
- 55. // 3. Copy selected element text function copy() { try { document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard
- 56. document.addEventListener('copy', (e) => { console.log(e.target.value); }); document.addEventListener('cut', (e) => { console.log(e.target.value); }); document.addEventListener('paste', (e) => { console.log(e.clipboardData.getData('text/plain')); }); clipboard
- 60. where to use it?
- 63. light ambient
- 64. Exposes sensor data that captures the light intensity. ambient light
- 65. window.addEventListener('devicelight', (e) => { console.log(`${e.value} lux`); }); ambient light
- 68. let sensor = new AmbientLightSensor(); sensor.start(); sensor.onchange = (e) => { console.log(e.reading.illuminance); }; sensor.stop(); ambient light sensor
- 70. where to use it?
- 73. STATUS battery
- 74. Allows a web page to access battery information from desktop and mobile devices. battery status
- 75. navigator.getBattery().then((battery) => { console.log(`${battery.level * 100}%`); battery.addEventListener('levelchange', () => { console.log(`${this.level * 100}%`); }); }); battery status
- 77. where to use it?
- 81. progressive web apps service workers push notifications offline support app manifest background sync
- 82. WEBassembly
- 83. WebAssembly, or wasm, is a low-level programming language for the client-side. web assembly
- 86. WEBVR
- 87. Experimental API that provides access to Virtual Reality devices, such as the Oculus Rift or Google Cardboard. web VR
- 90. gamepad
- 91. Gives access to a game controller via USB. gamepad
- 92. window.addEventListener('gamepadconnected', () => { let gp = navigator.getGamepads()[0]; console.log(‘ID:’, gp.id); console.log(‘Axes:’, gp.axes.length); console.log(‘Buttons:’, gp.buttons.length); }); gamepad
- 93. window.addEventListener('gamepadconnected', gameLoop); function gameLoop() { let gp = navigator.getGamepads()[0]; if (gp.buttons[0].pressed) { console.log('X'); } requestAnimationFrame(gameLoop); } game loop