Сделайте так, чтобы ваше прогрессивное веб-приложение выглядело не как веб-сайт, а как «настоящее» приложение.
Когда вы играете в бинго с модными словечками Progressive Web App, лучше всего выбрать «PWA — это просто веб-сайты». Документация Microsoft по PWA согласна с этим , мы говорим об этом на этом самом сайте, и даже номинанты PWA Фрэнсис Берриман и Алекс Рассел тоже так пишут . Да, PWA — это просто веб-сайты, но они представляют собой нечто большее. Если все сделано правильно, PWA будет ощущаться не как веб-сайт, а как «настоящее» приложение. Что значит чувствовать себя настоящим приложением?
Чтобы ответить на этот вопрос, позвольте мне использовать в качестве примера приложение Apple Podcasts . Он доступен на macOS для настольных компьютеров и на iOS (и iPadOS соответственно) на мобильных устройствах. Хотя «Подкасты» — это мультимедийное приложение, основные идеи, которые я иллюстрирую с его помощью, применимы и к другим категориям приложений.
Возможность работы в автономном режиме
Если вы сделаете шаг назад и подумаете о приложениях для конкретных платформ, которые есть на вашем мобильном телефоне или настольном компьютере, вы увидите одну вещь: вы никогда не получите ничего. В приложении «Подкасты», даже если я оффлайн, всегда что-то есть. Когда нет подключения к сети, приложение, естественно, все равно открывается. В разделе «Топ-чарты» не отображается никакого контента, а вместо этого отображается сообщение «Невозможно подключиться прямо сейчас» в сочетании с кнопкой «Повторить» . Возможно, это не самый приятный опыт, но кое-что я получаю.
Приложение «Подкасты» следует так называемой модели оболочки приложения. Весь статический контент, необходимый для отображения основного приложения, кэшируется локально, включая декоративные изображения, такие как значки левого меню и значки основного пользовательского интерфейса проигрывателя. Динамический контент, такой как данные Top Charts, загружается только по требованию, а на случай сбоя загрузки доступен локально кэшированный резервный контент. Прочтите статью Модель оболочки приложения , чтобы узнать, как применить эту архитектурную модель к вашему веб-приложению.
Доступен офлайн-контент и возможность воспроизведения мультимедиа
Находясь в автономном режиме, через левый ящик я все равно могу перейти в раздел «Загруженные» и наслаждаться загруженными эпизодами подкаста, которые готовы к воспроизведению и отображаются со всеми метаданными, такими как изображения и описания.
Ранее загруженный медиаконтент можно обслуживать из кэша, например, с помощью рецепта «Подавать кэшированные аудио и видео» из библиотеки Workbox . Другой контент всегда можно хранить в кеше или в IndexedDB. Прочтите статью Хранилище для Интернета , чтобы узнать все подробности и узнать, когда и какую технологию хранения использовать. Если у вас есть данные, которые должны храниться постоянно без риска их очистки при исчерпании доступного объема памяти, вы можете использовать API постоянного хранилища .
Проактивная фоновая загрузка
Когда я снова в сети, я, конечно, могу искать контент по запросу типа http 203 , а когда я решаю подписаться на результат поиска, подкаст HTTP 203 , сразу загружается последняя серия сериала, без вопросов.
Загрузка эпизода подкаста — операция, которая потенциально может занять больше времени. API фоновой выборки позволяет делегировать загрузку браузеру, который позаботится о ней в фоновом режиме. На Android браузер, в свою очередь, может даже делегировать эти загрузки операционной системе, поэтому браузеру не нужно постоянно работать. После завершения загрузки сервис-воркер вашего приложения просыпается, и вы можете решить, что делать с ответом.
Совместное использование и взаимодействие с другими приложениями
Приложение «Подкасты» естественным образом интегрируется с другими приложениями. Например, когда я щелкаю правой кнопкой мыши по понравившемуся эпизоду, я могу поделиться им с другими приложениями на моем устройстве, например с приложением «Сообщения». Он также естественным образом интегрируется с системным буфером обмена. Я могу щелкнуть правой кнопкой мыши любой эпизод и скопировать ссылку на него.
API-интерфейс Web Share и API-интерфейс Web Share Target позволяют вашему приложению обмениваться текстами, файлами и ссылками и получать их от других приложений на устройстве. Хотя веб-приложение пока не может добавлять пункты меню во встроенное контекстное меню операционной системы, существует множество других способов создания ссылок на другие приложения на устройстве и обратно. С помощью Async Clipboard API вы можете программно читать и записывать текстовые и графические данные (изображения PNG) в системный буфер обмена. На Android вы можете использовать API выбора контактов для выбора записей в диспетчере контактов устройства. Если вы предлагаете как приложение для конкретной платформы, так и PWA, вы можете использовать API установки связанных приложений , чтобы проверить, установлено ли приложение для конкретной платформы. В этом случае вам не нужно предлагать пользователю установить PWA или принять его. веб-push-уведомления.
Фоновое обновление приложения
В настройках приложения «Подкасты» я могу настроить приложение на автоматическую загрузку новых выпусков. Таким образом, мне даже не придется об этом думать, обновленный контент всегда будет там. Магия.
API периодической фоновой синхронизации позволяет вашему приложению регулярно обновлять свое содержимое в фоновом режиме без необходимости его запуска. Это означает, что новый контент доступен заранее, поэтому ваши пользователи могут сразу же начать его изучать, когда захотят.
Состояние синхронизируется через облако
В то же время мои подписки синхронизируются на всех моих устройствах. В бесшовном мире мне не нужно беспокоиться о синхронизации моих подписок на подкасты вручную. Точно так же мне не нужно бояться, что память моего мобильного устройства будет занята эпизодами, которые я уже прослушал на своем рабочем столе. Состояние воспроизведения синхронизируется, а прослушанные эпизоды автоматически удаляются.
Синхронизация данных о состоянии приложения — это задача, которую вы можете делегировать API фоновой синхронизации . Сама операция синхронизации не обязательно должна происходить немедленно, просто со временем и, возможно, даже тогда, когда пользователь уже снова закрыл приложение.
Аппаратные средства управления мультимедийными клавишами
Когда я занят другим приложением, например, читаю страницу новостей в браузере Chrome, я все равно могу управлять приложением «Подкасты» с помощью мультимедийных клавиш на своем ноутбуке. Нет необходимости переключаться в приложение, чтобы просто пропустить вперед или назад.
Ключи мультимедиа поддерживаются API сеанса мультимедиа . Таким образом, пользователи могут использовать аппаратные мультимедийные клавиши на своих физических клавиатурах, наушниках или даже управлять веб-приложением с помощью программных мультимедийных клавиш на своих умных часах. Дополнительная идея для облегчения операций поиска — отправить шаблон вибрации , когда пользователь выполняет поиск по значительной части контента, например, проходя вступительные титры или границу главы.
Многозадачность и ярлык приложения
Конечно, я всегда могу вернуться к приложению «Подкасты» в режиме многозадачности из любого места. У приложения есть четко различимый значок, который я также могу поместить на свой рабочий стол или в док-станцию приложений, чтобы подкасты можно было запускать сразу же, когда я захочу.
Прогрессивные веб-приложения как на настольных, так и на мобильных устройствах можно установить на главный экран, в меню «Пуск» или в док-станцию приложений. Установка может происходить на основе упреждающего запроса или полностью контролироваться разработчиком приложения. Статья Что нужно для установки? охватывает все, что вам нужно знать. При многозадачности PWA выглядят независимыми от браузера.
Быстрые действия в контекстном меню
Наиболее распространенные действия приложения — «Поиск нового контента» и «Проверка новых выпусков » — доступны прямо из контекстного меню приложения в Dock. Через меню «Параметры» я также могу решить открыть приложение во время входа в систему.
Указав ярлыки значков приложений в манифесте веб-приложения PWA, вы можете зарегистрировать быстрые маршруты к общим задачам, к которым пользователи смогут обращаться непосредственно из значка приложения. В таких операционных системах, как macOS, пользователи также могут щелкнуть правой кнопкой мыши значок приложения и настроить запуск приложения во время входа в систему. Продолжается работа над предложением запуска при входе в систему .
Работать как приложение по умолчанию
Другие приложения iOS и даже веб-сайты или электронные письма могут интегрироваться с приложением «Подкасты», используя схему URL-адресов podcasts:// . Если я перейду по ссылке типа podcasts://podcasts.apple.com/podcast/the-css-podcast/id1042283903 в браузере, я попаду прямо в приложение «Подкасты» и смогу решить подписаться или прослушать подкаст.
Обработка полностью настраиваемых схем URL-адресов пока невозможна, но продолжается работа над предложением по обработке протоколов URL-адресов для PWA. В настоящее время лучшей альтернативой является registerProtocolHandler() с префиксом схемы web+ .
Интеграция с локальной файловой системой
Возможно, вы не сразу об этом подумали, но приложение «Подкасты» естественным образом интегрируется с локальной файловой системой. Когда я загружаю эпизод подкаста, на моем ноутбуке он сохраняется в ~/Library/Group Containers/243LU875E5.groups.com.apple.podcasts/Library/Cache . В отличие, скажем, от ~/Documents , этот каталог, конечно, не предназначен для прямого доступа обычных пользователей, но он существует. Другие механизмы хранения, помимо файлов, упоминаются в разделе автономного контента .
API доступа к файловой системе позволяет разработчикам получить доступ к локальной файловой системе устройства. Вы можете использовать его напрямую или через библиотеку поддержки браузера-fs-access , которая прозрачно предоставляет запасной вариант для браузеров, которые не поддерживают API. По соображениям безопасности системные каталоги недоступны через Интернет.
Внешний вид платформы
Есть более тонкая вещь, которая очевидна для приложения iOS, такого как «Подкасты»: ни одна из текстовых меток не может быть выбрана, и весь текст сливается с системным шрифтом устройства. Также учитывается мой выбор цветовой темы системы (темный режим).
Используя свойство CSS user-select со значением none , вы можете защитить элементы пользовательского интерфейса от случайного выбора. Однако не злоупотребляйте этим свойством, чтобы сделать содержимое приложения недоступным для выбора. Его следует использовать только для элементов пользовательского интерфейса, таких как тексты кнопок и т. д. Значение system-ui для свойства CSS font-family позволяет вам указать шрифт пользовательского интерфейса по умолчанию для системы, которая будет использоваться для вашего приложения. Наконец, ваше приложение может подчиняться предпочтениям цветовой схемы пользователя, соблюдая его выбор prefers-color-scheme , с дополнительным переключателем темного режима , чтобы переопределить его. Еще один вопрос, который следует решить, — это то, что должен делать браузер при достижении границы области прокрутки, например, реализовать пользовательское извлечение для обновления . Это возможно с помощью CSS-свойства overscroll-behavior .
Настраиваемая строка заголовка
Когда вы смотрите на окно приложения «Подкасты», вы замечаете, что оно не имеет классической встроенной строки заголовка и панели инструментов, как, например, окно браузера Safari, а имеет настраиваемый интерфейс, который выглядит как боковая панель, прикрепленная к основному окну проигрывателя.
Хотя в настоящее время это невозможно, в данный момент ведется работа над настройкой строки заголовка . Однако вы можете (и должны) указать свойства display и theme-color манифеста веб-приложения, чтобы определить внешний вид окна вашего приложения и решить, какие элементы управления браузера по умолчанию (возможно, ни один из них) не должны отображаться.
Яркая анимация
Анимация в приложении в подкастах быстрая и плавная. Например, когда я открываю ящик «Примечания к эпизодам» справа, он элегантно выдвигается. Когда я удаляю один эпизод из загрузок, оставшиеся эпизоды всплывают и занимают пространство экрана, освобожденное удаленным эпизодом.
Высокопроизводительная анимация в Интернете, безусловно, возможна, если вы примете во внимание ряд рекомендаций, изложенных в статье «Анимации и производительность» . Анимацию прокрутки, которую обычно можно увидеть в постраничном контенте или медиа-каруселях, можно значительно улучшить с помощью функции CSS Scroll Snap . Для полного контроля вы можете использовать API веб-анимации .
Контент появился за пределами приложения
Приложение «Подкасты» на iOS может отображать контент в других местах, кроме самого приложения, например, в представлении «Виджеты» системы или в форме предложения Siri. Наличие проактивных призывов к действию, основанных на использовании, для взаимодействия с которыми требуется всего лишь нажатие, может значительно повысить уровень повторного вовлечения такого приложения, как «Подкасты».
API индекса контента позволяет вашему приложению сообщать браузеру, какой контент PWA доступен в автономном режиме. Это позволяет браузеру отображать этот контент за пределами основного приложения. Помечая интересный контент в своем приложении как подходящий для воспроизведения звука в устной форме и используя структурированную разметку в целом, вы можете помочь поисковым системам и виртуальным помощникам, таким как Google Assistant, представить ваши предложения в идеальном свете.
Виджет управления мультимедиа на экране блокировки
Когда воспроизводится эпизод подкаста, приложение «Подкасты» отображает на экране блокировки красивый виджет управления, который содержит такие метаданные, как обложка эпизода, название эпизода и название подкаста.
API медиа-сеанса позволяет указывать метаданные, такие как изображения, названия треков и т. д., которые затем отображаются на экране блокировки, умных часах или других медиа-виджетах в браузере.
Всплывающее уведомление
Push-уведомления стали немного раздражать в Интернете (хотя уведомления теперь стали намного тише ). Но при правильном использовании они могут принести большую пользу. Например, приложение iOS Podcasts может дополнительно уведомлять меня о новых выпусках подкастов, на которые я подписан, или рекомендовать новые, а также предупреждать меня о новых функциях приложения.
Push API позволяет вашему приложению получать push-уведомления, чтобы вы могли уведомлять своих пользователей о примечательных событиях, связанных с вашим PWA. Для уведомлений, которые должны срабатывать в известное время в будущем и не требуют подключения к сети, вы можете использовать API триггеров уведомлений .
Значок приложения
Всякий раз, когда для одного из подкастов, на которые я подписан, появляются новые выпуски, на значке главного экрана подкастов появляется значок приложения, что снова побуждает меня повторно подключиться к приложению, не навязываясь.
Вы можете установить значки приложений с помощью Badging API . Это особенно полезно, когда в вашем PWA есть понятие «непрочитанных» элементов или когда вам нужен способ ненавязчиво вернуть внимание пользователя к приложению.
Воспроизведение мультимедиа имеет приоритет над настройками энергосбережения.
Во время воспроизведения подкаста экран может выключиться, но система не перейдет в режим ожидания. Приложения также могут при необходимости поддерживать режим бодрствования экрана, например, для отображения текстов песен или титров.
API Screen Wake Lock позволяет предотвратить выключение экрана. Воспроизведение мультимедиа в Интернете автоматически предотвращает переход системы в режим ожидания.
Обнаружение приложений через магазин приложений
Хотя приложение «Подкасты» является частью настольного компьютера macOS, на iOS его необходимо установить из App Store. Быстрый поиск podcast , podcasts или apple podcasts сразу же добавляет приложение в App Store.
Хотя Apple не разрешает PWA в App Store, на Android вы можете отправить свое PWA в виде доверенной веб-активности . Скрипт bubblewrap делает эту операцию безболезненной. Этот сценарий также является внутренней функцией экспорта приложений Android в PWABuilder , которую вы можете использовать, не касаясь командной строки.
Краткое описание функций
В таблице ниже представлен краткий обзор всех функций и список полезных ресурсов для их реализации в Интернете.
Заключение
PWA прошли долгий путь с момента их появления в 2015 году. В рамках проекта Fugu 🐡 межфирменная команда Chromium работает над устранением последних оставшихся пробелов. Следуя хотя бы некоторым советам из этой статьи, вы постепенно сможете приблизиться к ощущению приложения и заставить пользователей забыть, что они имеют дело «просто с веб-сайтом», потому что, честно говоря, большинство из них не волнует, как построено ваше приложение (да и зачем?), лишь бы оно выглядело как настоящее приложение.
Благодарности
Эту статью рецензировали Кейси Баскс , Джо Медли , Джошуа Белл , Дион Альмаер , Аде Ошинай , Пит ЛеПейдж , Сэм Торогуд , Рейли Грант и Джеффри Ясскин .