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

Опубликовано: 2019-06-06

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

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

(Вау. Это много.)

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

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

Как одностраничные приложения и прогрессивные веб-приложения могут улучшить качество обслуживания клиентов

За последнее десятилетие нативные приложения для iOS и Android стали привычным делом почти для всех нас. Эти приложения ведут себя иначе, чем настоящие веб-сайты, предоставляя пользователям совершенно иной и часто более приятный опыт.

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

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

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

Разве не было бы здорово, если бы интерфейс, подобный приложению, можно было обеспечить через веб-браузер, чтобы различие между нативным приложением и веб-сайтом стало размытым?

Здесь на помощь приходят одностраничные приложения (SPA) и прогрессивные веб-приложения (PWA).

Что такое одностраничное приложение?

SPA — это приложение, написанное на JavaScript, которое запускается в веб-браузере и обычно не требует обновления страницы для отображения новой информации.

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

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

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

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

Мы все уже давно используем SPA, возможно, даже не осознавая этого. Facebook, Gmail, Twitter, LinkedIn и Instagram (среди многих других) используют SPA вместо своих веб-сайтов.

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

Преимущества одностраничных приложений

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

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

SPA обычно загружают контент намного быстрее, чем стандартные веб-сайты, поскольку большая часть ресурсов презентации (HTML, CSS) загружается только один раз. Для взаимодействия с приложением требуется только вызов внутреннего сервера для получения небольших объемов данных, а не полностью сформированных страниц HTML/CSS. Затем приложение может быстро отображать измененные данные без перезагрузки страницы.

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

Недостатки СПА

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

Со временем это также становится менее серьезной проблемой, поскольку боты поисковых систем меняются, чтобы справляться с SPA. В конце концов, Google — одна из компаний, отстаивающих их.

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

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

Что такое прогрессивное веб-приложение?

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

Термин PWA был первоначально придуман Google, который создал контрольный список для определения того, что делает PWA. Среди прочего Google определил, что PWA должен быть:

Сейф – обслуживается по https
Отзывчивый — подходит для любого форм-фактора
Возможность работы в автономном режиме — использование сервис-воркеров для кэширования страниц
Быстро — возможность быстрой загрузки на 3G-соединениях
App-like — использование режима оболочки приложения и дизайна, чтобы чувствовать себя как приложение
Устанавливаемый — используйте файл манифеста, чтобы разрешить добавление приложения на главный экран.
Вовлечение — использование таких инструментов, как push-уведомления.
Прогрессивный — работает во всех браузерах, но в современных браузерах становится все лучше.

Как видите, некоторые пункты контрольного списка немного расплывчаты или субъективны. Вы также можете заметить, что некоторые из них звучат похоже на SPA. Традиционный веб-сайт HTML/CSS можно превратить в PWA, как и в SPA. SPA не является автоматически PWA, но имеет некоторые функции, которые подталкивают его в этом направлении.

Еще не запутались?

Преимущества PWA

Как и в случае с SPA, одним из самых больших преимуществ PWA является улучшение качества обслуживания клиентов, придающее ему ощущение приложения и устраняющее разрыв между традиционным мобильным веб-сайтом и родным приложением для iOS или Android.

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

PWA также имеют тенденцию быть очень быстрыми, так как это один из ключевых принципов в контрольном списке.

Операционная система Android предоставляет браузерам доступ к аппаратному обеспечению мобильного устройства. что позволяет такие вещи, как push-уведомления и использование сканирования NFC, что действительно может улучшить CX.

Недостатки PWA

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

Еще одним недостатком является отсутствие четкого определения, которое может быть открыто для интерпретации.

SPA и PWA — будущее веб-разработки

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

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

Любой, кто разрабатывает SPA, должен стремиться максимально соответствовать контрольному списку PWA, чтобы обеспечить наилучший клиентский опыт. Эти технологии дают дизайнерам и разработчикам больше свободы в пользовательском опыте и путешествиях, позволяя им отойти от традиционной постраничной модели.

Многие поставщики программного обеспечения, такие как SAP и IBM, вкладывают значительные средства в создание внешних интерфейсов SPA для своих платформ электронной коммерции, и я подозреваю, что через несколько лет большинство веб-сайтов электронной коммерции будут построены таким образом, с использованием фреймворков JavaScript, таких как Angular, Вью или Реакт.

Все меньше и меньше сайтов электронной коммерции будут создаваться с использованием традиционной модели HTML/CSS, а разрыв между веб-сайтами и нативными приложениями будет становиться все меньше и меньше до такой степени, что их будет трудно различить.