Как сделать PWA-приложение похожим на обычное
Сделайте ваше прогрессивное веб-приложение похожим на «настоящее» приложение, а не на сайт
Если спросить любого человека, что такое PWA, скорее всего, вам ответят, что это обыкновенный сайт. То же самое говорится и в документации Microsoft, и на нашем сайте, и даже Фрэнсис Берриман и Алекс Рассел, которым принадлежит само авторство термина «PWA», это не отрицают. Да, PWA — это простые сайты, но у них гораздо больше возможностей. При правильном подходе к разработке PWA будет ощущаться не как сайт, а как «настоящее» приложение. Давайте разберемся, что это значит.
Мы рассмотрим этот вопрос на примере приложения Apple Podcasts. Оно доступно на настольных ПК под управлением macOS, а также на мобильных устройствах под управлением iOS и iPadOS. Хотя Podcasts — это мультимедийное приложение, его основные особенности, которые мы здесь рассмотрим, применимы и к другим категориям приложений.
Работа в офлайн-режиме #
Если вы попытаетесь вспомнить родные приложения, которые стоят у вас на смартфоне или компьютере, у всех приложений будет важное сходство: они никогда не показывают пустой экран. Приложение Podcasts работает даже в офлайн-режиме: когда нет подключения к сети, оно по-прежнему открывается. В разделе Топ-чарты ничего нет; вместо содержимого отображается сообщение Нет подключения к сети и кнопка Повторить попытку. Не очень удобно, но приложением по-прежнему можно пользоваться.
Как реализовать эту функцию в веб-приложении
Приложение Podcasts следует так называемой модели «оболочки приложения». Все необходимые для работы приложения статические данные кешируются локально, включая декоративные изображения, такие как иконки меню слева или кнопки встроенного проигрывателя. Динамический контент, такой как содержимое раздела Топ-чарты, загружается по запросу; при этом в случае сбоя загрузки остается доступным резервный контент из локального кеша. Прочитайте статью Модель оболочки приложения, чтобы узнать, как применить эту архитектурную модель к вашему веб-приложению.
Доступ к контенту и воспроизведение медиафайлов в офлайн-режиме #
Находясь офлайн, я по-прежнему могу открыть в левой боковой панели раздел «Загрузки» и прослушать скачанные выпуски подкастов, готовые к воспроизведению и отображаемые со всеми метаданными, такими как обложки и описания.
Как реализовать эту функцию в веб-приложении
Ранее скачанный мультимедийный контент можно воспроизводить из кеша, например при помощи рецепта Serve cached audio and video («Воспроизведение кешированного аудио и видео») из библиотеки Workbox. Другие типы контента всегда можно сохранить либо в кеше, либо в IndexedDB. Подробнее о том, в каких случаях следует использовать различные технологии хранения данных, см. в статье Хранение данных в веб-браузере. Если вам нужно хранить данные без риска их потери при нехватке доступного объема памяти, используйте Persistent Storage API.
Автоматическое фоновое скачивание #
Когда я нахожусь в сети, я без проблем могу найти в приложении контент, например введя запрос http 203, и если я подпишусь на подкаст HTTP 203, высветившийся в результатах, то его последний выпуск мгновенно скачается, не требуя дополнительных действий.
Как реализовать эту функцию в веб-приложении
Скачивание выпуска подкаста — это процесс, который может занять много времени. Background Fetch API позволяет делегировать скачивание браузеру, который выполнит его в фоновом режиме. Более того, в Android браузер может, в свою очередь, делегировать процесс скачивания операционной системе, чтобы ему не пришлось непрерывно оставаться запущенным. Как только скачивание завершится, произойдет пробуждение сервис-воркера приложения и вы сможете обработать полученный ответ.
Обмен и взаимодействие с другими приложениями #
Приложение Podcasts естественным образом интегрируется с другими приложениями. Например, когда я щелкаю правой кнопкой мыши понравившийся выпуск, я могу поделиться им с другими приложениями на своем устройстве, например с приложением «Сообщения». Оно также легко взаимодействует с системным буфером обмена. Я могу щелкнуть правой кнопкой мыши любой выпуск и скопировать ссылку на него.
Как реализовать эту функцию в веб-приложении
Web Share API и Web Share Target API позволяют приложению обмениваться текстами, файлами и ссылками с другими приложениями на устройстве. Хотя веб-приложения пока не могут добавлять пункты во встроенное контекстное меню операционной системы, существует множество других способов обмена данными с приложениям на устройстве. При помощи Async Clipboard API можно программно управлять текстовыми и графическими данными (PNG-изображениями) в системном буфере обмена. На Android можно использовать Contact Picker API для выбора записей из списка контактов устройства. Если у вас есть как родное приложение, так и PWA, вы можете воспользоваться Get Installed Related Apps API, чтобы проверить наличие установленного родного приложения. Если оно установлено, нет необходимости предлагать пользователю установить PWA или разрешить push-уведомления в веб-приложении.
Фоновое обновление приложения #
В настройках приложения Podcasts можно настроить автоматическое скачивание новых выпусков. Вам даже не нужно об этом помнить — у вас всегда будет самый свежий контент. Разве это не волшебство?
Как реализовать эту функцию в веб-приложении
Periodic Background Sync API позволяет приложению регулярно обновлять содержимое в фоновом режиме без необходимости его запуска. Это означает, что свежий контент всегда доступен заранее и пользователи смогут ознакомиться с ним сразу же, когда им будет удобно.
Синхронизация состояния через облако #
В то же время мои подписки синхронизируются между всеми моими устройствами. В эпоху цифровых технологий мне не нужно синхронизировать их вручную. Мне также не нужно бояться, что память моего мобильного устройства будут занимать выпуски, которые уже были просмотрены на компьютере, и наоборот. Состояние воспроизведения синхронизируется, а прослушанные выпуски автоматически удаляются.
Как реализовать эту функцию в веб-приложении
Синхронизация данных о состоянии приложения — это задача, которую можно делегировать Background Sync API. Сама синхронизация не обязательно должна выполняться сразу; это можно сделать потом, даже если пользователь закрыл приложение.
Управление с помощью физических мультимедийных клавиш #
Когда я нахожусь в другом приложении, например читаю новости в браузере Chrome, я по-прежнему могу управлять приложением Podcasts при помощи мультимедийных клавиш ноутбука. Нет необходимость переключаться на приложение для того, чтобы промотать запись вперед или назад.
Как реализовать эту функцию в веб-приложении
Для обеспечения поддержки мультимедийных клавиш используется Media Session API. Он позволяет управлять приложением с помощью мультимедийных клавиш на физической клавиатуре, наушниках или даже с помощью экранных кнопок на умных часах. Кроме того, вы можете дополнительно повысить удобство прокрутки, генерируя тактильный отклик, когда пользователь пролистывает важную отметку, такую как окончание вступительной заставки или начало новой главы.
Многозадачность и значок приложения #
Разумеется, я всегда могу переключиться к приложению Podcasts, где бы ни находился. У приложения есть легкоузнаваемый значок, который можно поместить на рабочий стол или панель приложений, чтобы запускать сразу, как только приложение понадобится.
Как реализовать эту функцию в веб-приложении
Как на ПК, так и на мобильных устройствах прогрессивные веб-приложения устанавливаются на экран «Домой», в меню «Пуск» или в панель приложений. Установка может выполняться при помощи автоматически отображаемого запроса или полностью контролироваться разработчиком. В статье Что нужно для возможности установки? есть вся необходимая информация. При переключении задач PWA-приложения отображаются отдельно от браузера.
Быстрые действия в контекстном меню #
Наиболее часто используемые действия в приложении — Поиск нового контента и Проверка новых выпусков — доступны прямо из контекстного меню приложения в Dock. В меню Параметры также можно включить запуск приложения при входе в систему.
Как реализовать эту функцию в веб-приложении
Указав в манифесте PWA-приложения быстрые действия при нажатии на значок, можно зарегистрировать быстрые пути к часто используемым функциям, чтобы пользователи могли обращаться к ним напрямую через значок приложения. В таких операционных системах, как macOS, пользователи также могут щелкнуть правой кнопкой мыши на значок приложения и настроить его запуск при входе в систему. В настоящее время ведется работа над предложением поддержки запуска при входе.
Использование в качестве приложения по умолчанию #
С приложением Podcasts можно взаимодействовать из других приложений iOS и даже сайтов или электронных писем, используя схему URL-адресов podcasts://. Если, находясь в браузере, я перейду по ссылке podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903, я попаду прямо в приложение Podcasts, где смогу подписаться на подкаст или прослушать его.
Как реализовать эту функцию в веб-приложении
Обработка произвольных схем URL-адресов пока невозможна, но уже ведется работа над предложением по обработке протоколов URL-адресов для PWA-приложений. В настоящее время наилучшая альтернатива — это registerProtocolHandler() со схемой, начинающейся на web+.
Интеграция с локальной файловой системой #
На первый взгляд это неочевидно, но приложение Podcasts хорошо интегрируется с локальной файловой системой. Когда я скачиваю выпуск подкаста на ноутбук, он сохраняется в каталог ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache. В отличие, скажем, от ~/Documents, этот каталог не предназначен для прямого доступа обычных пользователей, однако доступ к нему возможен. Другие механизмы хранения данных, помимо файлов, описываются в разделе об офлайн-контенте.
Как реализовать эту функцию в веб-приложении
File System Access API позволяет разработчикам получать доступ к локальной файловой системе устройства. Вы можете использовать его либо напрямую, либо через библиотеку-прослойку browser-fs-access, которая прозрачно для пользователя предоставляет альтернативный режим, если браузер не поддерживает API. В целях безопасности веб-приложениям не разрешен доступ к системным каталогам.
Внешний вид, соответствующий платформе #
Есть менее очевидный признак, по которому сразу можно опознать родное приложение, такое как Podcasts: подписи элементов управления невозможно выделить мышью, а шрифт текста совпадает с системным. Кроме того, приложение учитывает выбранную в системе (темную) тему оформления.
Как реализовать эту функцию в веб-приложении
При помощи CSS-свойстваuser-select со значением none можно защитить элементы пользовательского интерфейса от случайного выделения. Однако не злоупотребляете этим свойством, запрещая выделять контент приложения. Его следует применять только по отношению к элементам пользовательского интерфейса, таким как подписи кнопок и т. д. Значение system-ui свойства font-family позволяет использовать в приложении стандартный системный шрифт интерфейса. Наконец, приложение может учитывать выбранную пользователем тему оформления, руководствуясь значением prefers-color-scheme, но при этом в нем может быть реализован дополнительный переключатель темной темы для ее переопределения. Еще один момент, с которым следует определиться, — это поведение браузера при достижении границы области прокрутки; например, можно реализовать собственный жест pull to refresh, используя CSS-свойство overscroll-behavior.Нестандартная строка заголовка #
Взглянув на окно приложения Podcasts, можно заметить, что у него нет стандартной строки заголовка, совмещенной с панелью инструментов, как, например, в окне Safari; но есть свой индивидуальный интерфейс с боковой панелью, прикрепленной к главному окну проигрывателя.
Как реализовать эту функцию в веб-приложении
Хотя в настоящее время такой возможности не предусмотрено, ведутся работы над возможностью видоизменения строки заголовка. Однако вы можете (и должны) указать в манифесте веб-приложения свойства display и theme-color, чтобы определить внешний вид окна приложения и решить, какие из стандартных элементов управления браузера должны отображаться (если вообще должны).
Плавная анимация #
Анимация в приложении Podcasts быстрая и плавная. Например, если открыть расположенную справа панель Примечания к выпуску, она выдвигается с красивой анимацией. Если удалить выпуск из загрузок, остальные выпуски плавно сдвигаются вверх, занимая его место.
Как реализовать эту функцию в веб-приложении
В высокопроизводительной анимации на веб-страницах, безусловно, нет ничего невозможно, если следовать советам, приведенным в статье Анимация и производительность. Анимацию прокрутки, которую можно наблюдать при перелистывании кольцевых галерей или контента, разбитого на страницы, можно существенно улучшить при помощи функции CSS Scroll Snap. Для полного контроля можно использовать Web Animations API.
Отображение контента за пределами приложения #
Podcasts на iOS может отображать контент за пределами самого приложения, например на системном экране виджетов или в виде предложений Siri. Своевременное отображение призывов к действию, по которым можно перейти в одно касание, может значительно повысить уровень повторного вовлечения для такого приложения, как Podcasts.
Как реализовать эту функцию в веб-приложении
Content Index API позволяет приложению сообщать браузеру, какое содержимое PWA доступно в офлайн-режиме, что даёт возможность браузеру отображать его содержимое за пределами основного приложения. Помечая интересный контент в приложении при помощи свойства speakable, а также структурированной разметки в целом, можно добиться, чтобы поисковые системы и виртуальные помощники, такие как Google Ассистент, показывали ваши предложения в лучшем виде.
Виджет управления мультимедиа на экране блокировки #
Когда воспроизводится выпуск подкаста, приложение Podcasts отображает на экране блокировки красивый виджет управления с метаданными: обложкой и названием выпуска, а также названием подкаста.
Как реализовать эту функцию в веб-приложении
При помощи Media Session API можно указывать метаданные, такие как обложки, названия треков и т. д., которые будут отображаться на экране блокировки, умных часах и других мультимедийных виджетах браузера.
Push-уведомления #
Push-уведомления в Интернете стали довольно назойливыми (хотя запросы уведомлений теперь гораздо менее шумные), но при правильном использовании они могут принести большую пользу. Например, приложение Podcasts для iOS при необходимости может уведомлять меня о новых выпусках подкастов, на которые я подписан, или рекомендовать новые, а также сообщать о новых функциях приложения.
Как реализовать эту функцию в веб-приложении
Push API позволяет приложению получать push-уведомления, чтобы держать пользователей в курсе происходящего в вашем PWA. Отображать уведомления по расписанию без использования сети можно при помощи Notification Triggers API.
Наклейки возле значка приложения #
Когда выходят новые выпуски подкастов, на которые я подписан, возле значка приложения Podcasts на экране «Домой» возникает наклейка, ненавязчиво приглашая меня вернуться в приложение.
Как реализовать эту функцию в веб-приложении
Отображать наклейки возле значка приложения можно при помощи Badging API. Это особенно полезно, если вашему PWA нужно показывать число «непрочитанных» элементов или вам нужен способ ненавязчиво привлекать внимание пользователя к приложению.
Приоритет воспроизведения мультимедиа над настройками энергосбережения #
При воспроизведении подкастов экран может выключиться, но система не будет переходить в режим ожидания. Кроме того, приложения также могут удерживать во включенном состоянии экран, например для отображения текстов песен или субтитров.
Как реализовать эту функцию в веб-приложении
Screen Wake Lock API позволяет удерживать экран во включенном состоянии. Воспроизведение медиаконтента на веб-странице автоматически предотвращает переход системы в режим ожидания.
Поиск приложений через магазины #
В macOS приложение Podcasts является частью системы, но на iOS оно устанавливается из App Store. При поиске по запросу podcast, podcasts или apple podcasts приложение тут же появится в списке результатов.
Как реализовать эту функцию в веб-приложении
Apple не позволяет публиковать PWA-приложения в App Store, в то время как на Android вы можете отправлять их на публикацию в виде Trusted Web Activity. Скрипт bubblewrap делает эту операцию безболезненной. Этот же скрипт лежит в основе встроенной в PWABuilder функции экспорта Android-приложений, для использования которой не нужно уметь пользоваться командной строкой.
Краткий список функций #
В таблице ниже представлен краткий список всех функций, а также ссылок на ресурсы, которые помогут реализовать эти функции в веб-приложениях.
Заключение #
С момента своего появления в 2015 году PWA-приложения сильно эволюционировали. В рамках Project Fugu 🐡 команда Chromium, в которую входят разработчики из разных компаний, работает над устранением последних оставшихся слабых мест. Воспользовавшись хотя бы некоторыми советами из этой статьи, вы сможете вплотную приблизиться к «родным» приложениям по уровню комфорта, заставив пользователей забыть, что они имеют дело с «обыкновенным сайтом». Ведь кого на самом деле волнует, как приложение устроено внутри? Гораздо важнее то, как оно работает.
Благодарности #
Эту статью проверили Кейси Баскес, Джо Медли, Джошуа Белл, Дион Алмаер, Эйд Ошинай, Пит Лепейдж, Сэм Торогуд, Райли Грант и Джеффри Ясскин.