API de Stockage Persistent : Comprendre et Gérer le Quota de Stockage pour les Applications Web

L'API de Stockage Persistent (Persistent Storage API) offre aux développeurs web un moyen standardisé de demander et de gérer le quota de stockage dans le navigateur d'un utilisateur. Contrairement aux mécanismes de stockage traditionnels comme les cookies ou localStorage, qui sont souvent limités en taille et sujets à une éviction automatique, l'API de Stockage Persistent permet aux applications de demander des quantités de stockage plus importantes et, surtout, de demander que ce stockage soit persistant – ce qui signifie que le navigateur ne l'effacera pas automatiquement, même en cas de pression sur le stockage.

Pourquoi le Stockage Persistent est Important

Sur le web d'aujourd'hui, où les Progressive Web Apps (PWA) sont de plus en plus courantes et où les utilisateurs attendent des expériences riches et hors ligne, un stockage fiable est essentiel. Considérez ces scénarios :

• Accès Hors Ligne aux Documents : Une application d'édition de documents (comme Google Docs) a besoin de stocker des documents localement pour que les utilisateurs puissent continuer à travailler même sans connexion internet.
• Lecture de Médias : Les services de streaming comme Spotify ou Netflix permettent aux utilisateurs de télécharger du contenu pour une lecture hors ligne, ce qui nécessite un espace de stockage important.
• Données de Jeu : Les jeux en ligne stockent souvent la progression de l'utilisateur, les niveaux et les ressources localement pour offrir une expérience fluide et réactive.
• Mise en Cache de Grands Ensembles de Données : Les applications qui traitent de grands ensembles de données, comme les applications de cartographie (par exemple, Google Maps, les applications basées sur OpenStreetMap), bénéficient de la mise en cache des données localement pour réduire les requêtes réseau et améliorer les performances.
• Traitement de Données Local : Les applications web qui effectuent un traitement de données lourd (par exemple, l'édition d'images, le montage vidéo) peuvent stocker des résultats intermédiaires localement pour éviter des calculs répétés.

Sans stockage persistent, le navigateur pourrait effacer automatiquement le stockage utilisé par ces applications lorsque l'appareil manque d'espace, entraînant une expérience utilisateur frustrante et une perte de données potentielle. L'API de Stockage Persistent résout ce problème en fournissant un mécanisme permettant aux applications de demander un stockage persistent et de suivre l'utilisation du stockage.

Comprendre le Quota de Stockage

Chaque navigateur alloue une certaine quantité d'espace de stockage à chaque origine (domaine). Ce quota de stockage n'est pas fixe et peut varier en fonction de facteurs tels que la capacité de stockage totale de l'appareil, l'espace libre disponible et les paramètres du navigateur de l'utilisateur. L'API de Stockage fournit des méthodes pour interroger le quota de stockage disponible et la quantité de stockage déjà utilisée.

Interroger le Quota de Stockage

L'interface navigator.storage donne accès aux informations relatives au stockage. Vous pouvez utiliser la méthode estimate() pour obtenir une estimation du quota de stockage disponible et de la quantité de stockage utilisée par votre application. L'objet retourné contient les propriétés usage et quota, toutes deux mesurées en octets.

            
async function getStorageEstimate() {
  if (navigator.storage && navigator.storage.estimate) {
    const estimate = await navigator.storage.estimate();
    console.log(`Usage: ${estimate.usage}`);
    console.log(`Quota: ${estimate.quota}`);
    console.log(`Percentage used: ${(estimate.usage / estimate.quota * 100).toFixed(2)}%`);
  } else {
    console.warn("Storage estimate API not supported.");
  }
}

getStorageEstimate();

            

              
                Copy
              
            
          

Exemple : Supposons que estimate.usage retourne 10485760 (10 Mo) et que estimate.quota retourne 1073741824 (1 Go). Cela indique que votre application a utilisé 10 Mo de son quota de 1 Go, soit environ 1 % du stockage disponible.

Interpréter les Valeurs du Quota

La valeur quota représente la quantité maximale de stockage que votre application *peut* utiliser. Cependant, il est important de comprendre que ce quota n'est pas garanti. Le navigateur peut réduire le quota si l'appareil manque de stockage ou si l'utilisateur efface les données du navigateur. Par conséquent, votre application doit être conçue pour gérer les situations où le stockage disponible est inférieur au quota signalé.

Bonne Pratique : Mettez en œuvre un mécanisme pour surveiller l'utilisation du stockage et informer l'utilisateur de manière proactive si l'application approche de sa limite de stockage. Proposez des options permettant à l'utilisateur de supprimer les données inutiles ou de mettre à niveau son plan de stockage (le cas échéant).

Demander le Stockage Persistent

Même si votre application dispose d'un quota de stockage suffisant, le navigateur peut toujours effacer automatiquement les données de votre application en cas de pression sur le stockage. Pour éviter cela, vous pouvez demander un stockage persistent à l'aide de la méthode navigator.storage.persist().

            
async function requestPersistentStorage() {
  if (navigator.storage && navigator.storage.persist) {
    const isPersistent = await navigator.storage.persist();
    console.log(`Persistent storage granted: ${isPersistent}`);

    if (isPersistent) {
      console.log("Storage will not be cleared automatically.");
    } else {
      console.warn("Persistent storage not granted.");
      // Provide guidance to the user on how to enable persistent storage in their browser.
    }
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

requestPersistentStorage();

            

              
                Copy
              
            
          

La méthode persist() renvoie un booléen indiquant si la demande de stockage persistent a été accordée. Le navigateur peut demander l'autorisation de l'utilisateur avant d'accorder le stockage persistent. L'invite exacte varie en fonction du navigateur et des paramètres de l'utilisateur.

Interaction et Permission de l'Utilisateur

La décision du navigateur d'accorder le stockage persistent dépend de plusieurs facteurs, notamment :

• Engagement de l'Utilisateur : Les navigateurs sont plus susceptibles d'accorder le stockage persistent aux applications avec lesquelles l'utilisateur interagit fréquemment.
• Paramètres de l'Utilisateur : Les utilisateurs peuvent configurer les paramètres de leur navigateur pour contrôler la manière dont les demandes de stockage persistent sont traitées. Ils peuvent choisir d'accorder automatiquement toutes les demandes, de refuser toutes les demandes ou d'être invités pour chaque demande.
• Stockage Disponible : Si l'appareil est à un niveau critique de stockage, le navigateur peut refuser la demande de stockage persistent, quels que soient l'engagement ou les paramètres de l'utilisateur.
• Confiance en l'Origine : Les contextes sécurisés (HTTPS) sont généralement requis pour le stockage persistent.

Important : Ne présumez pas que la demande de stockage persistent sera toujours accordée. Votre application doit être résiliente aux situations où le stockage n'est pas persistent. Mettez en œuvre des stratégies de sauvegarde des données sur un serveur ou de gestion élégante de la perte de données.

Vérifier la Persistance Existante

Vous pouvez utiliser la méthode navigator.storage.persisted() pour vérifier si votre application a déjà obtenu le stockage persistent.

            
async function checkPersistentStorage() {
  if (navigator.storage && navigator.storage.persisted) {
    const isPersistent = await navigator.storage.persisted();
    console.log(`Persistent storage already granted: ${isPersistent}`);
  } else {
    console.warn("Persistent storage API not supported.");
  }
}

checkPersistentStorage();

            

              
                Copy
              
            
          

Technologies de Stockage et Quota

L'API de Stockage Persistent interagit avec diverses technologies de stockage disponibles dans le navigateur. Comprendre comment ces technologies sont affectées par le quota est crucial.

• IndexedDB : Une puissante base de données NoSQL pour stocker des données structurées côté client. IndexedDB est soumise aux limitations du quota de stockage et peut bénéficier considérablement du stockage persistent.
• Cache API : Utilisée par les service workers pour mettre en cache les requêtes réseau, permettant un accès hors ligne et des performances améliorées. Les caches créés via l'API Cache contribuent également au quota de stockage global.
• localStorage & sessionStorage : Simples magasins clé-valeur pour de plus petites quantités de données. Bien que localStorage soit persistent par défaut (sauf si l'utilisateur efface les données du navigateur), il est limité en taille et ne bénéficie pas des garanties de persistance fournies par l'API de Stockage Persistent autant qu'IndexedDB ou l'API Cache. Cependant, leur utilisation compte toujours dans le quota global.
• Cookies : Bien qu'il s'agisse techniquement d'un mécanisme de stockage, les cookies sont généralement utilisés pour la gestion de session et le suivi plutôt que pour stocker de grandes quantités de données. Les cookies ont leurs propres limites de taille et sont distincts du quota de stockage géré par l'API de Stockage.

Exemple : Une PWA utilise IndexedDB pour stocker les profils utilisateur et les données hors ligne, et l'API Cache pour mettre en cache les ressources statiques comme les images et les fichiers JavaScript. Demander le stockage persistent garantit que ces données en cache sont moins susceptibles d'être supprimées, offrant une expérience hors ligne cohérente.

Bonnes Pratiques pour la Gestion du Quota de Stockage

Une gestion efficace du quota de stockage est essentielle pour créer des applications web robustes et conviviales. Voici quelques bonnes pratiques à suivre :

1. Surveiller Régulièrement l'Utilisation du Stockage

Mettez en œuvre un mécanisme pour surveiller périodiquement l'utilisation du stockage de votre application à l'aide de navigator.storage.estimate(). Cela vous permet d'identifier de manière proactive les problèmes de stockage potentiels et de prendre des mesures correctives avant qu'ils n'impactent l'expérience utilisateur.

2. Mettre en Place une Interface de Gestion du Stockage

Fournissez aux utilisateurs une interface claire et intuitive pour gérer leur stockage. Cette interface devrait permettre aux utilisateurs de :

• Voir leur utilisation actuelle du stockage.
• Identifier les données qui consomment le plus de stockage.
• Supprimer les données inutiles (par exemple, les fichiers en cache, le contenu téléchargé).

Exemple : Une application de retouche photo pourrait fournir une interface qui montre aux utilisateurs une répartition du stockage utilisé par chaque photo et album, leur permettant de supprimer facilement les photos dont ils n'ont plus besoin.

3. Optimiser le Stockage des Données

Optimisez le stockage des données de votre application pour minimiser son empreinte. Cela inclut :

• Compresser les données avant de les stocker.
• Utiliser des formats de données efficaces (par exemple, Protocol Buffers, MessagePack).
• Éviter de stocker des données redondantes.
• Mettre en œuvre des politiques d'expiration des données pour supprimer automatiquement les données anciennes ou inutilisées.

4. Mettre en Place une Stratégie de Dégradation Harmonieuse

Concevez votre application pour qu'elle gère avec élégance les situations où le stockage est limité ou le stockage persistent n'est pas accordé. Cela pourrait impliquer :

• Désactiver certaines fonctionnalités qui nécessitent un stockage important.
• Afficher un message d'avertissement à l'utilisateur.
• Fournir une option pour sauvegarder les données sur un serveur.

5. Éduquer les Utilisateurs sur le Stockage Persistent

Si votre application dépend fortement du stockage persistent, informez les utilisateurs des avantages d'accorder l'autorisation de stockage persistent. Expliquez comment le stockage persistent améliore les performances de l'application et garantit que leurs données ne sont pas automatiquement effacées.

6. Gérer les Erreurs de Stockage avec Élégance

Soyez prêt à gérer les erreurs de stockage, telles que QuotaExceededError, qui peuvent survenir lorsque votre application dépasse son quota de stockage. Fournissez des messages d'erreur informatifs à l'utilisateur et suggérez des solutions possibles (par exemple, vider le stockage, mettre à niveau leur plan de stockage).

7. Envisager d'Utiliser des Service Workers

Les service workers peuvent considérablement améliorer les capacités hors ligne de votre application web en mettant en cache les ressources statiques et les réponses d'API. Lorsque vous utilisez des service workers, soyez attentif au quota de stockage et mettez en œuvre des stratégies pour gérer le cache efficacement.

Considérations sur l'Internationalisation

Lors de la conception de l'interface de gestion du stockage de votre application, tenez compte des aspects d'internationalisation (i18n) suivants :

• Formatage des Nombres : Utilisez le formatage de nombres approprié pour différentes locales lors de l'affichage des valeurs d'utilisation du stockage. Par exemple, dans certaines locales, les virgules sont utilisées comme séparateurs décimaux, tandis que dans d'autres, ce sont des points. Utilisez la méthode toLocaleString() de JavaScript pour formater les nombres selon la locale de l'utilisateur.
• Formatage de la Date et de l'Heure : Si votre application stocke des dates et des heures, formatez-les selon la locale de l'utilisateur lors de leur affichage dans l'interface de gestion du stockage. Utilisez les méthodes toLocaleDateString() et toLocaleTimeString() de JavaScript pour un formatage de date et d'heure sensible à la locale.
• Localisation des Unités : Envisagez de localiser les unités de stockage (par exemple, Ko, Mo, Go) pour correspondre aux conventions utilisées dans différentes régions. Bien que les unités standard soient largement comprises, fournir des alternatives localisées peut améliorer l'expérience utilisateur.
• Direction du Texte : Assurez-vous que votre interface de gestion du stockage prend en charge les directions de texte de gauche à droite (LTR) et de droite à gauche (RTL). Utilisez des propriétés CSS comme direction et unicode-bidi pour gérer correctement la direction du texte.

Considérations sur la Sécurité

Lorsque vous traitez avec le stockage persistent, la sécurité est primordiale. Suivez ces bonnes pratiques de sécurité :

• Utiliser HTTPS : Servez toujours votre application via HTTPS pour protéger les données en transit et prévenir les attaques de l'homme du milieu (man-in-the-middle). HTTPS est également une exigence pour le stockage persistent dans de nombreux navigateurs.
• Assainir les Entrées Utilisateur : Assainissez toutes les entrées utilisateur avant de les stocker pour prévenir les vulnérabilités de cross-site scripting (XSS).
• Chiffrer les Données Sensibles : Chiffrez les données sensibles avant de les stocker localement pour les protéger contre tout accès non autorisé. Envisagez d'utiliser l'API Web Crypto pour le chiffrement.
• Mettre en Œuvre des Pratiques de Gestion de Données Sécurisées : Suivez des pratiques de codage sécurisées pour prévenir les fuites de données et garantir l'intégrité de vos données stockées.
• Réviser et Mettre à Jour Régulièrement Votre Code : Restez à jour avec les dernières menaces et vulnérabilités de sécurité et révisez et mettez à jour régulièrement votre code pour y remédier.

Exemples dans Différentes Régions

Voyons comment la gestion du quota de stockage peut différer selon les régions :

• Régions à Faible Bande Passante : Dans les régions où la bande passante internet est limitée ou coûteuse, les utilisateurs peuvent être plus dépendants de l'accès hors ligne et de la mise en cache. Par conséquent, les applications devraient privilégier une utilisation efficace du stockage et fournir des conseils clairs sur la gestion des données en cache. Par exemple, dans certaines parties de l'Afrique ou de l'Asie du Sud-Est, les coûts des données sont une préoccupation majeure.
• Régions avec des Réglementations sur la Confidentialité des Données : Dans les régions avec des réglementations strictes sur la confidentialité des données, comme l'Union européenne (RGPD), les applications doivent être transparentes sur la manière dont elles utilisent le stockage et obtenir le consentement explicite des utilisateurs avant de stocker des données personnelles. Elles doivent également offrir aux utilisateurs la possibilité d'accéder, de rectifier et de supprimer leurs données.
• Régions avec des Appareils Plus Anciens : Dans les régions où les utilisateurs sont plus susceptibles d'utiliser des appareils plus anciens ou moins puissants, les applications doivent être particulièrement attentives à l'utilisation du stockage et optimiser le stockage de leurs données pour minimiser l'impact sur les performances de l'appareil.
• Régions avec des Exigences Linguistiques Spécifiques : Les interfaces de gestion du stockage doivent être entièrement localisées, en tenant compte des formats de nombres (par exemple, l'utilisation de virgules ou de points pour les séparateurs décimaux), des formats de date/heure et de la direction correcte du texte.

Exemple : Une application d'actualités ciblant les utilisateurs en Inde pourrait permettre aux utilisateurs de télécharger des articles pour une lecture hors ligne, reconnaissant le potentiel d'une connectivité internet intermittente. L'application fournirait également une interface de gestion du stockage claire dans plusieurs langues indiennes, permettant aux utilisateurs de supprimer facilement les articles téléchargés pour libérer de l'espace.

L'Avenir des API de Stockage

L'API de Stockage Persistent est en constante évolution, et de nouvelles fonctionnalités et capacités sont ajoutées pour répondre aux demandes croissantes des applications web modernes. Voici quelques développements futurs potentiels :

• Gestion Améliorée du Quota de Stockage : Un contrôle plus granulaire sur le quota de stockage, permettant aux applications d'allouer des quantités de stockage spécifiques à différents types de données.
• Intégration avec le Stockage Cloud : Une intégration transparente avec les services de stockage cloud, permettant aux applications de stocker des données dans le cloud de manière transparente lorsque le stockage local est limité.
• Synchronisation de Données Avancée : Des mécanismes de synchronisation de données plus sophistiqués, permettant aux applications de synchroniser efficacement les données entre le stockage local et le cloud.
• Chiffrement de Stockage Standardisé : Une API standardisée pour chiffrer les données stockées localement, simplifiant le processus de sécurisation des données sensibles.

Conclusion

L'API de Stockage Persistent est un outil puissant pour les développeurs web qui souhaitent créer des applications web robustes et conviviales capables d'offrir des expériences hors ligne riches. En comprenant la gestion du quota de stockage, en demandant un stockage persistent et en suivant les bonnes pratiques en matière de stockage de données et de sécurité, vous pouvez créer des applications fiables, performantes et respectueuses de la vie privée des utilisateurs. Alors que le web continue d'évoluer, l'API de Stockage Persistent jouera un rôle de plus en plus important dans la création de la prochaine génération d'applications web.

Lectures Complémentaires

• MDN Web Docs : API de Stockage
• web.dev : Le stockage pour le web
• WICG : API de Quota de Stockage