Используйте панель «Приложение» для проверки, изменения и отладки манифестов веб-приложений, Service Worker и кэшей Service Worker.
Progressive Web Apps (PWA) — это современные высококачественные приложения, созданные с использованием веб-технологий. PWA предлагают возможности, аналогичные возможностям iOS, Android и настольных приложений. Они:
- Надежность даже в условиях нестабильной сети.
- Устанавливается для запуска поверхностей операционных систем, таких как папка «Приложения» в Mac OS X, меню «Пуск» в Windows и домашний экран в Android и iOS.
- Отображается в переключателях активности, поисковых системах устройств, таких как Spotlight, и на листах обмена контентом.
В этом руководстве обсуждаются только функции Progressive Web App панели Application . Если вам нужна помощь по другим панелям, ознакомьтесь с последним разделом этого руководства, Other Application panel guides .
Краткое содержание
- Используйте вкладку «Манифест» для проверки манифеста вашего веб-приложения.
- Используйте вкладку Service Workers для целого ряда задач, связанных с Service Workers, таких как отмена регистрации или обновление службы, эмуляция push-событий, переход в автономный режим или остановка Service Worker.
- Просматривайте кэш Service Worker на вкладке «Хранилище кэша» .
- Отмените регистрацию Service Worker и очистите все хранилище и кэши одним нажатием кнопки на вкладке «Очистить хранилище» .
Манифест веб-приложения
Если вы хотите, чтобы ваши пользователи могли добавлять ваше приложение в папку «Приложения» на Mac OS X, в меню «Пуск» на Windows и на домашний экран на Android и iOS, вам нужен манифест веб-приложения . Манифест определяет, как приложение отображается на домашнем экране, куда направить пользователя при запуске с домашнего экрана и как выглядит приложение при запуске.
После настройки манифеста вы можете использовать вкладку «Манифест» на панели «Приложение» для его проверки.
- Чтобы просмотреть исходный код манифеста, щелкните ссылку под меткой App Manifest (
manifest.webmanifestна снимке экрана выше). - Разделы «Идентификация» и «Презентация» просто отображают поля из источника манифеста в более удобном для пользователя виде.
- Раздел Protocol Handlers позволяет вам проверить регистрацию обработчика протокола URL вашего PWA одним нажатием кнопки. Чтобы узнать больше, см. Тест регистрации обработчика протокола URL .
- Раздел «Значки» отображает все указанные вами значки и позволяет проверить их маски.
- В наборе разделов «Ярлык #N» отображается информация обо всех объектах ярлыков.
- В разделе «Снимок экрана № N» отображаются снимки экрана для более расширенного пользовательского интерфейса установки вашего приложения.
Кроме того, если DevTools обнаруживает ошибку, например, значок, который невозможно загрузить, на вкладке «Манифест» отображается раздел «Возможность установки» с описанием ошибки.
Просмотр и проверка маскируемых значков
Раздел Значки вкладки Манифест отображает все значки вашего приложения. В этом разделе вы также можете проверить безопасные области для маскируемых значков , формат значков, которые адаптируются к платформам.
Чтобы обрезать значки так, чтобы была видна только минимальная безопасная область, установите флажок 
Показывать только минимальную безопасную область для маскируемых значков .
Если весь ваш логотип виден в безопасной зоне, все готово.
Установка триггера
Chrome позволяет вам включать и продвигать установку вашего PWA непосредственно в его пользовательском интерфейсе. Узнайте , как обеспечить собственный опыт установки в приложении .
Чтобы запустить процесс установки вашего PWA:
- Откройте целевую страницу PWA в Chrome.
В правой части адресной строки вверху нажмите
Установить . 
Следуйте инструкциям на экране.
Функция установки приложения не может имитировать рабочий процесс для мобильных устройств. Обратите внимание, как браузер Chrome для настольных компьютеров отображает кнопку установки в адресной строке, даже если DevTools находится в режиме устройства . Однако, если вы успешно добавите свое приложение на рабочий стол, то оно будет работать и для мобильных устройств.
Если вы хотите протестировать настоящий мобильный опыт, вы можете подключить настоящее мобильное устройство к DevTools через удаленную отладку . Чтобы запустить установку на подключенном мобильном устройстве, откройте 
трехточечное меню и нажмите 
Установить приложение .
Проверить ярлыки
Ярлыки приложений позволяют обеспечить быстрый доступ к ряду распространенных действий, которые часто требуются пользователям.
Чтобы проверить ярлыки, которые вы определили в файле манифеста , прокрутите страницу до раздела «Ярлык № N» на вкладке «Манифест» .
Изучите скриншоты для более подробного пользовательского интерфейса установки.
Когда вы добавляете описание и набор снимков экрана в файл манифеста , ваше приложение получает более расширенный диалог установки.
Чтобы просмотреть снимки экрана, прокрутите страницу до раздела «Снимок экрана № N» на вкладке «Манифест» .
Регистрация обработчика тестового URL-протокола
PWA могут обрабатывать ссылки, использующие определенный протокол, для более интегрированного опыта. Чтобы узнать, как создать обработчик, см. Регистрация обработчика протокола URL для PWA .
Чтобы протестировать обработчик:
- Откройте DevTools на целевой странице вашего PWA. Например, посмотрите на эту демо-версию PWA .
- С демо-страницы установите PWA и перезагрузите приложение после установки. Браузер теперь зарегистрировал PWA как обработчик для протокола
web+coffee. - В разделе Приложение > Манифест > Обработчик протокола введите URL-адрес, который должен протестировать обработчик, и нажмите Проверить протокол .
В этом примере обработчик может обрабатывать americano,chaiиlatte-macchiato. - Когда Chrome спросит вас, может ли он открыть приложение, подтвердите, нажав Открыть обработчик протокола .
- В следующем диалоговом окне разрешите приложению обрабатывать ссылки
web+coffee.
Если обработчик успешно обработает ссылку, вы увидите изображение чашки кофе, открытой в приложении.
Работники сферы услуг
Service Workers — это фундаментальная технология будущей веб-платформы. Это скрипты, которые браузер запускает в фоновом режиме, отдельно от веб-страницы. Эти скрипты позволяют вам получать доступ к функциям, которые не требуют веб-страницы или взаимодействия с пользователем, например, push-уведомления, фоновая синхронизация и офлайн-опыты.
Связанные руководства:
Вкладка Service Workers на панели Application — это основное место в DevTools для проверки и отладки Service Workers.
- Если на текущей открытой странице установлен service worker, вы увидите его в списке на этой вкладке. Например, на скриншоте выше установлен service worker для области
https://airhorner.com/. - The
Флажок Offline переводит DevTools в автономный режим. Это эквивалентно автономному режиму, доступному на панели Network , или опции Go offlineв меню Command . - The
Флажок «Обновить при перезагрузке» заставляет Service Worker обновляться при каждой загрузке страницы. - The
Флажок «Обход сети» обходит Service Worker и заставляет браузер обращаться к сети за запрошенными ресурсами. - Ссылка «Сетевые запросы» перенаправляет вас на панель «Сеть» со списком перехваченных запросов, относящихся к Service Worker (фильтр
is:service-worker-intercepted). - Ссылка «Обновить» выполняет однократное обновление указанного сервисного работника.
- Кнопка Push эмулирует push-уведомление без полезной нагрузки (также известное как « щекотка »).
- Кнопка «Синхронизация» эмулирует событие фоновой синхронизации.
- Ссылка Unregister отменяет регистрацию указанного service worker. Ознакомьтесь с Clear storage, чтобы узнать, как отменить регистрацию service worker и очистить хранилище и кэши одним нажатием кнопки.
- Строка Source сообщает, когда был установлен текущий работающий service worker. Ссылка — это имя исходного файла service worker. Щелчок по ссылке перенаправляет вас к исходному файлу service worker.
- Строка статуса сообщает вам статус сервисного работника. Число в этой строке (
#16на снимке экрана) указывает, сколько раз сервисный работник был обновлен. Если вы включите
Обновление флажка при перезагрузке, вы заметите, что число увеличивается при каждой загрузке страницы. Рядом со статусом вы увидите ссылку запуска (если service worker остановлен) или ссылку остановки (если service worker запущен). Service worker разработаны для остановки и запуска браузером в любое время. Явная остановка service worker с помощью ссылки остановки может имитировать это. Остановка service worker — отличный способ проверить, как ведет себя ваш код, когда service worker снова запускается. Это часто выявляет ошибки из-за ошибочных предположений о постоянном глобальном состоянии. - Строка Clients сообщает вам источник, к которому относится service worker. Кнопка фокуса в основном полезна, когда у вас есть несколько зарегистрированных service worker. Если вы нажмете кнопку фокуса рядом с service worker, который запущен на другой вкладке, Chrome сфокусируется на этой вкладке.
Таблица цикла обновления показывает вам действия сервисного работника и их прошедшее время, например, установка, ожидание и активация. Чтобы увидеть точную временную метку каждого действия, щелкните
Кнопки «Развернуть» . 
Для получения дополнительной информации см. Жизненный цикл сервисного работника .
Если Service Worker вызывает какие-либо ошибки, на вкладке Service Workers отображается сообщение 
Значок ошибки с номером ошибок рядом со строкой Source . Ссылка с номером перенаправляет вас в Консоль со всеми зарегистрированными ошибками.
Чтобы увидеть информацию обо всех service worker, нажмите See all registrations внизу вкладки Service Workers . Эта ссылка ведет на chrome://serviceworker-internals/?devtools , где вы можете выполнить дополнительную отладку своих service worker.
Кэши сервисных рабочих
Вкладка «Хранилище кэша» содержит доступный только для чтения список ресурсов, кэшированных с помощью API кэширования (service worker).
Обратите внимание, что при первом открытии кэша и добавлении в него ресурса DevTools может не обнаружить изменение. Перезагрузите страницу, и вы должны увидеть кэш.
Если у вас открыто два или более кэшей, вы увидите их список под раскрывающимся списком «Хранилище кэша» .
Использование квоты
Некоторые ответы на вкладке Cache Storage могут быть помечены как « непрозрачные ». Это относится к ответу, полученному из другого источника, например из CDN или удаленного API, когда CORS не включен.
Чтобы избежать утечки междоменной информации, к размеру непрозрачного ответа, используемого для расчета пределов квоты хранилища (т. е. выдается ли исключение QuotaExceeded ) и сообщаемого API navigator.storage , добавляется значительное дополнение.
Детали этого заполнения различаются от браузера к браузеру, но для Google Chrome это означает, что минимальный размер, который любой кэшированный непрозрачный ответ вносит в общее использование хранилища, составляет приблизительно 7 мегабайт . Вы должны иметь это в виду при определении того, сколько непрозрачных ответов вы хотите кэшировать, поскольку вы можете легко превысить ограничения квоты хранилища гораздо раньше, чем вы могли бы ожидать, исходя из фактического размера непрозрачных ресурсов.
Связанные руководства:
- Stack Overflow: Какие ограничения применяются к непрозрачным ответам?
- Workbox: Понимание квоты хранения
Очистить хранилище
Вкладка «Очистить хранилище» — очень полезная функция при разработке прогрессивных веб-приложений. Эта вкладка позволяет вам отменить регистрацию service worker и очистить все кэши и хранилище одним нажатием кнопки. Ознакомьтесь с разделом ниже, чтобы узнать больше.
Связанные руководства:
Другие руководства по панелям приложений
Дополнительную информацию о других панелях панели приложений можно найти в руководствах ниже.
Связанные руководства: