Деконструкция PWA¶

Добро пожаловать на Неделю 1 День 2 проекта #30DaysOfPWA! Хотите узнать больше об этом проекте? Ознакомьтесь с нашим постом Вступление, чтобы получить более подробную информацию о дорожной карте и участниках. А теперь давайте погрузимся в работу!

Что вы узнаете сегодня

Что является составными частями PWA?
Как каждый из них способствует желаемому поведению PWA?
Какие функции являются основными, а какие — дополнительными при разработке PWA?
Как проверить, соответствует ли мой PWA желаемым характеристикам?

Из каких элементов состоит PWA?¶

В нашей прошлой статье мы говорили о том, что прогрессивное совершенствование является ключом к масштабируемости PWA, о желательных характеристиках PWA (включая возможность установки, надежность и безопасность работы) и о том, что открытые веб-технологии являются ключом к разработке хороших PWA.

Сегодня мы рассмотрим эти технологии, начав с трех основных компонентов для разработки PWA:

HTTPS — обеспечивает безопасность PWA.
Сервис-воркеры — делает PWA надежным и независимым от сети.
Web App Manifest — обеспечивает возможность установки PWA.

Прежде чем перейти к деталям, давайте выполним несколько упражнений, чтобы подготовить почву. В последнем упражнении мы выбрали пример PWA для использования в качестве справочника при изучении концепций. Откройте его сейчас в браузере и подготовьте. В качестве образца PWA я использую DevTools Tips.

Задача 1: Изучите свой PWA!¶

Откройте PWA в браузере и изучите его с помощью инструментов разработчика браузера — например, здесь приведено руководство для Microsoft Edge. Вот что я вижу, когда осматриваю домашнюю страницу DevTools Tips:

Это панель управления PWA, содержащая инструменты отладки и профилирования, о которых вы узнаете в Week 3: Developer Tools.

Пока же ознакомьтесь с этими элементами боковой панели и держите эту вкладку открытой в браузере:

Application — с манифестом, сервис-воркерами и хранилищем
Storage — опции, включающие локальное хранилище, хранилище сеансов, индексированную БД
Cache — представление кэш-хранилища в браузере
Background Services — панель профилирования для просмотра/отладки этих действий.

Задача 2: Проведите аудит своего PWA!¶

Зайдите на сайт PWABuilder. Найдите запрос Enter the URL to your PWA, введите URL вашего PWA (например, https://devtoolstips.org) и нажмите кнопку Start. Через несколько минут должен появиться отчет, который будет выглядеть примерно так:

Это аудиторский отчет для вашего PWA. Он показывает, насколько ваш PWA соответствует "желаемым характеристикам" с помощью контрольного списка необходимых (must-have), рекомендуемых (nice-to-have) и опциональных функций. Наш PWA получил отличную оценку! Более подробно вы узнаете в разделе Week 3: Developer Tools, а пока держите вкладку открытой и давайте двигаться дальше.

Пришло время узнать о: HTTPS, сервис-воркерах и манифесте веб-приложения!

1. HTTPS¶

HTTPS или HyperText Transfer Protocol Secure — это защищенная версия протокола HTTP, по умолчанию шифрующая сквозные соединения между конечными точками клиента и сервера в вашем веб-приложении.

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

Хотите провести аудит PWA на предмет безопасности? Посмотрите на вкладку Security в отчете PWABuilder. Вот как это выглядит для примера PWA:

Получение хорошего показателя Security — самое простое требование, которое можно выполнить. Просто опубликуйте свой PWA на конечной точке с поддержкой HTTPS. У вас есть два варианта:

Использовать хостинг, который по умолчанию поддерживает HTTPS. Облачные провайдеры, такие как Azure, предлагают такие опции, как Azure App Service, которые могут помочь в этом.
Использовать собственного хостинг-провайдера и создать необходимые сертификаты с помощью бесплатных сервисов, например Let's Encrypt.

Обратите внимание, что браузеры, например Microsoft Edge, позволяют использовать http://localhost (не-HTTPS) для предварительного просмотра и тестирования PWA локально — только в целях отладки.

2. Сервис-воркеры¶

Сервис-воркеры — это особый тип Web Worker, задача JavaScript, которая может выполняться в фоновом режиме (для асинхронных или длительных операций), не влияя на производительность страницы.

Сервис-воркеры делают PWA надежным и независимым от сети, обеспечивая работоспособность в условиях нестабильной сети или когда устройство находится в автономном режиме (например, режим полета). Это достигается за счет двух ключевых возможностей:

Fetch API. Сервис-воркеры могут динамически перехватывать, изменять и отвечать на все сетевые запросы приложения. Они могут прослушивать события, указывающие на изменения в сети, адаптируя свои ответы на выборку в зависимости от условий выполнения и контекста приложения.
Cache API. Сервис-воркеры могут обращаться к клиентскому кэшу, а также к асинхронным хранилищам (например, IndexedDB) для проактивного хранения ресурсов для автономного доступа или повышения производительности.

Давайте посмотрим на сервис-воркеры в действии на примере нашего примера PWA

Посмотрите на вкладку Inspect, которую мы открыли в задании 1, и перейдите на вкладку Сервис-воркеры.

Отметьте кнопку Offline, переведя браузер в автономный режим.
Перейдите на главную страницу DevTools Tips. Вы должны иметь возможность просматривать ее, даже находясь в автономном режиме.
Щелкните на статье. Что произойдет? Может появиться сообщение "Вы не в сети", если вы не посещали ее ранее.
Снимите флажок с кнопки Оффлайн. Повторно посетите статью (она загрузится), затем снова установите флажок Offline. Вы сможете перемещаться между страницами Home и Article и видеть их обе в автономном режиме.

Такова мощь Fetch (перехват) и Cache (хранение), обеспечивающих специфическую для платформы работу (работу в автономном режиме) для PWA!

Хотите проверить PWA на поддержку сервис-воркеров? Найдите соответствующую вкладку в отчете PWA Builder. Вот как это выглядит для DevTools Tips.

Мы видим, что он отвечает основным требованиям (имеет сервисный работник) и реализует некоторые рекомендуемые и необязательные поведения (работает в автономном режиме, использует периодическую синхронизацию, использует фоновую синхронизацию) для улучшения работы PWA.

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

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

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

Вот тут-то и приходит на помощь Web Application Manifest. Это спецификация W3C Specification, определяющая формат файла на основе JSON, который предоставляет разработчикам централизованное место для размещения метаданных, связанных с приложениями.

С точки зрения разработчика PWA, это двухэтапный процесс:

Создайте файл manifest.json и свяжите его с PWA, указав ссылку на него в head вашей HTML-страницы (см. ниже).
Наполните этот файл необходимыми свойствами (для минимального PWA) и другими рекомендуемыми или необязательными свойствами (для лучшего в своем классе PWA).

<link rel="manifest" href="/manifest.json" />

Давайте посмотрим это в действии на примере нашего примера PWA

Вернитесь на вкладку Inspect, которую мы открыли в задании 1.

Просмотрите вкладку Elements — видите ли вы ссылку в <head>?
Просмотрите вкладку Applications или Network — видите ли вы файл manifest.json?

Вот как это выглядит для DevTools Tips. Обратите внимание, что на приборной панели также отображаются заполненные в данный момент свойства манифеста, сгруппированные для удобства по категориям (Identity, Presentation, Icons и т.д.). Подробнее об этом мы расскажем в одной из следующих статей.

Хотите проверить свой PWA на поддержку Manifest?

Посмотрите на свой отчет PWABuilder из задачи 2. Вот как это выглядит для DevTools Tips:

Этот инструмент группирует свойства по категориям Необходимые, Рекомендуемые и Опциональные. Используйте его для определения приоритетов и исправления недостающих свойств в интерактивном режиме для создания обновленного manifest.json. Смотрите Week 3: DevTools для более подробного ознакомления с этим инструментом.

Как Web App Manifest поддерживает Installability?

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

Резюме¶

Было много интересного, но вот основные выводы:

PWA используют открытые веб-технологии для реализации прогрессивных улучшений, совместимых с браузером.
Для обеспечения безопасности работы PWA следует использовать HTTPS. Он также обязателен для использования сервис-воркеров, обеспечивающих надежную работу в автономном режиме.
Используйте сервис-воркеры для перехвата запросов на выборку и управления локальными ресурсами кэша и хранилища, обеспечивая надежную работу PWA даже в автономном режиме.
Использование Web App Manifest для описания соответствующих свойств PWA для обеспечения возможности установки, что позволяет PWA выглядеть и ощущаться на устройствах как приложения для конкретной платформы.
Использовать инструменты разработчика (например, Inspect) для изучения работы PWA во время исполнения и просмотра того, как используются эти технологии.
Используйте инструменты аудита (например, PWABuilder) для проверки характеристик PWA и получения действенных рекомендаций по внесению соответствующих исправлений.

В следующей статье мы расскажем о деталях манифеста Web App Manifest, а пока попробуйте выполнить это упражнение.

Упражнение: Проверка и аудит PWA¶

В предыдущем упражнении вы выбрали пример PWA и установили его на локальное устройство (настольное или мобильное). Сегодня вы откроете приложение в браузере (я использую Microsoft Edge) и выполните следующие задачи:

Исследовать PWA — например, с помощью Microsoft Edge DevTools.
- Просмотрите различные вкладки приложения и разделы боковой панели.
- Взаимодействуйте с приложением во время его осмотра — что изменилось?
Аудит PWA — например, с помощью PWA Builder.
- Ознакомьтесь с отчетом и рекомендациями.
- Какие отличия вы увидели в оценке и характеристиках этого PWA?
- Что можно исправить, чтобы улучшить этот показатель?
Размышления о своем PWA.
- Какие уникальные возможности дает этому приложению то, что оно является PWA?
- Чем отличается работа с PWA от работы в браузере?

Источник — 1.2 Deconstructing PWA