Stockage persistant

Le stockage persistant peut aider à protéger les données critiques contre l'éviction et à réduire le risque de perte de données.

Pete LePage

En cas de pression sur le stockage, par exemple lorsque l'espace disque est faible, les navigateurs évinceront généralement les données, y compris celles de l'API Cache et d'IndexedDB, à partir 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 sa fiabilité en supprimant les ressources nécessaires à son fonctionnement, ce qui nuit à l'expérience utilisateur.

Heureusement, les recherches de l'équipe Chrome montrent que les données sont très rarement effacées automatiquement par Chrome. Les utilisateurs effacent beaucoup plus souvent le stockage manuellement. Ainsi, si un utilisateur visite régulièrement votre site, il est peu probable que vos données soient évincées. Pour empêcher le navigateur de supprimer vos données, vous pouvez demander que le stockage de l'ensemble de votre site soit marqué comme persistant.

Le stockage persistant est compatible avec de nombreux navigateurs modernes.

Pour en savoir plus sur l'éviction, la quantité de données que vous pouvez stocker et comment gérer les limites de quota , 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 le 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 stockage soit marqué comme persistant est lorsque vous enregistrez des données utilisateur critiques. Idéalement, la requête doit être encapsulée dans un geste de l'utilisateur. Ne demandez pas de stockage persistant lors du chargement de page ou dans un autre code d'amorçage. Le navigateur peut demander l'autorisation à l'utilisateur. Si l'utilisateur n'effectue aucune action qu'il pense devoir enregistrer, l'invite peut être déroutante et il est probable qu'il refuse la demande. De plus, ne demandez pas trop souvent. Si l'utilisateur a décidé de ne pas accorder l'autorisation, ne le demandez pas immédiatement lors de l'enregistrement suivant.

Demander un stockage persistant

Pour demander un stockage persistant pour les données de votre site, appelez navigator.storage.persist(). Il 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 traité 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. En revanche, si un site est considéré comme important, l'autorisation de stockage persistant est automatiquement accordée. Sinon, elle est refusée en mode silencieux.

Voici quelques-unes des heuristiques permettant de déterminer si un site est important :

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

Si la demande a été refusée, elle peut être demandée à nouveau ultérieurement et sera évaluée à l'aide des mêmes heuristiques.

Firefox

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

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

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

• API Cache
• Cookies
• Espace de stockage DOM (espace de stockage local)
• API File System (système de fichiers fourni par le navigateur et mis en bac à sable)
• IndexedDB
• Service workers
• Cache d'application (obsolète, ne pas utiliser)
• WebSQL (obsolète, ne pas utiliser)

Comment désactiver le stockage persistant

Pour le moment, il n'existe aucun moyen de dire au navigateur que vous n'avez plus besoin de stockage persistant.

Conclusion

Les recherches de l'équipe Chrome montrent 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 ne sont pas stockées dans le cloud ou qui entraîneront une perte de données importante, le stockage persistant peut être un outil utile pour s'assurer que vos données ne sont pas supprimées par le navigateur lorsque l'appareil local est confronté à une pression sur le stockage. N'oubliez pas de ne demander un stockage persistant que lorsque l'utilisateur est le plus susceptible de le souhaiter.

Merci

Merci à Victor Costan et Joe Medley d'avoir examiné ce document. Merci à Chris Wilson, qui a écrit la version originale de ce document, qui est apparue pour la première fois sur WebFundamentals.