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

Kayce Basques

Sofia Emelianova

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

Прогрессивные веб-приложения (PWA) — это современные высококачественные приложения, созданные с использованием веб-технологий. PWA предлагают возможности, аналогичные iOS, Android и настольным приложениям. Они есть:

• Надежность даже в нестабильных сетевых условиях.
• Устанавливается для запуска поверхностей операционных систем, таких как папка «Приложения» в Mac OS X, меню «Пуск» в Windows и главный экран в Android и iOS.
• Появляйтесь в переключателях активности, в поисковых системах устройств, таких как Spotlight, и в таблицах обмена контентом.

В этом руководстве обсуждаются только функции Progressive Web App на панели «Приложение» . Если вам нужна помощь по другим панелям, обратитесь к последнему разделу этого руководства — Руководства по другим панелям приложений .

Краткое содержание

• Используйте вкладку «Манифест» , чтобы проверить манифест вашего веб-приложения.
• Используйте вкладку Service Workers для выполнения целого ряда задач, связанных с Service Worker, таких как отмена регистрации или обновление службы, эмуляция push-событий, переход в автономный режим или остановка Service Worker.
• Просматривайте кэш сервисного работника на вкладке «Хранилище кэша» .
• Отмените регистрацию сервисного работника и очистите все хранилище и кэши одним нажатием кнопки на вкладке «Очистить хранилище» .

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

Если вы хотите, чтобы пользователи могли добавлять ваше приложение в папку «Приложения» в Mac OS X, в меню «Пуск» в Windows и на главный экран в Android и iOS, вам понадобится манифест веб-приложения . Манифест определяет, как приложение отображается на главном экране, куда направить пользователя при запуске с главного экрана и как приложение выглядит при запуске.

После настройки манифеста вы можете использовать вкладку «Манифест» на панели «Приложение» , чтобы проверить его.

• Чтобы просмотреть источник манифеста, щелкните ссылку под меткой манифеста приложения ( manifest.webmanifest на снимке экрана выше).
• Разделы «Идентификация» и «Презентация» просто отображают поля из источника манифеста более удобным для пользователя способом.
• Раздел «Обработчики протоколов» позволяет вам протестировать регистрацию обработчика протокола URL-адреса вашего PWA одним нажатием кнопки. Дополнительные сведения см. в разделе Регистрация обработчика протокола тестового URL-адреса .
• В разделе «Значки» отображаются все указанные вами значки и вы можете проверить их маски.
• Набор разделов «Ярлык #N» отображает информацию обо всех объектах ярлыка.
• В разделе «Снимок экрана #N» отображаются снимки экрана для более удобного пользовательского интерфейса установки вашего приложения.

Кроме того, если DevTools обнаруживает ошибку, например значок, который невозможно загрузить, на вкладке «Манифест» отображается раздел «Установка», описывающий ошибку.

Просмотр и проверка маскируемых значков

В разделе «Значки» на вкладке «Манифест» отображаются все значки вашего приложения. В этом разделе вы также можете проверить безопасные области на наличие маскируемых значков — формата значков, который адаптируется к платформам.

Чтобы обрезать значки так, чтобы была видна только минимальная безопасная область, установите флажок Показывать только минимальную безопасную область для маскируемых значков .

Если весь ваш логотип виден в безопасной зоне, все готово.

Установка триггера

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

Чтобы запустить процесс установки вашего PWA:

1. Откройте целевую страницу PWA в Chrome.

2. В правой части адресной строки вверху нажмите кнопку Установить .

   

3. Следуйте инструкциям на экране.

Функция «Установить приложение» не может имитировать рабочий процесс для мобильных устройств. Обратите внимание, как настольный браузер Chrome отображает кнопку установки в адресной строке, хотя DevTools находится в режиме устройства . Однако если вы сможете успешно добавить свое приложение на рабочий стол, оно будет работать и на мобильных устройствах.

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

Проверьте ярлыки

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

Чтобы проверить ярлыки, которые вы определили в файле манифеста , прокрутите страницу до разделов «Ярлык #N» на вкладке «Манифест» .

Просмотрите снимки экрана для более удобного пользовательского интерфейса установки.

Когда вы добавите описание и набор снимков экрана в файл манифеста , ваше приложение получит более богатое диалоговое окно установки.

Чтобы просмотреть снимки экрана, перейдите к разделу «Снимок экрана № N» на вкладке «Манифест» .

Регистрация обработчика протокола тестового URL-адреса

PWA могут обрабатывать ссылки, использующие определенный протокол для более интегрированного взаимодействия. Чтобы узнать, как создать обработчик, см. раздел Регистрация обработчика протокола URL-адреса для PWA .

Чтобы протестировать ваш обработчик:

1. Откройте DevTools на целевой странице вашего PWA. Например, посмотрите эту демонстрационную версию PWA .
2. На демонстрационной странице установите PWA и перезагрузите приложение после установки. Теперь браузер зарегистрировал PWA в качестве обработчика протокола web+coffee .
3. В разделе «Приложение» > «Манифест» > «Обработчик протокола» введите URL-адрес, который необходимо протестировать обработчику, и нажмите «Протестировать протокол» . В этом примере обработчик может обрабатывать americano , chai и latte-macchiato .
4. Когда Chrome спросит вас, может ли он открыть приложение, подтвердите его, нажав «Открыть обработчик протокола» .
5. В следующем диалоговом окне разрешите приложению обрабатывать ссылки web+coffee .

Если обработчик успешно обработает ссылку, вы увидите в приложении изображение открытой чашки кофе.

Работники сферы обслуживания

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

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

• Введение в сервисных работников
• Push-уведомления: своевременные, релевантные и точные

Вкладка «Служебные работники» на панели «Приложения» — это основное место в DevTools для проверки и отладки сервисных работников.

• Если сервис-воркер установлен на открытой в данный момент странице, вы увидите его в списке на этой вкладке. Например, на скриншоте выше установлен сервис-воркер для области https://airhorner.com/ .
• Флажок «Автономно» переводит DevTools в автономный режим. Это эквивалентно автономному режиму, доступному на панели «Сеть» , или опции Go offline в меню команд .
• Флажок «Обновлять при перезагрузке» заставляет сервис-работника обновляться при каждой загрузке страницы.
• Флажок «Обход сети» обходит сервис-воркера и заставляет браузер обращаться к сети за запрошенными ресурсами.
• Ссылка «Сетевые запросы» позволяет перейти на панель «Сеть» со списком перехваченных запросов, связанных с сервис-воркером (фильтр is:service-worker-intercepted ).
• Ссылка «Обновить» выполняет однократное обновление указанного сервис-воркера.
• Кнопка Push имитирует push-уведомление без полезной нагрузки (также известное как Tickle ).
• Кнопка «Синхронизировать» эмулирует событие фоновой синхронизации.
• Ссылка «Отменить регистрацию» отменяет регистрацию указанного сервисного работника. Ознакомьтесь с разделом «Очистить хранилище», чтобы узнать, как отменить регистрацию сервисного работника и очистить хранилище и кеши одним нажатием кнопки.
• Строка Source сообщает вам, когда был установлен работающий в данный момент сервисный работник. Ссылка — это имя исходного файла сервис-воркера. Нажав на ссылку, вы перейдете к источнику сервис-воркера.
• Строка состояния сообщает вам о состоянии сервисного работника. Число в этой строке ( #16 на скриншоте) указывает, сколько раз обновлялся сервис-воркер. Если вы включите Установите флажок «Обновить при перезагрузке», и вы заметите, что число увеличивается при каждой загрузке страницы. Рядом со статусом вы увидите ссылку запуска (если сервис-воркер остановлен) или ссылку остановки (если сервис-воркер запущен). Сервис-воркеры предназначены для остановки и запуска браузером в любое время. Явная остановка вашего сервисного работника с помощью ссылки остановки может имитировать это. Остановка вашего сервис-воркера — отличный способ проверить, как поведет себя ваш код, когда сервис-воркер снова запустится. Он часто выявляет ошибки из-за ошибочных предположений о постоянном глобальном состоянии.
• В строке «Клиенты» указывается источник, к которому относится сервис-воркер. Кнопка фокусировки наиболее полезна, если у вас есть несколько зарегистрированных сервисных работников. Если вы нажмете кнопку фокуса рядом с сервис-воркером, который работает на другой вкладке, Chrome сосредоточится на этой вкладке.

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

  

  Дополнительные сведения см. в разделе Жизненный цикл сервисного работника .

Если Service Worker вызывает какие-либо ошибки, на вкладке Service Workers отображается Значок ошибки с количеством ошибок рядом со строкой «Источник» . Ссылка с номером приведет вас в Консоль со всеми зарегистрированными ошибками.

Чтобы просмотреть информацию обо всех Service Workers, нажмите «Просмотреть все регистрации» в нижней части вкладки Service Workers . Эта ссылка ведет на chrome://serviceworker-internals/?devtools , где вы можете продолжить отладку своих сервис-воркеров.

Кеши сервисных рабочих

На вкладке «Хранилище кэша» представлен доступный только для чтения список ресурсов, которые были кэшированы с помощью Cache API (сервисного работника).

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

Если у вас открыто два или более кэша, вы увидите их в раскрывающемся списке « Хранилище кэша» .

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

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

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

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

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

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

Очистить хранилище

Вкладка «Очистить хранилище» — очень полезная функция при разработке прогрессивных веб-приложений. Эта вкладка позволяет отменить регистрацию сервис-воркеров и очистить все кеши и хранилище одним нажатием кнопки. Чтобы узнать больше, перейдите в раздел ниже.

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

• Очистить хранилище

Другие руководства по панели приложений

Ознакомьтесь с руководствами ниже, чтобы получить дополнительную помощь по другим панелям панели «Приложение» .

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

• Проверка ресурсов страницы
• Проверяйте и управляйте локальным хранилищем и кэшами