Jeff Bruchado
Retour au blog

Web APIs Modernes du Navigateur Que Tout Développeur JavaScript Devrait Connaître

Salut HaWkers, les navigateurs modernes offrent un arsenal impressionnant d'APIs natives que beaucoup de développeurs méconnaissent. Ces APIs peuvent remplacer des bibliothèques lourdes et ajouter des fonctionnalités avancées à vos applications.

Saviez-vous qu'il est possible de détecter quand des éléments entrent dans la viewport, d'exécuter du code dans des threads séparés, ou d'accéder au système de fichiers local, tout ça avec du JavaScript natif ?

Pourquoi Utiliser les APIs Natives du Navigateur

Avant d'installer une dépendance de plus, considérez ce que le navigateur offre déjà gratuitement.

Avantages des APIs Natives

Performance :

  • Zéro téléchargement supplémentaire pour l'utilisateur
  • Implémentations optimisées en code natif
  • Bundle size réduit

Maintenance :

  • Pas de dépendances à mettre à jour
  • APIs standardisées par le W3C
  • Documentation officielle sur MDN

Compatibilité :

  • La majorité des APIs modernes ont un support de 95%+ des navigateurs
  • Polyfills disponibles quand nécessaire

Intersection Observer API

Cette API permet de détecter quand des éléments entrent ou sortent de la viewport de manière extrêmement efficace.

Lazy Loading d'Images

// Implémentation native de lazy loading
class ImageLazyLoader {
  constructor(options = {}) {
    this.options = {
      rootMargin: '50px 0px',
      threshold: 0.01,
      ...options
    };

    this.observer = new IntersectionObserver(
      this.handleIntersection.bind(this),
      this.options
    );
  }

  handleIntersection(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.dataset.src;
        const srcset = img.dataset.srcset;

        if (src) {
          img.src = src;
          img.removeAttribute('data-src');
        }

        if (srcset) {
          img.srcset = srcset;
          img.removeAttribute('data-srcset');
        }

        img.classList.add('loaded');
        this.observer.unobserve(img);
      }
    });
  }

  observe(selector = 'img[data-src]') {
    const images = document.querySelectorAll(selector);
    images.forEach(img => this.observer.observe(img));
  }

  disconnect() {
    this.observer.disconnect();
  }
}

// Utilisation
const lazyLoader = new ImageLazyLoader();
lazyLoader.observe();

Animations au Scroll (Scroll Reveal)

// Révélation d'éléments au scroll
function initScrollReveal() {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');

          // Délai basé sur data-delay
          const delay = entry.target.dataset.delay || 0;
          entry.target.style.transitionDelay = `${delay}ms`;
        }
      });
    },
    {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    }
  );

  document.querySelectorAll('[data-reveal]').forEach(el => {
    observer.observe(el);
  });
}

// CSS correspondant
const styles = `
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  [data-reveal].visible {
    opacity: 1;
    transform: translateY(0);
  }
`;

Infinite Scroll

// Implémentation de scroll infini
class InfiniteScroll {
  constructor(container, loadMore) {
    this.container = container;
    this.loadMore = loadMore;
    this.loading = false;
    this.hasMore = true;

    this.sentinel = document.createElement('div');
    this.sentinel.className = 'infinite-scroll-sentinel';
    this.container.appendChild(this.sentinel);

    this.observer = new IntersectionObserver(
      this.handleIntersection.bind(this),
      { rootMargin: '100px' }
    );

    this.observer.observe(this.sentinel);
  }

  async handleIntersection(entries) {
    const entry = entries[0];

    if (entry.isIntersecting && !this.loading && this.hasMore) {
      this.loading = true;
      this.showLoader();

      try {
        const hasMoreData = await this.loadMore();
        this.hasMore = hasMoreData;

        if (!hasMoreData) {
          this.observer.disconnect();
          this.showEndMessage();
        }
      } catch (error) {
        console.error('Erreur lors du chargement :', error);
      } finally {
        this.loading = false;
        this.hideLoader();
      }
    }
  }

  showLoader() {
    this.sentinel.innerHTML = '<div class="loader">Chargement...</div>';
  }

  hideLoader() {
    this.sentinel.innerHTML = '';
  }

  showEndMessage() {
    this.sentinel.innerHTML = '<p>Fin de la liste</p>';
  }
}

// Utilisation
const feed = document.querySelector('.feed');
let page = 1;

const infiniteScroll = new InfiniteScroll(feed, async () => {
  const response = await fetch(`/api/posts?page=${page}`);
  const data = await response.json();

  data.posts.forEach(post => {
    feed.insertBefore(createPostElement(post), feed.lastChild);
  });

  page++;
  return data.hasMore;
});

Web Workers API

Les Web Workers permettent d'exécuter du JavaScript dans des threads séparés, sans bloquer l'UI.

Traitement Lourd en Background

// worker.js - Fichier séparé
self.addEventListener('message', async (event) => {
  const { type, data } = event.data;

  switch (type) {
    case 'PROCESS_DATA':
      const result = processLargeDataset(data);
      self.postMessage({ type: 'PROCESS_COMPLETE', result });
      break;

    case 'CALCULATE':
      const calculation = heavyCalculation(data);
      self.postMessage({ type: 'CALCULATION_COMPLETE', result: calculation });
      break;
  }
});

function processLargeDataset(data) {
  // Traitement qui prendrait des secondes sur le thread principal
  return data.map(item => {
    return {
      ...item,
      processed: true,
      hash: generateHash(item),
      analytics: calculateAnalytics(item)
    };
  });
}

function heavyCalculation(numbers) {
  // Calcul intensif
  return numbers.reduce((acc, num) => {
    for (let i = 0; i < 1000000; i++) {
      acc += Math.sin(num) * Math.cos(num);
    }
    return acc;
  }, 0);
}
// main.js - Thread principal
class WorkerManager {
  constructor(workerPath, poolSize = navigator.hardwareConcurrency || 4) {
    this.workers = [];
    this.queue = [];
    this.activeJobs = new Map();

    for (let i = 0; i < poolSize; i++) {
      const worker = new Worker(workerPath);
      worker.busy = false;

      worker.addEventListener('message', (event) => {
        this.handleWorkerMessage(worker, event);
      });

      this.workers.push(worker);
    }
  }

  handleWorkerMessage(worker, event) {
    const job = this.activeJobs.get(worker);

    if (job) {
      job.resolve(event.data);
      this.activeJobs.delete(worker);
    }

    worker.busy = false;
    this.processQueue();
  }

  async execute(type, data) {
    return new Promise((resolve, reject) => {
      const job = { type, data, resolve, reject };

      const availableWorker = this.workers.find(w => !w.busy);

      if (availableWorker) {
        this.runJob(availableWorker, job);
      } else {
        this.queue.push(job);
      }
    });
  }

  runJob(worker, job) {
    worker.busy = true;
    this.activeJobs.set(worker, job);
    worker.postMessage({ type: job.type, data: job.data });
  }

  processQueue() {
    if (this.queue.length === 0) return;

    const availableWorker = this.workers.find(w => !w.busy);
    if (availableWorker) {
      const job = this.queue.shift();
      this.runJob(availableWorker, job);
    }
  }

  terminate() {
    this.workers.forEach(worker => worker.terminate());
  }
}

// Utilisation
const workerManager = new WorkerManager('/worker.js');

async function processData() {
  const largeDataset = generateLargeDataset();

  console.time('Worker processing');
  const result = await workerManager.execute('PROCESS_DATA', largeDataset);
  console.timeEnd('Worker processing');

  return result;
}

File System Access API

Cette API permet de lire et écrire des fichiers sur le système local de l'utilisateur.

Éditeur de Texte avec Sauvegarde Locale

class FileEditor {
  constructor() {
    this.fileHandle = null;
    this.content = '';
    this.unsavedChanges = false;
  }

  async openFile() {
    try {
      const [fileHandle] = await window.showOpenFilePicker({
        types: [
          {
            description: 'Fichiers Texte',
            accept: {
              'text/*': ['.txt', '.md', '.json', '.js', '.ts', '.css', '.html']
            }
          }
        ],
        multiple: false
      });

      this.fileHandle = fileHandle;
      const file = await fileHandle.getFile();
      this.content = await file.text();

      return {
        name: file.name,
        content: this.content,
        lastModified: new Date(file.lastModified)
      };
    } catch (error) {
      if (error.name !== 'AbortError') {
        throw error;
      }
    }
  }

  async saveFile() {
    if (!this.fileHandle) {
      return this.saveFileAs();
    }

    try {
      const writable = await this.fileHandle.createWritable();
      await writable.write(this.content);
      await writable.close();

      this.unsavedChanges = false;
      return true;
    } catch (error) {
      console.error('Erreur lors de la sauvegarde :', error);
      throw error;
    }
  }

  async saveFileAs() {
    try {
      const fileHandle = await window.showSaveFilePicker({
        types: [
          {
            description: 'Fichier Texte',
            accept: { 'text/plain': ['.txt'] }
          },
          {
            description: 'Markdown',
            accept: { 'text/markdown': ['.md'] }
          },
          {
            description: 'JavaScript',
            accept: { 'text/javascript': ['.js'] }
          }
        ]
      });

      this.fileHandle = fileHandle;
      return this.saveFile();
    } catch (error) {
      if (error.name !== 'AbortError') {
        throw error;
      }
    }
  }

  updateContent(newContent) {
    this.content = newContent;
    this.unsavedChanges = true;
  }
}

// Utilisation
const editor = new FileEditor();

document.getElementById('open-btn').addEventListener('click', async () => {
  const file = await editor.openFile();
  if (file) {
    document.getElementById('editor').value = file.content;
    document.getElementById('filename').textContent = file.name;
  }
});

document.getElementById('save-btn').addEventListener('click', async () => {
  await editor.saveFile();
  showNotification('Fichier sauvegardé !');
});

Clipboard API

API moderne pour interagir avec le presse-papiers.

Copier dans le Presse-papiers avec Feedback

class ClipboardManager {
  static async copy(text) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (error) {
      // Fallback pour navigateurs anciens
      return this.fallbackCopy(text);
    }
  }

  static fallbackCopy(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();

    try {
      document.execCommand('copy');
      return true;
    } catch (error) {
      return false;
    } finally {
      document.body.removeChild(textarea);
    }
  }

  static async copyRichContent(html, plainText) {
    try {
      const blob = new Blob([html], { type: 'text/html' });
      const textBlob = new Blob([plainText], { type: 'text/plain' });

      await navigator.clipboard.write([
        new ClipboardItem({
          'text/html': blob,
          'text/plain': textBlob
        })
      ]);

      return true;
    } catch (error) {
      return this.copy(plainText);
    }
  }

  static async paste() {
    try {
      return await navigator.clipboard.readText();
    } catch (error) {
      console.error('Erreur lors du collage :', error);
      return null;
    }
  }
}

// Composant de bouton de copie
function createCopyButton(targetSelector) {
  const button = document.createElement('button');
  button.className = 'copy-btn';
  button.innerHTML = '📋 Copier';

  button.addEventListener('click', async () => {
    const target = document.querySelector(targetSelector);
    const text = target.textContent || target.value;

    const success = await ClipboardManager.copy(text);

    if (success) {
      button.innerHTML = '✅ Copié !';
      button.classList.add('success');

      setTimeout(() => {
        button.innerHTML = '📋 Copier';
        button.classList.remove('success');
      }, 2000);
    }
  });

  return button;
}

Broadcast Channel API

Permet la communication entre différents onglets/fenêtres de la même origine.

Synchronisation Entre Onglets

// Synchronisation d'état entre onglets
class TabSync {
  constructor(channelName) {
    this.channel = new BroadcastChannel(channelName);
    this.listeners = new Map();

    this.channel.addEventListener('message', (event) => {
      const { type, payload } = event.data;
      const handler = this.listeners.get(type);

      if (handler) {
        handler(payload);
      }
    });
  }

  send(type, payload) {
    this.channel.postMessage({ type, payload });
  }

  on(type, handler) {
    this.listeners.set(type, handler);
  }

  off(type) {
    this.listeners.delete(type);
  }

  close() {
    this.channel.close();
  }
}

// Utilisation : Synchroniser la déconnexion entre onglets
const authSync = new TabSync('auth-channel');

authSync.on('LOGOUT', () => {
  // Un autre onglet s'est déconnecté
  window.location.href = '/login';
});

authSync.on('USER_UPDATED', (user) => {
  // Met à jour les données utilisateur dans tous les onglets
  updateUserInterface(user);
});

// Lors de la déconnexion
function logout() {
  clearSession();
  authSync.send('LOGOUT');
  window.location.href = '/login';
}

// Synchroniser le thème entre onglets
const themeSync = new TabSync('theme-channel');

themeSync.on('THEME_CHANGED', (theme) => {
  document.documentElement.setAttribute('data-theme', theme);
});

function setTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem('theme', theme);
  themeSync.send('THEME_CHANGED', theme);
}

Resize Observer API

Détecte les changements de taille des éléments de manière efficace.

Composants Responsifs Dynamiques

// Container queries natives avec ResizeObserver
class ResponsiveComponent {
  constructor(element, breakpoints = {}) {
    this.element = element;
    this.breakpoints = {
      sm: 480,
      md: 768,
      lg: 1024,
      xl: 1280,
      ...breakpoints
    };

    this.observer = new ResizeObserver(entries => {
      for (const entry of entries) {
        this.updateClasses(entry.contentRect.width);
      }
    });

    this.observer.observe(element);
  }

  updateClasses(width) {
    // Supprime toutes les classes de breakpoint
    Object.keys(this.breakpoints).forEach(bp => {
      this.element.classList.remove(`container-${bp}`);
    });

    // Ajoute la classe appropriée
    if (width >= this.breakpoints.xl) {
      this.element.classList.add('container-xl');
    } else if (width >= this.breakpoints.lg) {
      this.element.classList.add('container-lg');
    } else if (width >= this.breakpoints.md) {
      this.element.classList.add('container-md');
    } else if (width >= this.breakpoints.sm) {
      this.element.classList.add('container-sm');
    }
  }

  disconnect() {
    this.observer.disconnect();
  }
}

// Auto-initialiser sur les éléments avec data-responsive
document.querySelectorAll('[data-responsive]').forEach(el => {
  new ResponsiveComponent(el);
});

Conclusion

Les Web APIs natives du navigateur ont significativement évolué et offrent désormais des fonctionnalités qui nécessitaient auparavant des bibliothèques externes. Maîtriser ces APIs permet :

  • De réduire les dépendances et le bundle size
  • D'améliorer la performance de l'application
  • De créer des expériences plus riches

Avant d'ajouter une nouvelle dépendance, vérifiez si le navigateur n'offre pas déjà ce dont vous avez besoin nativement.

Si vous voulez continuer à étendre vos connaissances en JavaScript moderne, je vous recommande de jeter un œil à un autre article : State of JavaScript 2025 où vous découvrirez les tendances de l'écosystème.

C'est parti ! 🦅

💻 Maîtrisez JavaScript Vraiment

Les connaissances que vous avez acquises dans cet article ne sont que le début. Il y a des techniques, des patterns et des pratiques qui transforment les développeurs débutants en professionnels recherchés.

Investissez dans Votre Avenir

J'ai préparé un matériel complet pour vous faire maîtriser JavaScript :

Options de paiement :

  • €9,90 (paiement unique)

📖 Voir le Contenu Complet

Commentaires (0)

Cet article n'a pas encore de commentaires. Soyez le premier!

Ajouter des commentaires