Stocker des données sur l’appareil

Les applications web progressives (PWA) offrent des options robustes pour stocker des données localement afin de permettre aux utilisateurs de continuer à travailler même si la connexion réseau devient instable ou hors connexion.

Il existe plusieurs façons pour une PWA de stocker des données sur un appareil, telles que le stockage local, l’API cache ou IndexedDB.

Le tableau suivant décrit les différentes options, et le reste de cet article aborde plus de détails et de scénarios d’utilisation pour chaque option.

Option de stockage	Description
Stockage web	Le stockage web a deux types : session et local. Le stockage web est utile pour stocker de petites quantités de données à partir du code frontal de votre application. Les données sont structurées sous forme de paires clé-valeur et sont uniquement disponibles pour l’origine de l’application actuelle. Dans le cas du stockage de session, les données sont effacées à la fin de la session, par exemple lorsque l’application est fermée ou lorsque l’utilisateur accède à une autre origine dans la même fenêtre ou le même onglet. Le stockage local persiste jusqu’à ce que l’application supprime les données.
IndexedDB	IndexedDB est une API permettant de stocker de grandes quantités de données structurées. L’API est asynchrone et peut être utilisée à la fois à partir du code frontal de votre application et du code de travail de service. Utilisez l’API IndexedDB pour stocker une quantité significative de données structurées sur le client, ou de données binaires, telles que des fichiers ou des objets multimédias chiffrés.
Cache	L’API cache peut être utilisée pour gérer les ressources mises en cache. L’API cache est basée sur promesse et permet aux développeurs de stocker et de récupérer de nombreuses ressources web : HTML, CSS, JavaScript, images, JSON, etc. En règle générale, l’API cache est utilisée dans le contexte d’un worker de service, mais elle est également disponible pour le code frontal de votre application.
Accès au système de fichiers	L’API d’accès au système de fichiers permet à votre PWA de lire les fichiers et dossiers sur l’appareil de l’utilisateur et d’y enregistrer les modifications.

Remarque : N’utilisez pas WebSQL ou Le cache d’application. Bien qu’il s’agit de deux autres mécanismes de stockage de navigateur, ils ont tous deux été dépréciés. Au lieu de WebSQL, utilisez IndexedDB. Au lieu de Cache d’application, utilisez l’API Cache.

Stockage web

Le stockage web est utile pour stocker de petites quantités de données de chaîne sur l’appareil de l’utilisateur. La simplicité du système de paire clé-valeur du stockage Web facilite son utilisation.

Le stockage web fonctionne de manière synchrone uniquement dans le thread principal de votre application. Cela signifie que le stockage Web n’est pas disponible pour une utilisation dans les workers de service, et que l’utilisation intensive du stockage Web peut créer des problèmes de performances pour votre application.

Chaque type de stockage web, de session et local, est conservé en tant que magasin de données distinct isolé du domaine qui l’a créé.

• sessionStorage persiste uniquement pendant la durée de la session, par exemple, lorsque le navigateur est ouvert, ce qui inclut le moment où la page est actualisée.
• localStorage persiste jusqu’à ce que les données soient supprimées par le code de l’application, l’utilisateur ou le navigateur.

Le code suivant montre comment utiliser localStorage, qui est similaire à la façon dont sessionStorage est utilisé :

const browserInformation = {
  name: 'Microsoft Edge',
  version: 108
};

localStorage.setItem('browser', JSON.stringify(browserInformation));

Le code ci-dessus stocke un objet JavaScript sous forme de chaîne JSON dans à localStorage l’aide de la setItem() méthode et affecte une clé égale à browser. Vous pouvez récupérer les informations à partir de à l’aide de localStorage la getItem() méthode comme indiqué ci-dessous :

const value = localStorage.getItem('browser');

const browserInformation = JSON.parse(value);

Pour plus d’informations, consultez API de stockage web sur MDN.

IndexedDB

IndexedDB est une API asynchrone permettant de stocker des données structurées qui peuvent être utilisées dans le code frontal ou le code de travail de service de votre application. Utilisez l’API IndexedDB pour stocker une quantité importante de données structurées sur le client, ou de données binaires, telles que des fichiers ou des objets multimédias chiffrés.

IndexedDB est la meilleure option pour stocker des données dans votre PWA, car l’utilisation de l’API ne ralentit pas votre application en bloquant le thread principal, et elle peut être utilisée à la fois à partir du code frontal et du worker de service de votre application.

L’utilisation d’IndexedDB est plus complexe que l’utilisation du stockage web et nécessite les étapes suivantes pour stocker des données :

1. Ouvrez une base de données à l’aide de la window.indexedDB.open() fonction .
2. Créez un magasin d’objets dans la base de données à l’aide de la IDBDatabase.createObjectStore() fonction .
3. Démarrez une transaction pour stocker des données à l’aide de la IDBDatabase.transaction() fonction .
4. Attendez la fin de l’opération en écoutant un événement.

Pour en savoir plus et afficher des exemples de code, consultez Utilisation d’IndexedDB sur MDN.

Cache

L’API cache est un système permettant de stocker et de récupérer les demandes et les réponses réseau dans le code frontal ou le service worker de votre application. Il peut être utilisé pour stocker des ressources, telles que des images et des fichiers, localement sur l’appareil de l’utilisateur. Cela peut faire fonctionner votre application même lorsqu’elle est hors connexion, ou améliorer ses performances en réduisant le nombre de demandes réseau nécessaires au rendu de l’application.

L’extrait de code suivant montre comment écouter l’événement fetch dans un worker de service et stocker la réponse du serveur à l’aide de l’API cache :

self.addEventListener("fetch", event => {
  async function cacheAndReturnRequest() {
    // Get the response from the server.
    const fetchResponse = await fetch(event.request.url);
    // Open the app's cache.
    const cache = await caches.open("cache-name");
    // Put the response in cache.
    cache.put(event.request.url, fetchResponse.clone());
    // And return the response.
    return fetchResponse.
  }

  event.respondWith(cacheAndReturnRequest());
});

Pour découvrir d’autres scénarios d’API de cache utiles, consultez Utiliser un worker de service pour gérer les demandes réseau.

Accès au système de fichiers

L’API d’accès au système de fichiers permet à votre application d’accéder aux fichiers sur l’appareil de l’utilisateur d’une manière similaire aux applications natives. Il peut être utilisé pour créer des applications capables de lire et d’écrire des fichiers, tels que des éditeurs de texte ou d’images.

Pour ouvrir un fichier à partir de l’appareil de l’utilisateur, utilisez la showOpenFilePicker() fonction :

openFileButton.addEventListener("click", async () => {
  const fileHandles = await window.showOpenFilePicker();
});

Pour en savoir plus, consultez Window.showOpenFilePicker() sur MDN.

L’API d’accès au système de fichiers peut également être couplée à la fonctionnalité gestion des fichiers PWA pour inscrire votre application en tant que gestionnaire de types de fichiers spécifiques, et donc se sentir plus native pour les utilisateurs. Pour plus d’informations, consultez Gérer des fichiers dans Progressive Web Apps.

L’API d’accès au système de fichiers d’origine privée est une variante de l’API d’accès au système de fichiers destinée à fournir plus de confidentialité aux utilisateurs. Il permet également aux applications d’accéder aux fichiers sur l’appareil de l’utilisateur, mais uniquement dans un répertoire spécifique privé à l’origine de l’application. En outre, cette API n’est pas destinée à faciliter l’accès des utilisateurs au répertoire privé à l’aide de leur explorateur de fichiers.

Pour ouvrir un fichier à partir du système de fichiers d’origine privée, utilisez l’API navigator.storage basée sur la promesse :

// Get the origin-private directory handle.
const root = await navigator.storage.getDirectory();
// Get the handle for a file in the directory.
const fileHandle = await root.getFileHandle("my-file.txt");

Quota de stockage

Dans Microsoft Edge, le stockage local et de session est limité à environ 5 Mo chacun.

D’autres types de stockage de données, tels que IndexedDB, l’API cache ou l’API d’accès au système de fichiers privé d’origine, peuvent utiliser jusqu’à 60 % de l’espace disque total sur l’appareil. Par exemple, si l’appareil sur lequel votre application s’exécute dispose d’un disque de 64 Go, Microsoft Edge permet à votre application de stocker jusqu’à environ 38 Go de données.

Notez que l’espace libre réellement disponible sur l’appareil peut être inférieur au quota de stockage de 60 %. Par exemple, si l’appareil sur lequel votre application s’exécute dispose d’un disque de 64 Go, mais que 50 Go sont déjà utilisés par le système d’exploitation et d’autres fichiers, votre application ne peut stocker que 14 Go de données, même si le quota de stockage est toujours de 38 Go.

Vous pouvez utiliser navigator.storage.estimate() pour demander à l’API Gestionnaire de stockage quel est le quota de stockage pour l’origine de votre application et quelle quantité de celui-ci est déjà utilisé. Pour en savoir plus, consultez StorageManager.estimate() sur MDN.

Si vous essayez de stocker plus de données que ce qui est disponible ou autorisé, une erreur JavaScript est générée. Votre code doit intercepter cette erreur à l’aide d’instructions try...catch . L’extrait de code ci-dessous montre comment intercepter une erreur de quota dépassé lors du stockage de données à l’aide du stockage Web :

try {
  localStorage.setItem('foo', 'bar');
} catch (e) {
  // Code that handles the lack of storage space.
}

Éviction des données

Lorsque l’espace disque disponible sur l’appareil de l’utilisateur commence à être faible, également appelé sollicitation du stockage, Microsoft Edge commence à supprimer les données non persistantes.

Cela signifie que les données stockées par votre application à l’aide de l’API de cache, d’IndexedDB, de l’API d’accès au système de fichiers privé d’origine ou du stockage web peuvent être supprimées.

Par défaut, les données que votre application stocke ne sont pas considérées comme persistantes et peuvent être supprimées en cas de pression de stockage. Si votre application stocke des données critiques, utilisez la navigator.storage.persist() fonction pour rendre le stockage de votre application persistant. Le stockage persistant ne peut être effacé que par l’utilisateur. Pour plus d’informations, consultez StorageManager.persist() sur MDN.