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

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-уведомления: своевременные, релевантные и точные

Вкладка «Service Workers» на панели «Приложения» — это основное место в DevTools для проверки и отладки Service Workers.

• Если сервис-воркер установлен на открытой в данный момент странице, вы увидите его в списке на этой вкладке. Например, на скриншоте выше установлен сервис-воркер для области 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 мегабайт . Вы должны помнить об этом при определении количества непрозрачных ответов, которые вы хотите кэшировать, ��оск��льку вы можете легко превысить ограничения квоты хранилища гораздо раньше, чем вы ожидали бы, исходя из фактического размера непрозрачных ресурсов.

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

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

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

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

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

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

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

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

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

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