Упражнение — данные кэша, загруженные компонентами

8 мин

В этом упражнении вы увидите, как компоненты Microsoft Graph Toolkit кэшируют свои данные. Вы также будете управлять конфигурацией кэша и узнать, как она влияет на загрузку данных из Microsoft Graph.

Перед началом работы

Выполните следующие действия в качестве необходимых условий для этого упражнения.

1. Настройка приложения Microsoft Entra

Для этого модуля потребуется приложение со следующими параметрами.

Имя: мое приложение
Платформа: одностраничное приложение (SPA)
Поддерживаемые типы учетных записей: Учетные записи в любом каталоге организации (любой каталог Microsoft Entra — Мультитенантный) и личные учетные записи Майкрософт (например, Skype, Xbox)
URI перенаправления:http://localhost:3000

Вы можете создать это приложение, выполнив следующие действия.

В браузере перейдите к Центр администрирования Microsoft Entra, войдите в систему и перейдите в Microsoft Entra ID.
В расположенной слева области выберите пункт Регистрация приложений и щелкните Новая регистрация.
На экране Регистрация приложения введите следующие значения:
- Имя: введите имя вашего приложения.
- Поддерживаемые типы учетных записей: выберите Учетные записи в любом каталоге организации (любой каталог Microsoft Entra — мультитенантный) и личные учетные записи Майкрософт (например, Skype, Xbox).
- URI перенаправления (необязательно): выберите Одностраничное приложение (SPA) и введите http://localhost:3000.
- Нажмите Зарегистрировать.

2. Настройка среды

На рабочем столе создайте папку mgt-performance.
В Visual Studio Code откройте папку mgt-performance.
В папке mgt-performance создайте файл index.html.
Скопируйте приведенный ниже код в index.htmlи замените YOUR-CLIENT-ID скопированным идентификатором приложения (клиента) из созданного ранее приложения Microsoft Entra.
```
<!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>
```
Добавьте папку с именем .vscode в корневую папку проекта.
Добавьте файл с именем settings.json в папку .vscode. Скопируйте и вставьте следующий код в settings.json и сохраните файл.
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

Изучение данных, кэшированных компонентами набора средств

Сначала давайте посмотрим, как компоненты Microsoft Graph Toolkit кэшируют данные по умолчанию.

В Visual Studio Code откройте файл index.html.

Перед закрытием тега текста добавьте компонент mgt-people следующим образом.

<!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>

В Visual Studio Code нажмите указанные ниже клавиши и найдите Live Server.
- Windows: CTRL+SHIFT+P
- macOS: COMMAND+SHIFT+P
Запустите Live Server, чтобы протестировать приложение.
В браузере перейдите по адресу http://localhost:3000. Если файл index.html открыт при запуске Live Server, браузер откроет http://localhost:3000/Index.html. Обязательно измените URL-адрес на http://localhost:3000, прежде чем входить с помощью учетной записи разработчика Microsoft 365. Если не обновить URL-адрес, появится следующая ошибка.

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.
Нажмите кнопку Войти и войдите с помощью учетной записи разработчика Microsoft 365. Предоставьте необходимые разрешения и щелкните Принять. Должен появиться список людей.
В веб-браузере откройте средства разработчика и переключитесь на вкладку Приложение. В разделе Хранилище разверните группу IndexedDB. Обратите внимание на три базы данных, созданные Microsoft Graph Toolkit.
Разверните базу данных mgt-people и выберите peopleQuery. В области сведений разверните данные, хранящиеся в кэше:
В средствах разработчика переключитесь на вкладку Сеть. Выберите отображение только запросов XHR и обновите страницу. Обратите внимание, что пока ваше приложение отображает данные, оно не выполняет ни одного запроса к Microsoft Graph. Все данные загружаются из кэша.

Управление настройками кэша в компонентах набора средств

Вы увидели, как компоненты Microsoft Graph Toolkit кэшируют и загружают данные из кэша по умолчанию. Теперь давайте отключим кэш и посмотрим, как он влияет на поведение приложения.

В веб-браузере откройте средства разработчика и выберите вкладку Консоль.
Очистите кэш Microsoft Graph Toolkit путем запуска следующего оператора в консоли:
```
var cacheId = await mgt.Providers.getCacheId();
mgt.CacheService.clearCacheById(cacheId)
```
Чтобы убедиться в очистке кэша, переключитесь на вкладку Приложение. В разделе IndexedDB больше нет баз данных.
Затем отключите кэш для всех компонентов набора средств. В Visual Studio Code откройте файл index.html. Перед закрытием тега заголовка добавьте следующий фрагмент кода.
```
<script>
  mgt.CacheService.config.isEnabled = false;
</script>
```
Обновите страницу в веб-браузере. В средствах разработчика переключитесь на вкладку Сеть. Обратите внимание на различные запросы к Microsoft Graph.
Обновите страницу еще раз и обратите внимание, что были запущены те же запросы. Так как кэш отключен, все данные необходимо извлекать из Microsoft Graph.

Обратная связь

Были ли сведения на этой странице полезными?