Откройте для себя процесс, лежащий в основе нашей новой интеллектуальной панели управления, созданной с помощью Progressive Web Apps

В Settled мы стремимся улучшить процесс покупки и продажи домов. Мы хотим, чтобы потребители имели возможность покупать и продавать свою недвижимость в Интернете совершенно прозрачным, простым и надежным способом.

Более 50% нашего трафика на веб-сайт Settled поступает через мобильные устройства, что делает его одной из наших основных платформ для поиска. Как вы понимаете, мы хотим, чтобы эта платформа была быстрой и интересной для наших пользователей, поэтому мы решили создать прогрессивное веб-приложение для нашей пользовательской панели управления. Если вы раньше не слышали о прогрессивных веб-приложениях, они представляют собой набор функций, которые используют новые открытые веб-API, чтобы предложить мобильный веб-интерфейс, который быстро загружается, использует меньше данных и повторно привлекает пользователей несколькими способами. Покрытие мобильной сети в Великобритании довольно хорошее, но даже 4G может быть нестабильным в лучшие времена. Мы хотели, чтобы люди могли получать удовольствие от использования веб-приложения в автономном режиме и видеть функции в дороге.

После того, как клиенты зарегистрировались на нашем сайте, они будут перенаправлены в наш Хаб (или на панель управления пользователя). Здесь покупатели и продавцы могут легко увидеть статус своих объявлений, пообщаться с заинтересованными покупателями и продавцами, подписаться на юридические, ипотечные кредиты и многое другое.

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

Под капотом

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

Мы использовали замечательный сервис Google Service Worker Toolbox, который предоставляет стандартные стратегии кэширования динамического контента, такого как вызовы API, сторонние ресурсы, а также большие или редко используемые локальные ресурсы. Это означало, что после того, как пользователь посетил первую страницу на панели инструментов, все его ресурсы были кэшированы, что позволяло молниеносно посещать другие страницы сайта.

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

HTTP / 2

Мы хотели выжать из нашей технологии как можно больше и решили обслуживать запросы с использованием HTTP / 2. Используя возможности мультиплексирования HTTP / 2, которые доставляют веб-запросы через сервер еще быстрее по сравнению с HTTP1.1.

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

Наш серверный код написан с использованием Node.js, и мы использовали блестящий пакет spdy, чтобы помочь нам запустить HTTP / 2. Если вы хотите начать работу с HTTP / 2, мы рекомендуем проверить spdy репозиторий Github для получения дополнительной информации.

Представление

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

Производительность в Интернете важна для нас здесь, в технической команде Settled. Мы сами регулярно используем Hub на своих мобильных устройствах и понимаем, насколько неприятным может быть ожидание загрузки веб-страницы. С момента запуска Progressive Web App в конце 2016 года мы обслужили сотни тысяч веб-запросов и смогли сократить время загрузки страницы в среднем на 3 секунды.

Для проверки производительности нашего прогрессивного веб-приложения мы используем Lighthouse. Это отличный инструмент для аудита, предоставления показателей производительности и проверки передовых методов для ваших прогрессивных веб-приложений.

Фактически, мы очень рады сообщить, что при аудите с использованием этого инструмента мы получили 99 баллов из 100!

Если вы хотите опробовать веб-приложение на себе, зайдите на selected.co.uk. Мы будем постоянно обновлять и улучшать Progressive Web App в течение следующих нескольких месяцев и с нетерпением ждем возможности поделиться этим путешествием!

Ой, и мы нанимаем! Посетите наш сайт для получения дополнительной информации.