Device Information Dashboard

Location-Based Services

Uber uses your GPS location to show nearby drivers, calculate pickup time, and determine the route. Without geolocation, the core service wouldn't work.

Local Content

McDonald's website uses your location to find the nearest restaurant and show location-specific menu items and prices. Each location may have different menus and promotions.

navigator.geolocation.getCurrentPosition((pos) => {
  const lat = pos.coords.latitude;
  const lng = pos.coords.longitude;
  findNearestRestaurant(lat, lng);
});

Weather & News

Weather.com automatically shows your local weather forecast based on your GPS coordinates, without you having to type in your city name.

Offline-First Apps

Google Docs checks storage quota before downloading files for offline use. If you're low on storage (< 50MB available), it warns you and asks which files to prioritize.

const estimate = await navigator.storage.estimate();
const available = estimate.quota - estimate.usage;
if (available < 50 * 1024 * 1024) {
  showLowStorageWarning();
}

Cache Management

Spotify Web Player monitors storage usage. When cache exceeds 500MB, it automatically deletes oldest songs to make room for new downloads, ensuring the app doesn't consume all your storage.

Progressive Web Apps

Twitter PWA checks available storage before caching images and videos. If storage is limited, it only caches text content and loads images on-demand.

Adaptive Streaming

YouTube detects your connection speed (navigator.connection.downlink) and automatically adjusts video quality. On slow 3G (< 1 Mbps), it serves 360p. On fast WiFi (> 5 Mbps), it serves 1080p or 4K.

const connection = navigator.connection;
if (connection.effectiveType === '4g') {
  loadHighQualityVideo(); // 1080p
} else if (connection.effectiveType === '3g') {
  loadMediumQualityVideo(); // 480p
} else {
  loadLowQualityVideo(); // 360p
}

Data Saver Mode

When you enable 'Data Saver' in Chrome, navigator.connection.saveData becomes true. Twitter detects this and stops auto-playing videos, loading only thumbnails to save your data.

Preloading Strategy

Medium.com checks your connection speed before preloading next article. On fast WiFi, it preloads 3 articles ahead. On slow 3G, it only loads the current article to avoid wasting bandwidth.

Power Saving Features

Facebook detects when your battery is below 20% and not charging. It automatically reduces animations, stops video auto-play, and dims UI elements to extend battery life.

navigator.getBattery().then((battery) => {
  if (battery.level < 0.2 && !battery.charging) {
    enablePowerSavingMode();
    // Disable animations, reduce polling
  }
});

Download Management

Google Play Store pauses large app downloads when battery drops below 15% and resumes when you start charging, preventing your phone from dying mid-download.

Performance Optimization

Google Maps checks navigator.hardwareConcurrency (CPU cores) and navigator.deviceMemory (RAM). On low-end devices (2 cores, 2GB RAM), it limits the number of map markers rendered at once to prevent lag.

const isLowEndDevice =
  navigator.hardwareConcurrency <= 2 ||
  navigator.deviceMemory <= 2;

if (isLowEndDevice) {
  renderSimplifiedGraphics();
  limitMapMarkers(50); // Max 50 markers
} else {
  renderFullGraphics();
  limitMapMarkers(500); // Max 500 markers
}

Game Settings

Cloud gaming services like GeForce NOW detect your device specs. On low-end devices, they automatically set graphics to 'Low', disable ray tracing, and cap framerate at 30fps.

Gaming Controls

Racing games in the browser use device orientation as steering. Tilt your phone left to turn left, right to turn right. This creates an immersive mobile gaming experience.

window.addEventListener('deviceorientation', (e) => {
  const tilt = e.gamma; // -90 to 90
  steerCar(tilt);
});

AR Applications

IKEA Place app uses device orientation to overlay 3D furniture models in your room. As you move your phone, the furniture stays positioned correctly in space.

Shake Gestures

Yelp app detects phone shaking (using accelerometer) to trigger 'Shake to Search Nearby' feature, finding restaurants around you with a simple shake gesture.

Video Conferencing

Zoom Web uses navigator.mediaDevices.getUserMedia() to access your camera and microphone. It also lists available devices so you can choose between front/back camera or multiple microphones.

// Request camera/mic access
const stream = await navigator.mediaDevices
  .getUserMedia({
    video: true,
    audio: true
  });

// List available devices
const devices = await navigator.mediaDevices
  .enumerateDevices();

QR Code Scanner

WhatsApp Web uses your phone camera to scan QR codes for login. The camera access is temporary and only used for scanning.

Photo Upload

Instagram detects available cameras and lets you choose between front/back camera when taking photos directly in the browser.