Exercice : mettre en cache les données chargées par composants

8 minutes

Dans cet exercice, vous allez voir comment les composants du Kit de ressources Microsoft Graph mettent leurs données en cache. Vous allez également contrôler la configuration du cache et voir comment elle affecte le chargement des données à partir de Microsoft Graph.

Avant de commencer

Effectuez les étapes suivantes en tant que conditions préalables à cet exercice.

1. Configurer une application Microsoft Entra

Pour ce module, vous avez besoin d’une application avec ces paramètres :

Nom : mon application
Plate-forme :Application à page unique (SPA)
Types de comptes pris en charge : Comptes dans n’importe quel annuaire organisationnel (n’importe quel annuaire Microsoft Entra - Multilocataire) et comptes Microsoft personnels (par exemple, Skype, Xbox)
URI de redirection :http://localhost:3000

Vous pouvez créer cette application en suivant les étapes suivantes :

Dans le navigateur, accédez au Centre d’administration Microsoft Entra, connectez-vous, puis accédez à Microsoft Entra ID.
Sélectionnez Inscriptions des applications dans le volet gauche, puis sélectionnez Nouvelle Inscription.
Dans l’écran Inscrire une application, entrez les valeurs suivantes :
- Nom : entrez le nom de votre application.
- Types de comptes pris en charge : sélectionnez Comptes dans n’importe quel annuaire organisationnel (n’importe quel annuaire Microsoft Entra - Multilocataire) et comptes Microsoft personnels (par exemple, Skype, Xbox).
- URI de redirection (facultatif) : sélectionnez Application à page unique (SPA) et entrez http://localhost:3000.
- Sélectionnez Inscrire.

2. Configurer votre environnement

Créez un dossier nommé mgt-performance sur votre ordinateur de bureau.
Dans Visual Studio Code, ouvrez le dossier mgt-performance.
Dans le dossier mgt-performance, créez un fichier nommé index.html.

Copiez le code suivant dans index.html, puis remplacez par YOUR-CLIENT-ID votre ID d’application (client) copié à partir de votre application Microsoft Entra créée précédemment.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
  </body>
</html>

Ajouter un dossier nommé .vscode à la racine de votre dossier de projet.
Ajoutez un fichier nommé settings.json dans le dossier .vscode. Copiez, puis collez le code suivant dans settings.json, puis enregistrez le fichier.
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

Explorez les données mises en cache par les composants du kit de ressources

Tout d’abord, examinons comment les composants du Kit de ressources Microsoft Graph mettez en cache les données par défaut.

Dans Visual Studio Code, ouvrez le fichier index.html.

Avant la balise de corps fermant, ajoutez le composantmgt-people, comme illustré ci-dessous :

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-people></mgt-people>
  </body>
</html>

Dans Visual Studio Code, sélectionnez la combinaison de touches suivante dans Visual Studio Code, puis recherchez Live Server :
- Windows : CTRL+SHIFT+P
- macOS : COMMAND+SHIFT+P
Exécutez Live Server pour tester votre application.
Ouvrez votre navigateur, puis accédez à http://localhost:3000. Si le fichier index.html ouvert lorsque vous lancez Live Server, le navigateur s’ouvre http://localhost:3000/Index.html. Veillez à http://localhost:3000remplacer l’URL par , avant de vous connecter avec votre compte de développeur Microsoft 365. Si vous ne mettez pas à jour l’URL, vous obtiendrez l’erreur suivante.

The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.
Sélectionnez le bouton Se connecter, et connectez-vous avec votre compte de développeur Microsoft 365. Acceptez les autorisations requises et sélectionnez Accepter. Une liste de contacts devrait s’afficher.
Dans le navigateur web, ouvrez les outils de développeur et basculez vers l’onglet Application. Dans la section Stockage, développez le groupe indexationDB. Notez les trois bases de données créées par le kit de ressources Microsoft Graph.
Développez la base de données mgt-people et sélectionnez personnesQuery. Dans le volet Détails, développez les données stockées dans le cache :
Dans les outils de développement, basculez vers l’onglet Réseau. Choisissez d’afficher uniquement les demandes XHR et d’actualiser la page. Notez que même si votre application affiche des données, elle n’a pas exécuté une seule requête à Microsoft Graph. Toutes les données sont chargées à partir du cache.

Contrôler les paramètres de cache pour les composants du kit de ressources

Vous avez vu comment les composants du kit de ressources Microsoft Graph mettent en cache et chargent des données à partir du cache par défaut. À présent, nous allons désactiver le cache et voir comment il affecte le comportement de votre application.

Dans le navigateur web, ouvrez les outils de développeur et sélectionnez l’onglet Console.
Effacez le cache du kit de ressources Microsoft Graph, en exécutant cette instruction dans la console :
```
var cacheId = await mgt.Providers.getCacheId();
mgt.CacheService.clearCacheById(cacheId)
```
Pour confirmer que le cache a été effacé, passez à l’onglet Application. Il n’existe plus de base de données sous IndexedDB.
Désactivez ensuite le cache pour tous les composants du kit de ressources. Dans Visual Studio Code, ouvrez le fichier index.html. Avant la balise d’en-tête fermant, ajoutez l’extrait de code suivant :
```
<script>
  mgt.CacheService.config.isEnabled = false;
</script>
```
Dans le navigateur web, actualisez la page. Dans les outils de développeur, basculez vers l’onglet Réseau. Notez les différentes demandes à Microsoft Graph.
Réactualisez la page, et notez que les mêmes demandes ont été exécutées. Étant donné que vous avez désactivé le cache, toutes les données doivent être récupérées à partir de Microsoft Graph.