Прогрессивные веб-приложения (PWA) создаются и совершенствуются с использованием современных API, обеспечивая расширенные возможности, надежность и простоту установки, доступные любому человеку, в любом месте и на любом устройстве благодаря единой кодовой базе. Чтобы создать наилучший опыт, воспользуйтесь основными и оптимальными контрольными списками и рекомендациями.
Контрольный список основных прогрессивных веб-приложений
Контрольный список прогрессивных веб-приложений описывает, что делает приложение пригодным для установки и использования всеми пользователями, независимо от размера или типа ввода.
Быстро стартует, быстро остаётся
Производительность играет важную роль в успехе любого онлайн-опыта, поскольку высокоэффективные сайты привлекают и удерживают пользователей лучше, чем неэффективные. Сосредоточьтесь на оптимизации показателей эффективности, ориентированных на пользователя.
Почему
Скорость критически важна для привлечения пользователей к использованию вашего приложения. Более того, при увеличении времени загрузки страницы с одной до десяти секунд вероятность отказа пользователя возрастает на 123%. Производительность не ограничивается событием load . Пользователи никогда не должны сомневаться, было ли зафиксировано их взаимодействие, например, нажатие кнопки. Прокрутка и анимация должны быть плавными. Производительность влияет на весь ваш опыт взаимодействия: как на поведение приложения, так и на то, как его воспринимают пользователи.
Хотя у всех приложений разные потребности, аудиты производительности в Lighthouse основаны на основных показателях веб-приложений (Core Web Vitals) , и высокие результаты по этим показателям повысят вероятность того, что ваши пользователи будут довольны. Вы также можете использовать PageSpeed Insights или отчёт Chrome User Experience Report , чтобы получить реальные данные о производительности вашего веб-приложения.
Как
Следуйте нашему руководству по быстрой загрузке, чтобы узнать, как сделать так, чтобы ваше PWA запускалось быстро и оставалось быстрым.
Работает в любом браузере
Пользователи могут использовать любой браузер по своему выбору для доступа к вашему веб-приложению до его установки.
Почему
Прогрессивные веб-приложения — это прежде всего веб-приложения, а это значит, что они должны работать во всех браузерах.
По мнению Джереми Кейта из книги «Resilient Web Design» , эффективный способ добиться этого — определить основные функции, сделать их доступными с помощью максимально простой технологии, а затем максимально улучшить пользовательский опыт. Во многих случаях это означает начать с HTML для создания основных функций и улучшить пользовательский опыт с помощью CSS и JavaScript для создания более увлекательного опыта.
Возьмём, к примеру, отправку формы. Простейший способ реализовать это — использовать HTML-форму, которая отправляет POST запрос. После её создания вы можете улучшить взаимодействие с пользователем, используя JavaScript для проверки формы и отправки формы через AJAX, что улучшит взаимодействие с пользователем, который может её поддерживать.
Пользователи вашего сайта работают с различными устройствами и браузерами. Нельзя ориентироваться только на верхнюю часть этого спектра. Используйте функцию обнаружения функций, чтобы обеспечить удобство использования для максимально широкого круга потенциальных пользователей, включая тех, кто использует браузеры и устройства, которые ещё не существуют.
Как
Книга Джереми Кейта «Resilient Web Design» — прекрасный ресурс, описывающий, как следует мыслить при разработке веб-дизайна в рамках этой кроссбраузерной, прогрессивной методологии.
Дополнительное чтение
- Хорошим введением в тему является книга «Понимание прогрессивного улучшения» от A List Apart.
- Статья журнала Smashing Magazine «Прогрессивное улучшение: что это такое и как его использовать?» содержит практическое введение и ссылки на более сложные темы.
- В статье MDN «Реализация обнаружения признаков» обсуждается, как обнаружить признак путем прямого запроса к нему.
Адаптируется к любому размеру экрана
Пользователи могут использовать ваше PWA на экранах любого размера, и весь его контент доступен при любом размере области просмотра.
Почему
Устройства бывают разных размеров, и пользователи могут использовать ваше приложение на экранах разных размеров, даже на одном устройстве. Поэтому крайне важно убедиться, что ваш контент помещается в область просмотра, а все функции и контент вашего сайта можно использовать на экранах любого размера.
Задачи, которые пользователи хотят выполнить, и контент, к которому они хотят получить доступ, не меняются с размером области просмотра. Вы можете перестраивать контент для разных размеров области просмотра, и всё это должно быть на месте, так или иначе. Как утверждает Люк Вроблевски в своей книге «Mobile First» , начиная с малого и корректируя дизайн для больших экранов, можно улучшить дизайн сайта:
«Мобильные устройства требуют от команд разработчиков программного обеспечения сосредоточиться только на самых важных данных и действиях в приложении. На экране размером 320 на 480 пикселей просто нет места для посторонних, ненужных элементов. Приходится расставлять приоритеты».
Как
Существует множество ресурсов по адаптивному дизайну, в том числе: оригинальная статья Итана Маркотта и подборка важных концепций, связанных с ней, а также множество книг и докладов.
Чтобы сузить обсуждение до аспектов контента адаптивного дизайна, см.:
- Дизайн, ориентированный на контент
- Адаптивные макеты с выводом содержимого .
- Семь смертельных мифов о мобильных устройствах , которые актуальны как для небольших экранов адаптивных сайтов, так и для всех мобильных устройств.
Предоставляет пользовательскую офлайн-страницу
Если пользователи находятся в автономном режиме, сохранение их в PWA обеспечивает более удобный интерфейс, чем возврат на автономную страницу браузера по умолчанию.
Почему
Пользователи ожидают, что установленные приложения будут работать независимо от состояния подключения. Платформозависимые приложения никогда не отображают пустую страницу в офлайн-режиме, а PWA никогда не должны отображать стандартную офлайн-страницу браузера. Предоставление персонализированного офлайн-режима, как при переходе пользователя по URL-адресу, не сохраненному в кэше, так и при попытке использования функции, требующей подключения, помогает создать ощущение, что ваш веб-интерфейс — часть устройства, на котором он работает.
Как
Во время install сервис-воркера вы можете предварительно кэшировать настраиваемую офлайн-страницу, которая будет отображаться при переходе пользователя в офлайн-режим. Чтобы узнать, как реализовать её самостоятельно, прочтите статью «Создание резервной офлайн-страницы» . Chrome продолжает отображать базовую офлайн-страницу, если она не указана.
Можно установить
Пользователи, которые устанавливают или добавляют приложения на свои устройства, как правило, больше взаимодействуют с этими приложениями.
Почему
Установка Progressive Web App позволяет ему выглядеть, работать и вести себя так же, как и все остальные установленные приложения. Оно запускается там же, где и другие приложения. Оно работает в собственном окне, отдельном от браузера, и отображается в списке задач, как и другие приложения.
Как и в случае с приложениями, ориентированными на конкретные устройства, пользователи, устанавливающие ваши приложения, составляют самую вовлечённую аудиторию, и показатели их вовлечённости часто сопоставимы с показателями пользователей приложений на мобильных устройствах. К этим показателям относятся большее количество повторных посещений, более длительное время, проведённое на вашем сайте, и более высокие показатели конверсии по сравнению с типичными посетителями.
Как
Следуйте нашему руководству по установке .
Контрольный список оптимального прогрессивного веб-приложения
Чтобы создать по-настоящему качественное PWA, которое будет ощущаться как лучшее в своём классе приложение, вам понадобится больше, чем просто основной контрольный список. Оптимальный контрольный список PWA заключается в том, чтобы ваше PWA воспринималось как часть устройства, на котором оно работает, и при этом использовало все преимущества веба.
Обеспечивает возможность офлайн-обслуживания
Если подключение к Интернету не является строго обязательным, ваше приложение работает как в автономном режиме, так и в режиме онлайн.
Почему
Помимо предоставления настраиваемой офлайн-страницы, пользователи ожидают, что PWA будут доступны и в офлайн-режиме. Например, приложения для путешествий и авиакомпаний должны предоставлять информацию о рейсах и посадочные талоны в офлайн-режиме. Приложения для прослушивания музыки, видео и подкастов должны поддерживать офлайн-воспроизведение. Социальные сети и новостные приложения должны кэшировать недавний контент, чтобы пользователи могли читать его офлайн. Пользователи также ожидают сохранения аутентификации в офлайн-режиме, поэтому необходимо разработать систему для офлайн-аутентификации.
Оффлайн PWA обеспечивает пользователям настоящий опыт работы с приложением.
Как
Определив, какие функции ваши пользователи ожидают использовать в офлайн-режиме, вам необходимо сделать свой контент доступным и адаптируемым к офлайн-контексту. Вы можете использовать IndexedDB , встроенную в браузер систему хранения данных NoSQL, для хранения и извлечения данных, а также фоновую синхронизацию , чтобы пользователи могли выполнять действия в офлайн-режиме и откладывать взаимодействие с сервером до восстановления стабильного соединения. Вы можете использовать сервис-воркеры для хранения другого контента, например, изображений, видео- и аудиофайлов, для офлайн-доступа, а также для реализации безопасных и длительных сеансов с аутентификацией пользователей.
С точки зрения пользовательского опыта можно использовать скелетные экраны , которые дают пользователям представление о скорости и содержании загрузки, а затем при необходимости могут вернуться к кэшированному содержимому или автономному индикатору.
Полностью доступно
Все взаимодействия с пользователем соответствуют новейшему международному стандарту Web Content Accessibility Guidelines (WCAG) .
Почему
Большинство пользователей в какой-то момент своей жизни хотят использовать ваше PWA так, как это предусмотрено WCAG. Способность людей взаимодействовать с вашим PWA и понимать его различается, и потребности могут быть как временными, так и постоянными. Делая ваше PWA доступным, вы делаете его доступным для всех.
Как
Введение в веб-доступность от W3C — хорошая отправная точка. Большую часть тестирования доступности приходится проводить вручную. Аудит доступности в Lighthouse , axe и Accessibility Insights поможет вам автоматизировать некоторые этапы тестирования. Также важно использовать семантически корректные элементы, а не создавать их заново, например, элементы <a> и <button> . Это гарантирует, что при необходимости создания более сложных функций будут соблюдены ожидания в отношении доступности, например, когда следует использовать стрелки, а когда — вкладки.
В A11Y Nutrition Cards есть прекрасные советы по некоторым распространенным компонентам.
Обнаруживается в поиске
Ваш PWA можно легко найти с помощью поиска .
Почему
Одно из главных преимуществ интернета — возможность находить сайты и приложения через поиск. Более половины всего трафика на сайты поступает из органического поиска. Наличие канонических URL-адресов для контента и возможность индексации вашего сайта поисковыми системами критически важны для того, чтобы потенциальные пользователи могли найти ваше PWA. Это особенно актуально при использовании клиентского рендеринга.
Как
Для начала убедитесь, что каждый URL имеет уникальный, описательный заголовок и метаописание. Затем вы можете использовать Google Search Console и аудит поисковой оптимизации в Lighthouse для отладки и устранения проблем с видимостью вашего PWA.
Вы также можете использовать инструменты владельца сайта Bing или Яндекса и рассмотреть возможность включения структурированных данных с использованием схем из Schema.org в ваш PWA.
Работает с любым типом ввода
Ваш PWA одинаково удобен для использования с мышью, клавиатурой, стилусом или сенсорным экраном.
Почему
Устройства предлагают различные способы ввода, и пользователи должны иметь возможность легко переключаться между ними при использовании вашего приложения. Не менее важно, чтобы способы ввода не зависели от размера экрана, то есть большие области просмотра должны поддерживать сенсорное управление, а маленькие — клавиатуру и мышь. По мере возможности убедитесь, что ваше приложение и все его функции поддерживают любой способ ввода, который может выбрать пользователь. При необходимости улучшите пользовательский интерфейс, добавив элементы управления, специфичные для ввода (например, функцию обновления экрана потягиванием).
Как
API событий указателя (Pointer Events API) предоставляет унифицированный интерфейс для работы с различными вариантами ввода и особенно хорошо подходит для добавления поддержки стилуса. Для поддержки сенсорного ввода и клавиатуры убедитесь, что вы используете правильные семантические элементы (якоря, кнопки, элементы управления формами и т. д.), а не переписываете их с помощью несемантического HTML. При добавлении взаимодействий, активируемых при наведении курсора, убедитесь, что они также активируются при щелчке или касании.
Предоставляет контекст для запросов на разрешения
Запрашивая разрешение на использование мощных API, предоставляйте контекст и спрашивайте только тогда, когда API действительно необходим.
Почему
API, которые запрашивают разрешение, такие как уведомления, геолокация и учётные данные, намеренно разработаны так, чтобы создавать неудобства для пользователя, поскольку они, как правило, связаны с мощными функциями, требующими согласия. Запуск этих запросов без дополнительного контекста, например, при загрузке страницы, снижает вероятность того, что пользователи примут эти разрешения и, скорее всего, перестанут доверять им в будущем.
Вместо этого запускайте эти запросы только после предоставления пользователю контекстного обоснования того, почему вам необходимо это разрешение.
Как
Статья «Разрешения UX» и статья UX Planet «Правильные способы запрашивать у пользователей разрешения» являются хорошими ресурсами для понимания того, как разрабатывать запросы на получение разрешений, которые, хотя и ориентированы на мобильные устройства, применимы ко всем PWA.
Соблюдает лучшие практики для создания здорового кода
Поддержание работоспособности кодовой базы облегчает достижение ваших целей и внедрение новых функций.
Почему
Создание современного веб-приложения требует многого. Поддержание актуальности приложения и работоспособности кодовой базы упрощает внедрение новых функций, отвечающих другим целям, перечисленным в этом контрольном списке.
Как
Существует ряд высокоприоритетных проверок для обеспечения работоспособности кодовой базы:
- Избегайте использования библиотек с известными уязвимостями.
- Убедитесь, что вы не используете устаревшие API.
- Удалите из своей кодовой базы небезопасные практики кодирования, такие как
document.write()или наличие непассивных прослушивателей событий прокрутки. - Вы даже можете написать защитное кодирование, чтобы быть уверенными, что ваше PWA не выйдет из строя, если аналитика или другие сторонние библиотеки не загрузятся.
- Рассмотрите возможность использования статического анализа кода, например, линтинга, а также автоматизированного тестирования в нескольких браузерах и на разных версиях. Эти методы помогут выявить ошибки до того, как они попадут в рабочую среду.