Beriktu beberapa Web Browser API menarik yang layak dicoba seperti ambient light, device orientation dan lain sebagainya.

1. Beberapa WEB Browser
API Menarik

2. Halo, saya Riza!

4. HTML5

5. 2008

6. 2009

7. 2014

8. 2020

9. Sudahkah Kita Mencoba
Fitur-fitur HTML5?

10. SVG
Canvas
LocalStorage
WebRTC
Socket
Audio Video
Geolocation

11. Ambient Light

12. Ambient Light
Menampilkan data dari sensor cahaya atau
kamera/webcam.

13. if ('ondevicelight' in window) {
window.addEventListener('devicelight', function(event) {
console.log(event.value);
});
} else {
console.log('devicelight event not supported');
}

14. Dukungan Browser
https://caniuse.com/#feat=ambient-light

15. Contoh Penggunaan

16. Battery Status

17. Battery Status
Memungkinkan aplikasi web untuk
mendapatkan informasi status baterai
laptop ataupun ponsel.

18. navigator.getBattery().then(function (battery) {
console.log(battery.level)
battery.addEventListener('levelchange', function () {
console.log(`${Math.floor(this.level * 100)}%`);
});
});

19. Dukungan Browser
https://caniuse.com/#feat=battery-status

20. Contoh Penggunaan

21. Contoh Penggunaan

22. Clipboard

23. Clipboard
Antarmuka untuk berinteraksi dengan
clipboard atau copy-paste.

25. // 1. User interaction is REQUIRED!
const button = document.querySelector('#copy');
button.addEventListener('click', function() {
select();
copy();
});

26. // 2. Select content of the element, programmatically
function select() {
const text = document.querySelector('#source');
text.focus();
text.setSelectionRange(0, text.value.length);
}

27. // 3. Copy selected element text
function copy() {
try {
document.execCommand('copy');
} catch(err) {
console.error(err);
}
}

28. Dukungan Browser
https://caniuse.com/#search=clipboard

29. Contoh Penggunaan

30. Device Orientation

31. Device Orientation
Menyediakan informasi orientasi dari
perangkat yang digunakan.

32. window.addEventListener('deviceorientation',
function (e) {
console.log(`Alpha: ${e.alpha}`);
console.log(`Gamma: ${e.gamma}`);
console.log(`Beta: ${e.beta}`);
});

33. Dukungan Browser
https://caniuse.com/#feat=deviceorientation

34. Contoh Penggunaan

35. Contoh Penggunaan

36. Online Status

37. Online Status
Menyediakan informasi jaringan yang
digunakan untuk membuka halaman web.

38. // Online Status
console.log(navigator.onLine ? 'Online 🎉' : 'Offline 😢' );
window.addEventListener('offline', printNetworkStatus);
window.addEventListener('online', printNetworkStatus);
function printNetworkStatus(e) {
console.log(e.type);
}

39. Dukungan Browser
https://caniuse.com/#feat=online-status

40. Contoh Penggunaan

41. Page Visibility

42. Page Visibility
Menyediakan antarmuka untuk mengetahui
apakah sebuah halaman dilihat oleh
pengguna atau tidak.

43. window.addEventListener('visibilitychange', function() {
switch (document.visibilityState) {
case 'prerender':
console.log('Tab is prerendering...');
break;
case 'hidden':
console.log('Tab is hidden.');
break;
case 'visible':
console.log('Tab is focused.');
break;
}
});

44. Dukungan Browser
https://caniuse.com/#feat=pagevisibility

45. Contoh Penggunaan

46. Vibration

47. Vibration
Menyediakan umpan balik kepada pengguna
dalam bentuk getaran.

48. // Vibrate for a second.
navigator.vibrate(1000);
// Vibrate with a pattern
navigator.vibrate([400, 300, 300, 200, 500]);
// Turn off vibration
navigator.vibrate(0);
vibrate vibrate vibratewait wait

49. // Super Mario
navigator.vibrate([125,75,125,275,200,275,125,75,
125,275,200,600,200,600]);
// Star Wars
navigator.vibrate([500,110,500,110,450,110,200,11
0,170,40,450,110,200,110,170,40,500]);
// Power Rangers
navigator.vibrate([150,150,150,150,75,75,150,150,
150,150,450]);
https://goo.gl/bX4ZQv

50. Dukungan Browser
https://caniuse.com/#feat=vibration

51. Contoh Penggunaan

52. Contoh Penggunaan

53. Masih Banyak Yang
Lainnya!

54. Templates
Web Components
Shadow DOM
HTML Imports
Custom Elements

55. Service Workers
Progressive Web Apps
App ManifestPush Notification
Background Sync
Offline Support

56. WebAssembly
Wasm Module Emscripten
Threads Garbage Collector

57. https://beta.unity3d.com/jonas/AngryBots/

58. Kesimpulan

59. • Masih banyak fitur HTML5 yang belum
dieksplorasi
• Web menjadi platform yang semakin
menjanjikan
• Web menjadi semakin mendekati fitur-
fitur aplikasi native
• Project Fugu

60. https://web.dev/fugu-status/