Средства отладки #2¶

Добро пожаловать на Неделю 3 День 4 из #30DaysOfPWA! Хотите узнать больше об этом проекте? Ознакомьтесь с нашим постом Kickoff, чтобы получить более подробную информацию о дорожной карте и контрибьюторах. А теперь давайте погрузимся в работу!

Добро пожаловать на второй день отладки PWA с помощью браузерных DevTools!

Вчера вы научились отлаживать типичные проблемы, связанные с PWA, с помощью DevTools. Однако, как вы узнали из week 2 этой серии, PWA способны на более сложные функции, такие как background synchronization, push notifications и другие.

Сегодня мы рассмотрим доступные инструменты для отладки этих расширенных возможностей PWA.

	Что вы узнаете сегодня
Разрешения PWA	Как проверить наличие разрешений PWA
Управление уведомлениями	Как эмулировать push-уведомления
Фоновая синхронизация и выборка	Как просматривать события фоновой синхронизации и выборки
Хранилище в IndexedDB	Как просматривать и управлять данными, хранящимися в IndexedDB

Обратите внимание, что все скриншоты в сегодняшней статье взяты из Microsoft Edge DevTools, но и другие браузеры предлагают аналогичные инструменты.

Управление разрешениями PWA¶

PWA могут в полной мере использовать такие современные веб-функции, как уведомления, определение местоположения и хранение данных, однако для того, чтобы PWA могли использовать эти функции, им необходимо предоставить соответствующие разрешения.

Например, для отправки уведомлений пользователю PWA должен запросить разрешение через Notifications API, что выглядит примерно так:

Notification.requestPermission().then(function (result) {
    console.log(result);
});

В результате браузеры будут показывать диалог, запрашивающий у пользователя разрешение, как показано ниже.

В процессе разработки часто возникает необходимость протестировать различные пользовательские потоки в зависимости от того, разрешил или запретил пользователь определенные разрешения. Для этого можно использовать список App permissions. С помощью этого списка можно подтвердить и управлять всеми разрешениями, которые использует ваше приложение.

Например, чтобы сбросить разрешение на уведомления:

Откройте страницу Празрешения приложения, нажав на значок Просмотр информации о сайте в строке url или на кнопку меню Настройки и многое другое в строке заголовка установленного PWA.
Найдите в списке пункт Уведомления и верните его к значению по умолчанию.
Также можно сбросить все разрешения, нажав кнопку Сбросить разрешения.

Push-уведомления¶

Как вы узнали в разделе Уведомление пользователей об обновлениях, PWA могут повысить вовлеченность пользователей за счет отправки им push-уведомлений. Для этого используются Push API и Notifications API, которые доступны сервис-воркерам.

PWA могут подписываться на push-сообщения с сервера через Push API. После подписки PWA начнет получать push-события, даже если приложение закрыто. При получении push-события PWA может отправить пользователю уведомление через Notifications API.

DevTools может отслеживать все эти события, что поможет вам отладить весь поток уведомлений пользователя. Чтобы просмотреть список всех push-сообщений и уведомлений в DevTools:

Откройте DevTools.
Откройте инструмент Приложения.
Откройте Push-сообщения в разделе Фоновые сервисы.
Нажмите Начать запись событий, чтобы начать перечисление событий push-уведомлений в таблице.
Для уведомлений откройте Уведомления в разделе Фоновые сервисы и нажмите Начать запись событий.
Нажмите на любое уведомление для просмотра подробностей.

Поскольку события push должны запускаться сервером, для тестирования и отладки потока push-сообщений в PWA часто приходится отправлять имитацию событий с сервера.

DevTools предоставляет удобный способ избежать этого, имитируя отправку push-событий непосредственно из браузера. Чтобы отправить имитацию push-событий в PWA, выполните следующие действия:

Откройте DevTools и откройте инструмент Application.
Откройте раздел Сервисы-воркеры в секции Приложение.
Введите тестовое сообщение в поле ввода Push.
Нажмите кнопку Push, чтобы отправить сообщение.
Затем вы можете проверить, что событие было отправлено, в таблице Push messaging, как описано выше.

Фоновая синхронизация и выборка¶

PWA также могут использовать Background Sync API, Background Fetch API и Periodic Background Sync API для отправки и получения сетевых запросов и сообщений.

Преимущество использования этих фоновых API перед Fetch или XMLHttpRequest заключается в том, что сетевые запросы, выполняемые через эти API, могут быть отложены до момента активного подключения PWA к сети и выполняться даже тогда, когда PWA не используется. Дополнительную информацию см. в разделе Синхронизация данных приложения в фоновом режиме.

Аналогично тому, как можно просматривать push-сообщения и уведомления, события Background API также можно просматривать в DevTools. Раздел Background services инструмента Application имеет 3 подраздела:

Background Fetch позволяет записывать события фоновой выборки.
Background Sync позволяет записывать события фоновой синхронизации.
Periodic Background Sync позволяет записывать периодические события фоновой синхронизации.

В разделе Сервисы-воркеры можно также отправлять тестовые события фоновой синхронизации и периодические события фоновой синхронизации, что работает аналогично отправке тестовых push-сообщений, как было описано ранее.

Эти события запускают все обработчики событий в PWA, а также попадают в соответствующую таблицу фоновых служб.

Хранилище IndexedDB¶

Для обеспечения поддержки автономной работы PWA должны иметь возможность локального хранения данных. В Интернете существует множество вариантов хранения данных, подробнее о которых можно прочитать здесь.

В PWA рекомендуется использовать хранилище Cache storage для хранения статических ресурсов и IndexedDB — для более структурированных данных. Более подробно об IndexedDB можно узнать из готовящейся статьи Лучшие практики надежности.```

Вчера вы узнали об отладке проблем с кэшем в DevTools. Для просмотра и управления данными IndexedDB вашего приложения в DevTools:

Откройте DevTools
Откройте инструмент Application.
В разделе Storage раскройте секцию IndexedDB, пока не найдете свою базу данных и таблицу, которую хотите открыть. Обратите внимание, что здесь может быть несколько баз данных.
Ваша таблица появится в основной области инструмента, и вы сможете просмотреть данные.
С помощью панели инструментов, расположенной в верхней части таблицы, можно очистить всю таблицу или удалить выделенную строку.

Резюме¶

После прочтения вчерашней и сегодняшней статей этого цикла вы должны иметь представление о том, как браузер DevTools может быть использован для разработки и отладки PWA. Многие проблемы PWA можно решить с помощью DevTools, а разработка может быть упрощена благодаря использованию специализированных инструментов, которые мы рассмотрели в предыдущих двух днях.

Набор функций, доступных для PWA, постоянно растет, и в DevTools планируется добавить инструментальную поддержку этих новых возможностей. Если у вас есть пожелания по функциям или отзывы, вы можете связаться с командой Microsoft Edge DevTools, нажав кнопку Отправить отзыв в правом верхнем углу DevTools.