Browser API

geolocation, clipboard, workers. The browser says no until you ask.

15 programs · open one, then the next

Start with Geolocation API

01Geolocation APIIntermediateGet user location using Geolocation APIOpen example →jsif (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { console.log('Latitude:', position.coords.latitude);
02Notifications APIIntermediateDisplay browser notificationsOpen example →jsif ('Notification' in window) { Notification.requestPermission().then(permission => { if (permission === 'granted') { new Notification('Hello', { body: 'This is a notification' });
03Clipboard APIIntermediateCopy and paste using Clipboard APIOpen example →jsasync function copyToClipboard(text) { await navigator.clipboard.writeText(text); console.log('Copied to clipboard'); }
04Fullscreen APIBeginnerEnter and exit fullscreen modeOpen example →jsfunction enterFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); }
05Page Visibility APIBeginnerDetect when page is visible or hiddenOpen example →jsdocument.addEventListener('visibilitychange', () => { if (document.hidden) { console.log('Page hidden'); } else {
06Web WorkersAdvancedRun scripts in background threadsOpen example →jsconst worker = new Worker('worker.js'); worker.postMessage('Hello'); worker.onmessage = (e) => console.log('Message:', e.data); worker.terminate();
07Service WorkersAdvancedCreate service workers for offline supportOpen example →jsif ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('Registered')) .catch(err => console.error('Error:', err));
08IndexedDBAdvancedUse IndexedDB for client-side storageOpen example →jsconst request = indexedDB.open('MyDB', 1); request.onsuccess = (e) => { const db = e.target.result; console.log('Database opened');
09File APIIntermediateRead files using File APIOpen example →jsconst input = document.querySelector('input[type="file"]'); input.addEventListener('change', (e) => { const file = e.target.files[0]; const reader = new FileReader();
10Canvas APIIntermediateDraw on canvas elementOpen example →jsconst canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(10, 10, 100, 100);
11Web Audio APIAdvancedCreate and manipulate audioOpen example →jsconst audioContext = new AudioContext(); const oscillator = audioContext.createOscillator(); oscillator.connect(audioContext.destination); oscillator.start();
12Speech SynthesisBeginnerConvert text to speechOpen example →jsconst utterance = new SpeechSynthesisUtterance('Hello World'); speechSynthesis.speak(utterance);
13Vibration APIBeginnerControl device vibrationOpen example →jsif ('vibrate' in navigator) { navigator.vibrate(200); // Vibrate for 200ms }
14Battery APIIntermediateGet battery statusOpen example →jsnavigator.getBattery().then(battery => { console.log('Level:', battery.level); console.log('Charging:', battery.charging); });
15Intersection ObserverIntermediateObserve element visibilityOpen example →jsconst observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { console.log('Element visible');