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

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

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

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

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

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

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

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

См. также:

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

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

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

После настройки манифеста можно использовать панель Манифест приложения средства приложения для проверки манифеста:

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

• Ссылка на манифест

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

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

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

• Значки

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

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

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

• Чтобы просмотреть источник манифеста, щелкните ссылку под меткой манифеста приложения (manifest.json на предыдущем рисунке, который открывается https://airhorner.com/manifest.json).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• В строке Состояние отображается состояние рабочей роли службы. Номер идентификатора рядом с зеленым индикатором состояния (#36 на предыдущем рисунке) предназначен для текущей активной рабочей роли службы. Рядом с состоянием отображается кнопка запуска (если рабочая роль службы остановлена) или кнопка остановки (если рабочая роль службы запущена). Рабочие роли службы предназначены для остановки и запуска браузером в любое время. Явная остановка рабочей роли службы с помощью кнопки остановки может имитировать это. Остановка рабочей роли службы — это отличный способ проверить поведение кода при повторном запуске резервного копирования рабочей роли службы. Он часто выявляет ошибки из-за ошибочных предположений о постоянном глобальном состоянии.

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

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

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

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

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

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

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

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

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

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

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

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

Storage

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

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

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