Твиттер PWA: что вам нужно знать

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

История Twitter до интеграции PWA

В апреле 2017 года после сотрудничества с Google был запущен Twitter Lite, новое улучшение своего сайта в мобильном браузере. Название произошло от того факта, что он создан, чтобы быть легче, быстрее и удобнее в использовании.

Перенесемся в наши дни: Twitter является 3-й по популярности социальной сетью в США и 15-й по популярности в мире. Хотя большая часть их демографических пользователей находится в США, Япония и Индия являются двумя крупнейшими представителями пользователей Twitter, которые в совокупности превышают количество пользователей в США.

История Twitter Lite восходит к периоду с 2010 по 2017 год, когда Twitter находится на пути к тому, чтобы стать ведущей социальной сетью в мире.

У Twitter было тяжелое начало по сравнению с их самым большим соперником, Facebook, в первые дни. Тем не менее, начиная с 2010 года, синяя птица стала свидетелем прекрасного зрелища на графике, постоянного роста квартал за кварталом. В период с 2015 по 2016 год темпы роста замедлились.

Осознав потенциал за пределами США, Twitter быстро вышел на международный рынок.

Как только Google представил PWA, Twitter знал, как он может расшириться и привлечь новых пользователей. Twitter Lite был их последним ответом, посвященным развивающимся странам с ненадежным сетевым подключением. Новый Twitter PWA занимает менее мегабайта памяти при работе в оптимизированном режиме экономии данных. Изображения и видео в размытом предварительном просмотре, пока пользователи не нажмут на них.

Николас Галлахер, ведущий инженер Google по Twitter Lite, заявил: «Twitter Lite теперь является самым быстрым, дешевым и надежным способом использования Twitter». Успех Twitter Lite попал в заголовки многих статей о PWA.

Решение крупнейшего в мире PWA — Twitter PWA

Чтобы помочь вам с практическими знаниями о разработке PWA, ниже будут представлены важные моменты о структуре Twitter PWA или Twitter Lite, а также инновационные методы, адаптированные для запросов по запросу.

Обратите внимание, что вся цель Twitter Lite — обеспечить пользователям отличный опыт работы на сайте, независимо от плохого подключения к Интернету, что приведет к последующим посещениям и превращению посетителей в частых пользователей. Благодаря возможности повысить скорость, надежность и безопасность PWA, вы можете испытать их на сайте mobile.twitter.com.

Архитектурная идея

Twitter Lite, по своей сути, представляет собой простой скромный сервер Node.js и приложение клиентского JavaScript. PWA позволит создавать API для кэширования и хранения данных. Сервер сначала позаботится о процессе аутентификации, соберет самое раннее состояние приложения и превратит веб-коды в интерактивные страницы путем начального рендеринга HTML в оболочке приложения.

После загрузки в фоновом режиме данные будут запрашиваться непосредственно из Twitter API. Простота в этой архитектуре помогает Twitter PWA создавать выдающиеся и надежные услуги с эффективностью даже в масштабе масштаба.

Проектирование производительности

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

Разработчики использовали ряд дополнительных средств повышения производительности, шаблон PRPL в сочетании с последними обновлениями современных браузеров для создания Service Worker, веб-push-уведомлений, IndexedDB и баннеров установки веб-приложений. Все они были частью впечатляющей скорости загрузки и независимости от соединения.

Использование данных

Полагаясь на кешированные ресурсы для предварительной обработки небольших данных, а также на режим сохранения данных, Twitter Lite изначально настроен на минимизацию использования данных, что приводит к вычету 40% на странице временной шкалы. Чтобы загрузить оптимизированное изображение по запросу, выполняется запрос HEAD для отображения его размера одним нажатием кнопки.

Прогрессивная загрузка

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

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

Автономная доступность

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

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

Рендеринг

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

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

Системы и дублированная скорость

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

Результат Twitter PWA

Мобильный и настольный сайт

Утверждается, что Twitter PWA становится интерактивным всего за 5 секунд и менее на большинстве устройств с сетью 3G. Облегченная версия загружается на 30 % быстрее и экономит до 70 % трафика, а задержка перехода к интерактивному режиму сокращается более чем на 25 %.

По сравнению со старым нативным приложением, Twitter PWA занимает не более 3% от размера, что является небольшой долей места в памяти устройства. Тем не менее, он действует глубоко и мощно. Временные шкалы, одна из самых сложных функций, могут быть построены из ограниченного количества 30 строк кода для настройки при подключении модуля Redux к компоненту React со смешанным контентом.

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

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

В настоящее время Twitter Lite поддерживает до 42 языков, а функция «Глобализация» была создана для отображения чисел, дат и сообщений, которые соответствуют местным жителям.

Результаты в цифрах

• 65% увеличение количества страниц за сеанс
• На 75 % увеличилось количество отправленных твитов.
• 20% снижение показателя отказов

Как Twitter PWA стал одним из самых быстрых PWA?

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

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

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

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

Часто задаваемые вопросы о Twitter PWA и PWA

Является ли Twitter PWA?

Абсолютно. Twitter выпустил новую прогрессивную версию веб-приложения в сотрудничестве с разработчиками Google в 2017 году. Twitter PWA называется Twitter Lite, и его сборка ориентирована на обслуживание международных пользователей, которые часто могут испытывать нестабильные соединения по сравнению с США.

Дорого ли создавать PWA, как Twitter PWA?

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

Twitter PWA — это сочетание отличной оптимизации производительности и применения современных технологий PWA мирового класса. С учетом сказанного, создание исключительного PWA, такого как Twitter Lite, во многом зависит от команды разработчиков, которую вы нанимаете или передаете на аутсорсинг.

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

С чего начать развитие вашего бизнеса с помощью PWA?

Что ж, все должно начинаться с того, где находится ваш бизнес, в чем он нуждается и где вы хотите, чтобы он был. Есть смысл? Потому что вы не хотите терять деньги и драгоценное время на что-то не относящееся к делу, верно?

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

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

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

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

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

Вы можете рассчитывать на нас, если вам нужно эффективное и экономичное решение для:

• Полная разработка PWA для электронной коммерции с нуля
• Частично разработка PWA для электронной коммерции
• Встроенные решения и улучшения существующего PWA для электронной коммерции
• Премиум готовые темы/плагины/расширения PWA для электронной коммерции

Ключевые выводы

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