Отладка прогрессивного веб-приложения (PWA)

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

Инструмент " включает следующие области для функций PWA:

• Используйте панель Манифест для проверки манифеста веб-приложения.

• Используйте область "Рабочие роли службы " для задач, связанных со службами, таких как:

  • Отмена регистрации или обновление службы.
  • Эмуляция событий отправки.
  • Переход в автономный режим.
  • Остановка рабочей роли службы.

• Используйте панель Хранилище кэша для просмотра кэша рабочей роли службы.

• Используйте область Хранилища , чтобы просмотреть объем данных, хранящихся в приложении на устройстве, и очистить сохраненные данные.

Функции, которые рассматриваются ниже, являются функциями средства приложения , которые относятся к PWA. Сведения о других функциях и панелях в средстве "Приложение " см. в следующих разделах:

• Просмотр файлов ресурсов, составляющих веб-страницу
• Просмотр и редактирование локального хранилища

См. также:

• Обзор прогрессивных веб-приложений (PWA)

Манифест веб-приложений

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

Чтобы проверить манифест, выполните следующие действия:

1. Перейдите на веб-страницу, которая использует манифест, например Airhorner.com, в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроются средства разработчика.

3. В средствах разработки выберите Приложение .

4. В структуре слева в разделе Приложение выберите Манифест.

   Откроется панель Манифест приложения , где можно проверить манифест:

Панель Манифест приложения содержит следующие разделы:

• Верхний раздел, содержащий ссылку на манифест

• Удостоверение

• Презентации

• Обработчики протоколов

• Значки

• Наложение элементов управления окнами

• Снимок экрана No 1

• Снимок экрана No 2

• Чтобы просмотреть исходный файл манифеста, щелкните ссылку под меткой манифеста приложения . На предыдущем рисунке эта ссылка открывается manifest.jsonhttps://airhorner.com/manifest.jsonдля Airhorner.com.

• В разделах Удостоверение и Презентация поля из источника манифеста отображаются в более удобном для пользователя дисплее.

• В разделе Значки отображаются все значки, указанные в манифесте.

Служебные сценарии

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

Основное место в средствах разработки для проверки и отладки рабочих ролей служб — это область Рабочие роли службы в средстве ".

Чтобы просмотреть рабочие роли служб, выполните приведенные далее действия.

1. Перейдите на веб-страницу, например Airhorner.com, в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроются средства разработчика.

3. В средствах разработки выберите Приложение .

4. В структуре слева в разделе Приложение выберите Рабочие роли служб.

   Откроется область Рабочие роли службы :

• Если рабочая роль службы установлена на открытой странице, она отображается в области Рабочие роли службы . Например, на предыдущем рисунке установлена рабочая роль службы для область https://weather-pwa-sample.firebaseapp.com.

• Флажок Автономный переводит Средства разработки в автономный режим. Это эквивалентно автономному режиму, доступуемого в средстве или параметру Go offline в меню команд.

• Флажок Обновить при перезагрузке заставляет рабочую роль службы обновляться при каждой загрузке страницы.

• Флажок Обход сети обходит рабочую роль службы и заставляет браузер перейти в сеть для получения запрошенных ресурсов.

• По ссылке "Сетевые запросы " вы перейдете к средству "Сеть" со списком перехваченных запросов, связанных с рабочей ролью is:service-worker-intercepted службы (фильтр). См . раздел Отображение сетевых запросов, обрабатываемых рабочей ролью службы ниже.

• Кнопка Обновить выполняет однократное обновление указанной рабочей роли службы.

• Кнопка push-уведомлений эмулирует push-уведомление без полезных данных (также известного как щекота).

• Кнопка Синхронизация эмулирует событие фоновой синхронизации.

• Ссылка "Отменить регистрацию" отменяет регистрацию указанной рабочей роли службы. Чтобы отменить регистрацию рабочей роли службы и очистить хранилище и кэши одним щелчком кнопки, см. раздел Очистка хранилища ниже.

• В строке Источник показано, когда был установлен работающий в настоящее время рабочий компонент службы. Ссылка — это имя исходного файла рабочей роли службы. Если щелкнуть ссылку, вы перейдете к источнику рабочей роли службы.

• В строке Состояние отображается состояние рабочей роли службы. Номер идентификатора рядом с зеленым индикатором состояния (#36 на предыдущем рисунке) предназначен для текущей активной рабочей роли службы.

  Рядом с состоянием:

  • Если рабочая роль службы остановлена, отображается кнопка запуска .
  • Если рабочая роль службы запущена, отображается кнопка остановки .

  Рабочие роли службы предназначены для остановки и запуска браузером в любое время. Явная остановка рабочей роли службы с помощью кнопки остановки может имитировать это.

  Остановка рабочей роли службы — это отличный способ проверить поведение кода при повторном запуске резервного копирования рабочей роли службы. Он часто выявляет ошибки из-за ошибочных предположений о постоянном глобальном состоянии.

• Строка "Клиенты " указывает источник, к которому подключена рабочая роль службы. Кнопка фокусировки в основном полезна, если установлен флажок Показать все . Если этот флажок включен, будут перечислены все зарегистрированные рабочие роли служб. Если нажать кнопку фокуса рядом с рабочей ролью службы, работающей на другой вкладке, Microsoft Edge сосредоточится на этой вкладке.

• В таблице Цикл обновления отображаются действия рабочей роли службы и их затраченное время, например установка, ожидание и активация. Чтобы увидеть точную метку времени для каждого действия, нажмите кнопки Развернуть ().

Если рабочая роль службы вызывает какие-либо ошибки, отображается метка Ошибки .

См. также:

• API рабочей роли службы — в MDN, о рабочих службах.

Отображение сетевых запросов, обрабатываемых рабочей ролью службы

В области Рабочие роли службы средства приложения можно быстро получить доступ к списку сетевых запросов, которые обрабатываются рабочей ролью службы, с помощью средства "Сеть ".

Чтобы отобразить сетевые запросы, обрабатываемые рабочей ролью службы, выполните следующие действия:

1. Перейдите на веб-страницу, например Airhorner.com, в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроются средства разработчика.

3. В средствах разработки выберите Приложение .

4. В структуре слева в разделе Приложение выберите Рабочие роли служб.

   Откроется область Рабочие роли службы .

5. В правом верхнем углу области Рабочие роли службы нажмите кнопку Сетевые запросы .

   Откроется Сетевое средство.

   Текстовое поле Фильтр содержит is:service-worker-intercepted. Этот фильтр отображает только запросы, которые были обработаны этой рабочей ролью службы.

6. Обновите веб-страницу.

7. Выберите один из запросов, например main.css.

   Появится боковая панель.

8. На боковой панели щелкните вкладку Время .

   В разделе Service Worker отображаются сведения о времени запуска и реагирования на этапы.

Кэши рабочих ролей службы

Область Хранилища кэша предоставляет доступный только для чтения список ресурсов, кэшированных с помощью API кэша (рабочая роль службы):

При первом открытии кэша и добавлении в него ресурса Средства разработки могут не обнаружить изменения. Обновите страницу, чтобы отобразить кэш.

Все открытые кэши перечислены в расширителя хранилища кэша .

Использование квоты

Некоторые ответы на панели Хранилища кэша могут быть помечены как "непрозрачные". Это относится к ответу, полученному из другого источника, например из CDN или удаленного API, если CORS не включен.

Чтобы избежать утечки междоменной информации, к размеру непрозрачного ответа, используемого для вычисления квот хранилища (например QuotaExceeded , при возникновении исключения) добавляется значительное заполнение и сообщается navigator.storage API.

Сведения об этом заполнении зависят от браузера к браузеру, но для Microsoft Edge это означает, что минимальный размер , который один кэшированный непрозрачный ответ влияет на общее использование хранилища , составляет около 7 мегабайт. Помните о заполнении при определении количества непрозрачных ответов, которые требуется кэшировать, так как вы можете легко превысить ограничения квоты хранилища гораздо раньше, чем ожидалось в противном случае в зависимости от фактического размера непрозрачных ресурсов.

Связанные руководства:

• Переполнение стека: какие ограничения применяются к непрозрачным ответам?

Очистка хранилища

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

См. также

• Проверка сетевой активности

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.