Адаптивный веб-дизайн и прогрессивное веб-приложение (PWA): различия

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

Отзывчивый веб-дизайн

Что это

Отзывчивый веб-дизайн (RWD) — это подход к веб-разработке, впервые описанный Итаном Маркоттом еще в 2010 году — на пять лет раньше концепции Progressive Web App.

Как это работает

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

Гибкие сетки, гибкие изображения и медиа-запросы — три технических компонента адаптивного веб-дизайна…

Итан Маркотт, адаптивный веб-дизайн

Жидкие сетки

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

Гибкие изображения

Изображения в Интернете не являются плавными по своей природе, но с некоторыми настройками (для свойства width установлено значение 100% , а для свойства height установлено значение auto ) любое изображение можно сделать адаптивным на всех устройствах.

Медиа-запросы CSS

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

В целом адаптивный веб-дизайн сделал сегодняшний Интернет намного более доступным, поскольку этот подход устраняет потребность в дополнительных этапах разработки, которые ранее требовались для адаптации к различным размерам экранов на рынке. Или, по словам его создателя, такой подход к веб-разработке, наконец, позволяет нам « проектировать с учетом приливов и отливов ».

Примеры

Адаптивные веб-сайты в настоящее время являются обычным явлением, и почти каждый веб-сайт, с которым вы сталкиваетесь, в некоторой степени адаптивен по своей природе.

Прогрессивные веб-приложения

Что это

Прогрессивное веб-приложение, впервые придуманное Алексом Расселом в 2015 году , представляет собой следующую естественную эволюцию Интернета благодаря его многочисленным преимуществам по сравнению с типичным адаптивным веб-сайтом. « Прогрессивная » часть, по словам Пита Лепажа — Google Developer Advocate, может быть объяснена так: « по мере того, как пользователь постепенно строит отношения с приложением, оно становится все более и более мощным ».

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

 Связанная статья: Что такое прогрессивное веб-приложение?

Как это работает

На самом деле довольно легко суммировать основные компоненты PWA. По сути, для того, чтобы сделать возможными все вышеупомянутые прогрессивные функции, необходимо выполнить следующие требования:

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

Манифест веб-приложения — это файл JSON, который предоставляет необходимые метаданные для процесса установки вашего PWA и определяет, как ваше PWA отображается на главном экране пользователя.

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

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

Безопасные контексты

В качестве нового стандарта Интернета требуется, чтобы PWA был разделен по защищенному протоколу — HTTPS. Это гарантирует безопасную связь как между пользователем, так и сервером и, в свою очередь, обеспечивает безрисковую работу.

Примеры

Поскольку поведение PWA ничем не отличается от нативных мобильных приложений, вы, возможно, посещали сайт PWA раньше, не подозревая об этом. Подумайте о больших сайтах, похожих на приложения, таких как Instagram и Pinterest, — все они работают на PWA.

 Рекомендуемое чтение: 12 лучших примеров прогрессивных веб-приложений в 2020 году

Где они пересекаются

Аналогичный опыт с современными функциями

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

И поскольку оба эти подхода являются подходами к веб-разработке, они имеют почти все те же преимущества, что и Интернет, в том числе:

• Один URL, одна кодовая база для всех платформ
• Повышенная безопасность с HTTPS
• Лучшее обнаружение и всегда актуальная информация

Чем они отличаются

Здесь все становится интереснее, поскольку эти два подхода к веб-разработке, хотя и похожи внешне, сильно различаются по своему реальному влиянию.

С точки зрения особенностей

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

Добавить на домашний экран

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

>> Узнайте больше: Создайте свой первый PWA

Всплывающее уведомление

С помощью сервис-воркеров вы можете отправлять уведомления и отображать их на устройствах пользователя так же, как это делает родное приложение. Это относительно недавняя функция Интернета, в которой используются преимущества Push API, Notifications API и Web Push Protocol; и в ближайшем будущем эта функция будет только улучшаться благодаря появлению Notifications Triggers и Badging API.

Автономные возможности

Благодаря программируемому в браузере сетевому прокси-серверу, а именно сервис -воркерам, PWA может активно кэшировать и обслуживать автономный контент, не полагаясь на устаревшие механизмы кэширования, такие как кэш HTTP.

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

 Рекомендуемая литература: Прогрессивное веб-приложение (PWA) и доступ к оборудованию

С точки зрения производительности

Поскольку отзывчивые веб-сайты по-прежнему являются вашим типичным веб-сайтом, сдерживаемым всеми недостатками, связанными с текущим механизмом кэширования HTTP, разумно ожидать более высокой производительности от PWA, поскольку он использует более новый, более ориентированный на производительность механизм кэширования, называемый сервисными работниками.

Более быстрый механизм кэширования

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

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

Результаты были особенно впечатляющими на настольных компьютерах, так как здесь мы видим, что сервисные работники внесли свой вклад в сокращение firstpaint времени первой отрисовки (912 мс) до 583 мс . Это максимально близко к мгновенному опыту.

Однако на мобильных устройствах все немного менее впечатляюще:

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

В целом, повышение производительности, достигнутое с помощью сервисных работников — или, другими словами, с помощью PWA, — не что иное, как феноменальное. Конечно, со стороны сотрудников мобильных служб еще предстоит проделать определенную работу; но мы считаем, что в целом это все еще незначительный шаг вперед по сравнению с тем, чем когда-то была сеть, и при этом шаг в правильном направлении.

С точки зрения безопасности

HTTPS — линия, разделяющая

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

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

Веб-документы MDN, прогрессивные веб-приложения (PWA)

 Связанная статья: Вам нужен HTTPS?

Вывод

Вышеупомянутое повышение производительности, достигнутое с помощью сервисных работников, в сочетании с дополнительными функциями, подобными приложениям, такими как push-уведомления, добавление на главный экран (а в ближайшем будущем — геозона и периодическая синхронизация), — все это доказывает, что PWA является подходящим кандидатом на роль следующего. эволюция Сети. На данный момент движение PWA уже широко поощряется почти всеми крупными игроками, включая Microsoft с их продвижением внедрения PWA в Windows 10. Вскоре мы увидим будущее, полное прогрессивных веб-приложений, таких как тот, который предвидел Стив Джобс:

Полный движок Safari находится внутри iPhone. Итак, вы можете писать удивительные приложения Web 2.0 и Ajax, которые выглядят и ведут себя точно так же, как приложения для iPhone. И эти приложения могут идеально интегрироваться со службами iPhone. Они могут позвонить, отправить электронное письмо, найти местоположение на Google Maps.

Стив Джобс, 2007 г.