HTML5 APIs - Advanced Features

// Store simple values (localStorage)
localStorage.setItem('username', 'john_doe');
localStorage.setItem('theme', 'dark');

// Retrieve values
const username = localStorage.getItem('username'); // "john_doe"
const theme = localStorage.getItem('theme'); // "dark"

// Store complex objects (must stringify)
const user = {
  id: 123,
  name: 'John Doe',
  preferences: { theme: 'dark', lang: 'en' }
};
localStorage.setItem('user', JSON.stringify(user));

// Retrieve and parse objects
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.preferences.theme); // "dark"

// Remove specific item
localStorage.removeItem('theme');

// Clear all storage
localStorage.clear();

// sessionStorage (same API, different lifetime)
sessionStorage.setItem('tempData', 'session-only');

// Iterate through all items
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(key, value);
}

// Storage event listener (fires on other tabs/windows)
window.addEventListener('storage', (e) => {
  console.log('Key:', e.key);
  console.log('Old value:', e.oldValue);
  console.log('New value:', e.newValue);
  console.log('URL:', e.url);
  console.log('Storage area:', e.storageArea);
});

// Check if geolocation is supported
if ('geolocation' in navigator) {
  // Get current position (one-time)
  navigator.geolocation.getCurrentPosition(
    // Success callback
    (position) => {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
      const accuracy = position.coords.accuracy;
      
      console.log(`Location: ${lat}, ${lng}`);
      console.log(`Accuracy: ${accuracy} meters`);
      
      // Use coordinates (e.g., show on map)
      showOnMap(lat, lng);
    },
    // Error callback
    (error) => {
      switch(error.code) {
        case error.PERMISSION_DENIED:
          console.error('User denied geolocation');
          break;
        case error.POSITION_UNAVAILABLE:
          console.error('Location unavailable');
          break;
        case error.TIMEOUT:
          console.error('Request timeout');
          break;
        default:
          console.error('Unknown error');
      }
    },
    // Options
    {
      enableHighAccuracy: true,  // Use GPS
      timeout: 5000,             // 5 second timeout
      maximumAge: 60000          // Accept 1-minute-old cache
    }
  );
  
  // Watch position (continuous monitoring)
  const watchId = navigator.geolocation.watchPosition(
    (position) => {
      updateMap(position.coords.latitude, position.coords.longitude);
      
      // Check if device is moving
      if (position.coords.speed !== null) {
        console.log(`Speed: ${position.coords.speed} m/s`);
      }
      if (position.coords.heading !== null) {
        console.log(`Heading: ${position.coords.heading}°`);
      }
    },
    (error) => console.error(error),
    { enableHighAccuracy: true }
  );
  
  // Stop watching after 10 seconds
  setTimeout(() => {
    navigator.geolocation.clearWatch(watchId);
    console.log('Stopped watching position');
  }, 10000);
  
} else {
  console.error('Geolocation not supported');
}

<input type="file" id="fileInput" multiple accept="image/*">
<div id="preview"></div>

<script>
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');

fileInput.addEventListener('change', (e) => {
  const files = e.target.files; // FileList
  
  // Validate and process each file
  Array.from(files).forEach(file => {
    // File properties
    console.log('Name:', file.name);
    console.log('Size:', file.size, 'bytes');
    console.log('Type:', file.type);
    console.log('Modified:', new Date(file.lastModified));
    
    // Validation
    const maxSize = 5 * 1024 * 1024; // 5MB
    if (file.size > maxSize) {
      alert(`${file.name} is too large`);
      return;
    }
    
    if (!file.type.startsWith('image/')) {
      alert(`${file.name} is not an image`);
      return;
    }
    
    // Method 1: FileReader for preview
    const reader = new FileReader();
    
    reader.onload = (e) => {
      const img = document.createElement('img');
      img.src = e.target.result; // Data URL
      img.style.maxWidth = '200px';
      preview.appendChild(img);
    };
    
    reader.onerror = () => {
      console.error('Error reading file');
    };
    
    reader.onprogress = (e) => {
      if (e.lengthComputable) {
        const percent = (e.loaded / e.total) * 100;
        console.log(`Loading: ${percent.toFixed(0)}%`);
      }
    };
    
    reader.readAsDataURL(file); // Start reading
    
    // Method 2: Object URL (more efficient for large files)
    const objectURL = URL.createObjectURL(file);
    const img2 = document.createElement('img');
    img2.src = objectURL;
    preview.appendChild(img2);
    
    // Important: Revoke object URL when done to free memory
    img2.onload = () => URL.revokeObjectURL(objectURL);
  });
});
</script>

<input type="file" id="jsonFile" accept=".json,.txt">

<script>
document.getElementById('jsonFile').addEventListener('change', (e) => {
  const file = e.target.files[0];
  
  if (file) {
    const reader = new FileReader();
    
    reader.onload = (e) => {
      try {
        // Parse JSON content
        const data = JSON.parse(e.target.result);
        console.log('Parsed JSON:', data);
      } catch (error) {
        console.error('Invalid JSON:', error);
      }
    };
    
    reader.readAsText(file, 'UTF-8');
  }
});

// Alternative: Modern Promise-based approach
async function readFileAsync(file) {
  try {
    const text = await file.text(); // Built-in method
    const data = JSON.parse(text);
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}
</script>

<div id="dropZone" style="border: 2px dashed #ccc; padding: 50px;">
  Drop files here
</div>

<script>
const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.style.background = '#e3f2fd';
});

dropZone.addEventListener('dragleave', () => {
  dropZone.style.background = '';
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  dropZone.style.background = '';
  
  const files = e.dataTransfer.files;
  
  // Process dropped files
  Array.from(files).forEach(file => {
    console.log('Dropped:', file.name);
    
    // Upload to server
    uploadFile(file);
  });
});

function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => console.log('Uploaded:', data))
  .catch(error => console.error('Upload failed:', error));
}
</script>

// SPA Router implementation
const routes = {
  '/': renderHome,
  '/about': renderAbout,
  '/contact': renderContact
};

// Navigate to new page without reload
function navigateTo(path) {
  // Add to history
  history.pushState({ path }, '', path);
  
  // Render new content
  renderPage(path);
}

// Render page based on path
function renderPage(path) {
  const render = routes[path] || render404;
  render();
  
  // Update active nav links
  document.querySelectorAll('nav a').forEach(link => {
    link.classList.toggle('active', link.pathname === path);
  });
}

// Handle browser back/forward
window.addEventListener('popstate', (e) => {
  const path = e.state?.path || '/';
  renderPage(path);
});

// Intercept link clicks
document.addEventListener('click', (e) => {
  if (e.target.matches('a[href^="/"]')) {
    e.preventDefault();
    navigateTo(e.target.pathname);
  }
});

// Example: Update URL without navigation
function updateFilters(filters) {
  const url = new URL(window.location);
  url.searchParams.set('filter', filters);
  
  // Replace current history entry (no new back button entry)
  history.replaceState({ filters }, '', url);
}

// Example: Handle state changes
window.addEventListener('popstate', (e) => {
  console.log('State:', e.state);
  console.log('URL:', location.pathname);
  
  if (e.state?.filters) {
    applyFilters(e.state.filters);
  }
});

// Control scroll restoration
history.scrollRestoration = 'manual'; // Manually handle scroll position

// Save scroll position before navigation
window.addEventListener('beforeunload', () => {
  const scrollPos = { x: window.scrollX, y: window.scrollY };
  history.replaceState({ scrollPos }, '');
});

// Restore scroll position
window.addEventListener('popstate', (e) => {
  if (e.state?.scrollPos) {
    window.scrollTo(e.state.scrollPos.x, e.state.scrollPos.y);
  }
});

<!-- Main page (main.html) -->
<script>
// Create worker
const worker = new Worker('worker.js');

// Send data to worker
worker.postMessage({ 
  operation: 'fibonacci',
  number: 40 
});

// Receive results from worker
worker.onmessage = (e) => {
  console.log('Result from worker:', e.data);
  // { result: 102334155, time: 1523 }
};

// Handle worker errors
worker.onerror = (e) => {
  console.error('Worker error:', e.message);
  console.error('File:', e.filename, 'Line:', e.lineno);
};

// Send multiple messages
worker.postMessage({ operation: 'sort', data: [5, 2, 8, 1, 9] });

// Terminate worker when done
setTimeout(() => {
  worker.terminate();
  console.log('Worker terminated');
}, 5000);
</script>

<!-- Worker file (worker.js) -->
<script>
// Listen for messages from main thread
self.onmessage = (e) => {
  const { operation, number, data } = e.data;
  const startTime = performance.now();
  
  let result;
  
  switch(operation) {
    case 'fibonacci':
      result = fibonacci(number);
      break;
    case 'sort':
      result = data.sort((a, b) => a - b);
      break;
    default:
      throw new Error('Unknown operation');
  }
  
  const time = performance.now() - startTime;
  
  // Send result back to main thread
  self.postMessage({ result, time });
};

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Import other scripts
importScripts('math-utils.js', 'helpers.js');

// Handle errors
self.onerror = (e) => {
  console.error('Error in worker:', e);
};

// Worker can close itself
// self.close();
</script>

<!-- Main page (any tab) -->
<script>
// Create/connect to shared worker
const sharedWorker = new SharedWorker('shared.js');

// Get message port
const port = sharedWorker.port;

// Start the port
port.start();

// Send message
port.postMessage({ type: 'subscribe', channel: 'chat' });

// Receive messages
port.onmessage = (e) => {
  console.log('Message from shared worker:', e.data);
};

// Send broadcast to all connected tabs
port.postMessage({
  type: 'broadcast',
  message: 'Hello from tab ' + Date.now()
});
</script>

<!-- Shared Worker (shared.js) -->
<script>
const connections = [];

// Handle new connections
self.onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port);
  
  console.log('New connection. Total:', connections.length);
  
  // Listen for messages from this port
  port.onmessage = (e) => {
    const { type, message, channel } = e.data;
    
    if (type === 'broadcast') {
      // Send to all connected tabs
      connections.forEach(p => {
        if (p !== port) { // Don't send back to sender
          p.postMessage(message);
        }
      });
    } else if (type === 'subscribe') {
      port.postMessage({ status: 'subscribed', channel });
    }
  };
  
  // Start the port
  port.start();
  
  // Send welcome message
  port.postMessage({ type: 'welcome', connections: connections.length });
};
</script>

<!-- Main page (index.html) -->
<script>
// Check if service workers are supported
if ('serviceWorker' in navigator) {
  // Register service worker
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('SW registered:', registration);
      console.log('Scope:', registration.scope);
      
      // Check for updates
      registration.update();
      
      // Listen for updates
      registration.addEventListener('updatefound', () => {
        const newWorker = registration.installing;
        console.log('New service worker installing');
        
        newWorker.addEventListener('statechange', () => {
          if (newWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // New worker available, prompt user to reload
              console.log('New version available!');
              showUpdateNotification();
            } else {
              console.log('Content cached for offline use');
            }
          }
        });
      });
    })
    .catch(error => {
      console.error('SW registration failed:', error);
    });
  
  // Listen for messages from service worker
  navigator.serviceWorker.addEventListener('message', (e) => {
    console.log('Message from SW:', e.data);
  });
  
  // Send message to service worker
  navigator.serviceWorker.ready.then(registration => {
    registration.active.postMessage({ type: 'SKIP_WAITING' });
  });
}
</script>

const CACHE_NAME = 'my-app-v1';
const STATIC_CACHE = 'static-v1';
const DYNAMIC_CACHE = 'dynamic-v1';

// Files to cache immediately
const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/logo.png',
  '/offline.html'
];

// Install event - cache static assets
self.addEventListener('install', (e) => {
  console.log('Service Worker installing...');
  
  e.waitUntil(
    caches.open(STATIC_CACHE)
      .then(cache => {
        console.log('Caching static assets');
        return cache.addAll(STATIC_ASSETS);
      })
      .then(() => {
        // Skip waiting to activate immediately
        return self.skipWaiting();
      })
  );
});

// Activate event - clean up old caches
self.addEventListener('activate', (e) => {
  console.log('Service Worker activating...');
  
  e.waitUntil(
    caches.keys()
      .then(cacheNames => {
        return Promise.all(
          cacheNames
            .filter(name => name !== STATIC_CACHE && name !== DYNAMIC_CACHE)
            .map(name => {
              console.log('Deleting old cache:', name);
              return caches.delete(name);
            })
        );
      })
      .then(() => {
        // Take control of all pages immediately
        return self.clients.claim();
      })
  );
});

// Fetch event - implement caching strategies
self.addEventListener('fetch', (e) => {
  const { request } = e;
  const url = new URL(request.url);
  
  // Strategy 1: Cache First (for static assets)
  if (request.destination === 'image' || request.destination === 'style' || request.destination === 'script') {
    e.respondWith(
      caches.match(request)
        .then(cached => {
          if (cached) {
            return cached; // Return from cache
          }
          // Not in cache, fetch and cache
          return fetch(request).then(response => {
            return caches.open(DYNAMIC_CACHE).then(cache => {
              cache.put(request, response.clone());
              return response;
            });
          });
        })
        .catch(() => {
          // Return fallback image if offline
          return caches.match('/placeholder.png');
        })
    );
  }
  
  // Strategy 2: Network First (for API calls)
  else if (url.pathname.startsWith('/api/')) {
    e.respondWith(
      fetch(request)
        .then(response => {
          // Cache successful response
          const responseClone = response.clone();
          caches.open(DYNAMIC_CACHE).then(cache => {
            cache.put(request, responseClone);
          });
          return response;
        })
        .catch(() => {
          // Network failed, try cache
          return caches.match(request);
        })
    );
  }
  
  // Strategy 3: Stale While Revalidate (for HTML pages)
  else if (request.destination === 'document') {
    e.respondWith(
      caches.match(request)
        .then(cached => {
          const fetchPromise = fetch(request).then(response => {
            const responseClone = response.clone();
            caches.open(DYNAMIC_CACHE).then(cache => {
              cache.put(request, responseClone);
            });
            return response;
          });
          
          // Return cached version immediately, update in background
          return cached || fetchPromise;
        })
        .catch(() => {
          // Show offline page
          return caches.match('/offline.html');
        })
    );
  }
  
  // Default: Network only
  else {
    e.respondWith(fetch(request));
  }
});

// Message event - handle messages from pages
self.addEventListener('message', (e) => {
  if (e.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
  
  // Send message back to client
  e.ports[0].postMessage({ status: 'received' });
});

// Background Sync (requires registration.sync.register())
self.addEventListener('sync', (e) => {
  if (e.tag === 'sync-data') {
    e.waitUntil(syncDataToServer());
  }
});

// Push notification
self.addEventListener('push', (e) => {
  const data = e.data.json();
  
  e.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/icon.png',
      badge: '/badge.png',
      data: { url: data.url }
    })
  );
});

// Notification click
self.addEventListener('notificationclick', (e) => {
  e.notification.close();
  
  e.waitUntil(
    clients.openWindow(e.notification.data.url)
  );
});