HTML5 APIs پیشرفته

API‌های پیشرفته HTML5: Web Workers, SSE, WebSockets, Service Workers و IndexedDB

HTML5 APIs پیشرفته

HTML5 علاوه بر تگ‌های جدید، API‌های قدرتمندی را معرفی کرد که امکانات پیشرفته‌ای به مرورگر اضافه می‌کنند.

Web Storage

ذخیره داده در مرورگر کاربر — جایگزین کوکی برای داده‌های بیشتر.

localStorage

داده‌ها دائمی ذخیره می‌شوند و حتی بعد از بستن مرورگر باقی می‌مانند.

localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

sessionStorage

داده‌ها موقت ذخیره می‌شوند و با بستن تب پاک می‌شوند.

sessionStorage.setItem('key', 'value');
const value = sessionStorage.getItem('key');

Geolocation API

دسترسی به موقعیت مکانی کاربر (با اجازه او).

navigator.geolocation.getCurrentPosition(success, error);

function success(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  console.log(`موقعیت: ${lat}, ${lng}`);
}

Web Workers

اجرای جاوااسکریپت در پس‌زمینه بدون قفل کردن صفحه.

// worker.js
self.onmessage = function(e) {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(e) {
  console.log('نتیجه:', e.data);
};

Server-Sent Events (SSE)

دریافت به‌روزرسانی‌های خودکار از سرور.

// کلاینت
const eventSource = new EventSource('/events');

eventSource.onmessage = function(e) {
  console.log('داده:', e.data);
};

eventSource.onerror = function() {
  console.log('خطا در اتصال');
};

WebSockets

ارتباط دوطرفه بلادرنگام بین کلاینت و سرور.

const socket = new WebSocket('ws://localhost:8080');

socket.onopen = function() {
  console.log('اتصال برقرار شد');
  socket.send('پیام از کلاینت');
};

socket.onmessage = function(e) {
  console.log('پیام از سرور:', e.data);
};

socket.onclose = function() {
  console.log('اتصال بسته شد');
};

Service Workers

برای PWA (Progressive Web App) و کار آفلاین.

// ثبت service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log('Service Worker ثبت شد'))
    .catch(err => console.log('خطا:', err));
}

// sw.js
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request)
      .then(response => response || fetch(e.request))
  );
});

IndexedDB

دیتابیس NoSQL در مرورگر برای ذخیره داده‌های بزرگ.

const request = indexedDB.open('myDB', 1);

request.onupgradeneeded = function(e) {
  const db = e.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = function(e) {
  const db = e.target.result;
  const transaction = db.transaction(['users'], 'readwrite');
  const store = transaction.objectStore('users');
  
  store.add({ id: 1, name: 'علی' });
};

Notification API

نمایش نوتیفیکیشن به کاربر.

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    new Notification('عنوان', {
      body: 'متن نوتیفیکیشن',
      icon: 'icon.png'
    });
  }
});

Clipboard API

کپی و پیست متن و تصاویر.

// کپی
navigator.clipboard.writeText('متن برای کپی');

// پیست
navigator.clipboard.readText().then(text => {
  console.log('متن کلیپ‌بورد:', text);
});

Fetch API

جایگزین XMLHttpRequest برای درخواست‌های HTTP.

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('خطا:', error));

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل HTML است.

ابزارهای مرتبط