Web Platform APIs
The Web Platform API is a collection of browser APIs that extend JavaScript capabilities beyond DOM manipulation. These APIs enable access to device hardware (camera, microphone, GPS), provide offline capabilities (Service Workers, Cache API, IndexedDB), and support new interaction paradigms (WebSockets, WebRTC, Gamepad).
Many Web Platform APIs require HTTPS, user gestures, or explicit permission prompts. The trend is toward capability-based APIs that give users granular control over what websites can access. Checking for API support before use is essential — not all browsers implement every API.
Device APIs provide access to hardware capabilities. The Geolocation API gets the user's position; the Device Orientation API detects device rotation and acceleration; the Media Devices API accesses cameras and microphones. All require user permission and HTTPS.
| 1 | // Geolocation API |
| 2 | function getCurrentPosition() { |
| 3 | return new Promise((resolve, reject) => { |
| 4 | if (!navigator.geolocation) { |
| 5 | reject(new Error('Geolocation not supported')); |
| 6 | return; |
| 7 | } |
| 8 | navigator.geolocation.getCurrentPosition( |
| 9 | (pos) => resolve({ |
| 10 | lat: pos.coords.latitude, |
| 11 | lng: pos.coords.longitude, |
| 12 | accuracy: pos.coords.accuracy, |
| 13 | }), |
| 14 | (err) => reject(err), |
| 15 | { enableHighAccuracy: true, timeout: 10000 } |
| 16 | ); |
| 17 | }); |
| 18 | } |
| 19 | |
| 20 | // Media Devices (camera/microphone) |
| 21 | async function startCamera() { |
| 22 | try { |
| 23 | const stream = await navigator.mediaDevices.getUserMedia({ |
| 24 | video: { facingMode: 'environment' }, |
| 25 | audio: true, |
| 26 | }); |
| 27 | const video = document.querySelector('video'); |
| 28 | video.srcObject = stream; |
| 29 | video.play(); |
| 30 | return stream; |
| 31 | } catch (err) { |
| 32 | if (err.name === 'NotAllowedError') { |
| 33 | console.error('Camera permission denied'); |
| 34 | } else if (err.name === 'NotFoundError') { |
| 35 | console.error('No camera found'); |
| 36 | } |
| 37 | } |
| 38 | } |
| 39 | |
| 40 | // Device orientation |
| 41 | window.addEventListener('deviceorientation', (event) => { |
| 42 | const { alpha, beta, gamma } = event; |
| 43 | // alpha: compass heading (0-360) |
| 44 | // beta: front-to-back tilt (-180 to 180) |
| 45 | // gamma: left-to-right tilt (-90 to 90) |
| 46 | updateCompassDisplay(alpha); |
| 47 | }); |
| 48 | |
| 49 | // Battery status |
| 50 | const battery = await navigator.getBattery(); |
| 51 | console.log(`Battery: ${battery.level * 100}%, |
| 52 | charging: ${battery.charging}`); |
| 53 | battery.addEventListener('levelchange', () => { |
| 54 | if (battery.level < 0.15 && !battery.charging) { |
| 55 | showLowBatteryWarning(); |
| 56 | } |
| 57 | }); |
Modern browsers offer multiple storage mechanisms beyond cookies. The Cache API and Service Workers enable full offline support. IndexedDB provides structured client-side storage with indexes and transactions. The File System Access API allows reading and writing local files.
| 1 | // Service Worker — offline cache |
| 2 | // sw.js |
| 3 | self.addEventListener('install', (event) => { |
| 4 | event.waitUntil( |
| 5 | caches.open('app-v1').then((cache) => { |
| 6 | return cache.addAll([ |
| 7 | '/', |
| 8 | '/index.html', |
| 9 | '/app.js', |
| 10 | '/styles.css', |
| 11 | ]); |
| 12 | }) |
| 13 | ); |
| 14 | }); |
| 15 | |
| 16 | self.addEventListener('fetch', (event) => { |
| 17 | event.respondWith( |
| 18 | caches.match(event.request).then((cached) => { |
| 19 | // Return cached response or fetch from network |
| 20 | return cached || fetch(event.request).then((response) => { |
| 21 | // Cache new requests for offline use |
| 22 | return caches.open('dynamic').then((cache) => { |
| 23 | cache.put(event.request, response.clone()); |
| 24 | return response; |
| 25 | }); |
| 26 | }); |
| 27 | }) |
| 28 | ); |
| 29 | }); |
| 30 | |
| 31 | // IndexedDB — structured client-side storage |
| 32 | const db = await new Promise((resolve, reject) => { |
| 33 | const request = indexedDB.open('AppDatabase', 1); |
| 34 | request.onupgradeneeded = (event) => { |
| 35 | const db = event.target.result; |
| 36 | const store = db.createObjectStore('items', { |
| 37 | keyPath: 'id', |
| 38 | autoIncrement: true, |
| 39 | }); |
| 40 | store.createIndex('category', 'category', { unique: false }); |
| 41 | }; |
| 42 | request.onsuccess = () => resolve(request.result); |
| 43 | request.onerror = () => reject(request.error); |
| 44 | }); |
| 45 | |
| 46 | // File System Access API |
| 47 | async function saveFile(content, fileName) { |
| 48 | const handle = await window.showSaveFilePicker({ |
| 49 | suggestedName: fileName, |
| 50 | types: [{ accept: { 'text/plain': ['.txt'] } }], |
| 51 | }); |
| 52 | const writable = await handle.createWritable(); |
| 53 | await writable.write(content); |
| 54 | await writable.close(); |
| 55 | } |
Web communication APIs enable real-time data exchange. WebSocket provides full-duplex communication over a single TCP connection. WebRTC enables peer-to-peer audio, video, and data channels. Server-Sent Events provide one-way real-time updates from server to client.
| 1 | // WebSocket — bidirectional real-time |
| 2 | const ws = new WebSocket('wss://api.example.com/ws'); |
| 3 | |
| 4 | ws.onopen = () => { |
| 5 | ws.send(JSON.stringify({ type: 'subscribe', channel: 'prices' })); |
| 6 | }; |
| 7 | |
| 8 | ws.onmessage = (event) => { |
| 9 | const data = JSON.parse(event.data); |
| 10 | updatePrice(data.symbol, data.price); |
| 11 | }; |
| 12 | |
| 13 | ws.onclose = (event) => { |
| 14 | if (!event.wasClean) { |
| 15 | // Unexpected close — auto-reconnect |
| 16 | setTimeout(connectWebSocket, 1000); |
| 17 | } |
| 18 | }; |
| 19 | |
| 20 | // WebRTC — peer-to-peer data channel |
| 21 | const peerConnection = new RTCPeerConnection({ |
| 22 | iceServers: [{ urls: 'stun:stun.l.google.com:19302' }], |
| 23 | }); |
| 24 | |
| 25 | const dataChannel = peerConnection.createDataChannel('chat'); |
| 26 | dataChannel.onmessage = (event) => { |
| 27 | showMessage(event.data); |
| 28 | }; |
| 29 | |
| 30 | // Broadcast Channel — cross-tab communication |
| 31 | const channel = new BroadcastChannel('app-updates'); |
| 32 | channel.postMessage({ type: 'logout', userId: '123' }); |
| 33 | |
| 34 | // Server-Sent Events |
| 35 | const eventSource = new EventSource('/api/events'); |
| 36 | eventSource.addEventListener('notification', (event) => { |
| 37 | showNotification(JSON.parse(event.data)); |
| 38 | }); |
- Device APIs (geolocation, camera, sensors) require HTTPS and user permission
- Service Workers + Cache API enable full offline application support
- WebSocket and WebRTC provide real-time bidirectional communication
- Always check browser support before using platform APIs — use feature detection
- Respect user privacy with clear permission requests and minimal data collection
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.