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

Kayce Basques

Sofia Emelianova

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

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

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

В этом руководстве рассматриваются только функции прогрессивных веб-приложений (PWA) в панели приложений . Если вам нужна помощь по другим панелям, обратитесь к последнему разделу этого руководства: «Другие руководства по панелям приложений» .

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

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

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

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

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

Работники сферы услуг

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

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

• Введение в сферу услуг
• Push-уведомления: своевременные, актуальные и точные.

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

• Если для текущей открытой страницы установлен сервис-воркер, вы увидите его в списке на этой вкладке. Например, на скриншоте выше показан сервис-воркер, установленный для страницы https://airhorner.com/ .
• Он Флажок «Автономный режим» переводит DevTools в автономный режим. Это эквивалентно автономному режиму, доступному на панели «Сеть» , или опции « Go offline в командном меню .
• Он Флажок «Обновлять при перезагрузке» заставляет сервис-воркер обновляться при каждой загрузке страницы.
• Он Флажок «Обход сети» обходит сервис-воркер и заставляет браузер обращаться к сети для получения запрошенных ресурсов.
• Ссылка «Сетевые запросы» ведет на панель «Сеть» со списком перехваченных запросов, связанных с сервис-воркером (фильтр is:service-worker-intercepted ).
• Ссылка «Обновить» выполняет однократное обновление указанного сервисного работника.
• Кнопка Push имитирует push-уведомление без содержимого (также известное как « щекотка »).
• Кнопка «Синхронизация» имитирует фоновое событие синхронизации.
• Ссылка «Отменить регистрацию» отменяет регистрацию указанного сервис-воркера. Чтобы отменить регистрацию сервис-воркера и очистить хранилище и кэш одним нажатием кнопки, ознакомьтесь с инструкцией «Очистить хранилище» .
• В строке «Источник» указывается дата установки текущего запущенного сервис-воркера. Ссылка содержит имя исходного файла сервис-воркера. Щелчок по ссылке перенаправляет вас к исходному коду сервис-воркера.
• Строка «Статус» показывает состояние сервис-воркера. Число в этой строке ( #16 на скриншоте) указывает, сколько раз сервис-воркер был обновлен. Если вы включите Update on reload checkbox you'll notice that the number increments on every page load. Next to the status you'll see a start link (if the service worker is stopped) or a stop link (if the service worker is running). Service workers are designed to be stopped and started by the browser at any time. Explicitly stopping your service worker using the stop link can simulate that. Stopping your service worker is a great way to test how your code behaves when the service worker starts back up again. It frequently reveals bugs due to faulty assumptions about persistent global state.
• В строке «Клиенты» указан источник, к которому привязан сервис-воркер. Кнопка фокусировки особенно полезна, когда у вас зарегистрировано несколько сервис-воркеров. Если вы нажмете на кнопку фокусировки рядом с сервис-воркером, работающим в другой вкладке, Chrome сфокусируется на этой вкладке.

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

  

  Для получения более подробной информации см. раздел «Жизненный цикл сервис-воркера» .

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

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

кэши сервис-воркеров

Вкладка «Хранилище кэша» предоставляет список ресурсов, кэшированных с использованием API кэширования (сервис-воркера) только для чтения.

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

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

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

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

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

The details of this padding vary from browser to browser, but for Google Chrome, this means that the minimum size that any single cached opaque response contributes to the overall storage usage is approximately 7 megabytes . You should keep this in mind when determining how many opaque responses you want to cache, since you could easily exceeded storage quota limitations much sooner than you'd otherwise expect based on the actual size of the opaque resources.

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

• Stack Overflow: Какие ограничения применяются к непрозрачным ответам?
• Рабочий блок: Понимание квот на хранение данных

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

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

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

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

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

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

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

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