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.

Lorsqu'ils sont confrontés à des contraintes de stockage telles qu'un manque d'espace disque, les navigateurs généralement évincer des données, y compris de l'API Cache et de 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é de données avec le serveur et réduit la fiabilité de l'application de supprimant les ressources nécessaires au fonctionnement de l'application, ce qui entraîne des expériences utilisateur négatives.

Heureusement, des recherches menées par l'équipe Chrome montrent que les données effacés automatiquement par Chrome. Il est beaucoup plus fréquent que les utilisateurs vider l'espace de stockage. Ainsi, si un utilisateur visite régulièrement votre site, que vos données seront évincées. Pour empêcher la suppression par le navigateur vos données, demandez à ce que l'ensemble de l'espace de stockage de votre site soit marqué persistante.

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

Navigateurs pris en charge

  • Chrome: 55 <ph type="x-smartling-placeholder">
  • Edge: 79 <ph type="x-smartling-placeholder">
  • Firefox: 57 <ph type="x-smartling-placeholder">
  • Safari: 15.2. <ph type="x-smartling-placeholder">

Source

Pour en savoir plus sur l'éviction, la quantité de stockage que vous pouvez stocker et la gestion des quotas les limites, consultez la section Stockage pour le Web.

Vérifier si le 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 persistantes. En appelant navigator.storage.persisted(), vous obtenez une promesse renvoie une valeur booléenne indiquant si le stockage a été marqué comme conservées.

// 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 des données utilisateur essentielles. Idéalement, la requête doit être encapsulée geste. Ne demandez pas de stockage persistant au chargement de la page ou dans un autre mode d'amorçage le navigateur peut demander l'autorisation à l'utilisateur. Si l'utilisateur n'effectue pas une opération qui, selon lui, doit être enregistrée, la requête peut être déroutant, et il serait susceptible de rejeter la demande. De plus, ne demandez pas trop fréquemment. Si l'utilisateur a décidé de ne pas accorder son autorisation, ne l'autorisez pas lors du prochain enregistrement.

Demander un stockage persistant

Pour demander un stockage permanent des données de votre site, appelez navigator.storage.persist() Elle renvoie une promesse qui se résout avec une Booléen 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, ainsi que la plupart des autres navigateurs basés sur Chromium, gèrent automatiquement demande d'autorisation et n'affichez aucune invite à l’utilisateur. Au lieu de cela, 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 du site ?
  • Le site a-t-il été installé ou ajouté à vos favoris ?
  • Le site a-t-il été autorisé à afficher des notifications ?

Si la demande a été refusée, vous pourrez faire une nouvelle demande évaluées à l'aide de la même heuristique.

Firefox

Firefox délègue la demande d'autorisation à l'utilisateur. Lorsque le stockage sur disque persistant est demandée, une fenêtre pop-up d'UI lui demande s'il peut autoriser le site pour stocker des données dans un espace de stockage persistant.

<ph type="x-smartling-placeholder">
</ph> Pop-up affiché par Firefox lorsqu&#39;un site demande un stockage persistant. <ph type="x-smartling-placeholder">
</ph> Pop-up affiché par Firefox lorsqu'un site demande un stockage persistant.

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

Si l'autorisation de stockage persistant est accordée, le navigateur n'évince pas 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
  • App Cache (obsolète, ne doit pas être utilisé)
  • WebSQL (obsolète, ne doit pas être utilisé)

Désactiver le stockage persistant

Pour le moment, il n'existe aucun moyen programmatique d'indiquer au navigateur que vous ne disposez plus ont besoin d'un espace de stockage persistant.

Conclusion

Les études menées par l'équipe Chrome montrent que, bien que possible, les données stockées rarement effacés automatiquement par Chrome. Pour protéger les données critiques qui peuvent ne seront pas stockées dans le cloud ou entraîneront une perte de données importante, le stockage persistant peut être un outil utile pour vous assurer que vos données par le navigateur lorsque l'appareil local est soumis à une pression de stockage. N'oubliez pas : ne demandez le stockage persistant que lorsque l'utilisateur est le plus susceptible vous le souhaitez.

Merci

Nous remercions tout particulièrement Victor Costan et Joe Medley pour la lecture de cet article. Un grand merci à Chris Wilson, qui a rédigé la version originale de cet article est apparu pour la première fois sur WebFundamentals.

Image héros par Umberto sur Unsplash