Stockage persistant

Le stockage persistant peut aider à protéger les données critiques contre les évictions et à réduire les risques de perte de données.

Pete LePage

Lorsqu'ils sont confrontés à une pression de stockage telle qu'un espace disque faible, les navigateurs évincent les données, y compris de l'API Cache et d'IndexedDB, de l'origine la moins récemment utilisée. Cela peut entraîner une perte de données si l'application n'a pas synchronisé les données avec le serveur, et réduire la fiabilité de l'application en supprimant les ressources nécessaires au fonctionnement de l'application, ce qui nuit à l'expérience utilisateur.

Heureusement, une étude menée par l'équipe Chrome montre que les données sont très rarement effacées automatiquement par Chrome. Il est beaucoup plus courant pour les utilisateurs d'effacer manuellement l'espace de stockage. Ainsi, si un utilisateur se rend régulièrement sur votre site, il est peu probable que vos données soient supprimées. Pour empêcher le navigateur de supprimer vos données, vous pouvez demander à ce que le stockage de l'ensemble de votre site soit marqué comme persistant.

Le stockage persistant est compatible avec de nombreux navigateurs récents.

Pour en savoir plus sur l'éviction, la quantité de données pouvant être stockées et la gestion des limites de quota, consultez la section Stockage pour le Web.

Vérifier si l'espace de stockage de votre site a été marqué comme persistant

Vous pouvez utiliser JavaScript pour déterminer si l'espace de stockage de votre site a été marqué comme persistant. L'appel de navigator.storage.persisted() renvoie une promesse qui se résout avec une valeur booléenne, indiquant si le stockage a été marqué comme persistant.

// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persisted();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

Quand dois-je demander un stockage persistant ?

Le meilleur moment pour demander que votre espace de stockage soit marqué comme persistant est lorsque vous enregistrez les données utilisateur critiques. Idéalement, la requête doit être encapsulée dans un geste utilisateur. Ne demandez pas de stockage persistant au chargement de la page, ou dans un autre code d'amorçage, le navigateur peut demander l'autorisation de l'utilisateur. Si l'utilisateur n'effectue aucune action qui, selon lui, doit être enregistrée, l'invite risque de prêter à confusion et il risque de la rejeter. De plus, n'envoyez pas d'invite trop souvent. Si l'utilisateur a décidé de ne pas accorder son autorisation, n'invitez pas de nouveau l'utilisateur à l'enregistrer immédiatement.

Demander un stockage persistant

Pour demander un stockage persistant des données de votre site, appelez navigator.storage.persist(). Elle renvoie une promesse qui se résout avec une valeur booléenne, indiquant si l'autorisation de stockage persistant a été accordée.

// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persist();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

Comment l'autorisation est-elle accordée ?

Le stockage persistant est considéré comme une autorisation. Les navigateurs utilisent différents facteurs pour décider d'accorder ou non des autorisations de stockage persistant.

Chrome et autres navigateurs basés sur Chromium

Chrome et la plupart des autres navigateurs basés sur Chromium gèrent automatiquement la demande d'autorisation et n'affichent aucune invite à l'utilisateur. À la place, si un site est considéré comme important, l'autorisation de stockage persistant est automatiquement accordée. Sinon, elle est refusée sans notification.

Les méthodes heuristiques permettant de déterminer si un site est important sont les suivantes:

• Quel est le niveau d'engagement sur le site ?
• Le site a-t-il été installé ou ajouté à vos favoris ?
• Le site a-t-il été autorisé à afficher des notifications ?

Si la requête a été refusée, elle pourra être demandée à nouveau ultérieurement et sera évaluée à l'aide de la même heuristique.

Firefox

Firefox délègue la demande d'autorisation à l'utilisateur. Lorsqu'un stockage persistant est demandé, un pop-up d'interface utilisateur s'affiche pour demander à l'utilisateur s'il autorise le site à stocker des données dans ce type de stockage.

Quel stockage est protégé par le stockage persistant ?

Si l'autorisation de stockage persistant est accordée, le navigateur n'élimine pas les données stockées dans:

• API Cache
• Cookies
• Stockage DOM (stockage local)
• API File System (système de fichiers en bac à sable fourni par le navigateur)
• IndexedDB
• Service workers
• Cache d'application (obsolète, ne doit pas être utilisé)
• WebSQL (obsolète, ne doit pas être utilisé)

Désactiver le stockage persistant

À l'heure actuelle, il n'existe aucun moyen programmatique d'indiquer au navigateur que vous n'avez plus besoin d'espace de stockage persistant.

Conclusion

Une étude menée par l'équipe Chrome montre que, bien que cela soit possible, les données stockées sont rarement effacées automatiquement par Chrome. Pour protéger les données critiques qui pourraient ne pas être stockées dans le cloud ou entraîner une perte importante de données, le stockage persistant peut être un outil utile pour garantir que vos données ne sont pas supprimées par le navigateur lorsque l'appareil local est soumis à une pression de stockage. N'oubliez pas que vous ne devez demander un espace de stockage persistant que lorsque l'utilisateur est le plus susceptible de le vouloir.

Merci

Nous remercions Victor Costan et Joe Medley pour la révision de cet article. Merci à Chris Wilson qui a rédigé la version originale de cet article paru pour la première fois sur WebFundamentals.

Image principale par Umberto sur Unsplash