Планирование перехода вашего приложения на PWA: Все, что вам нужно знать

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

Итак, давайте перейдем на следующий уровень.

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

Какой фреймворк использовать при создании прогрессивного веб-приложения?

Когда вы планируете перейти на PWA или построить PWA, первый вопрос, который заставляет вас почесать голову — какой фреймворк использовать? Vuejs? React? Preact? Или какой-то другой?

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

Из нашего исследования мы выяснили, что многие компании используют React, поэтому мы решили углубиться в этот вопрос. Мы проанализировали тематические исследования таких продуктов, как Garbarino и Twitter Lite, и выяснили, что основной причиной выбора фреймворка React является его удобство использования, онлайн-поддержка и знакомство с унаследованными фреймворками.

Более того, React также предоставляет следующие преимущества перед другими фреймворками.

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

  2. Будучи основой для React Native, React позволяет легко переносить приложения, созданные с помощью React, в нативные приложения.

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

Тестируйте свои сайты на базе Magento Testing Cloud в 3000+ различных настольных и мобильных браузерах. Масштабируемое и надежное облако онлайн-тестирования для ручного и автоматизированного тестирования веб-сайтов Magento.

Одностраничное приложение или многостраничное приложение?

Прежде чем приступить к созданию PWA, необходимо сначала создать приложение. При этом есть два варианта того, каким может быть ваше приложение. Вы можете выбрать SPA (одностраничное приложение) или разработать MPA (многостраничное приложение).

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

Итак, основная путаница здесь в том, какой подход лучше? Ну, это зависит от цели, которую вы пытаетесь достичь, создавая PWA.

Одностраничное приложение, или SPA — это приложение, которое работает как одна страница и не требует перезагрузки или перенаправления на новую страницу при отправке запроса. Это похоже на приложение Gmail или Facebook. Итак, если вы переходите от уже созданного приложения к PWA, потому что хотите увеличить скорость загрузки страницы или другие факторы, связанные со скоростью загрузки, то я бы посоветовал вам выбрать SPA. Некоторые PWA, использующие модель SPA, включают Twitter Lite, Housing Go, Flipkart Lite, Polymer Shop и т.д.

Однако если вы хотите рефакторить такие преимущества MPA, как изоляция и развязка между страницами, вы можете выбрать MPA. При создании мобильного сайта он позволяет создавать различные его части как «микросервисы», что, в свою очередь, дает возможность итерации этих сервисов независимо друг от друга, встраивания их в сторонние приложения, если это необходимо, и даже может поддерживаться разными командами. Одним из таких примеров, который использовал модель MPA для создания своего PWA, является Ele.me.

Итак, вы можете использовать данную информацию для выбора SPA или MPA.

Знаете ли вы, что вы можете тестировать свои сайты на базе Material UI в 3000+ различных настольных и мобильных браузерах. Масштабируемое и надежное облако онлайн-тестирования для ручного и автоматизированного тестирования веб-сайтов на базе Material UI.

Возникают проблемы при кэшировании оболочки приложения?

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

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

При ручном кэшировании вы можете воспользоваться следующим кодом:

var cacheName = 'shell-content';
var filesToCache = [
  '/css/styles.css',
  '/js/scripts.js',
  '/images/logo.svg',

'/offline.html’,

'/’,
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});
Вход в полноэкранный режим Выйти из полноэкранного режима

По данным Twitter Lite, после включения предварительного кэширования ServiceWorker время загрузки сайта увеличилось с 6 секунд до менее чем 1,5 секунд. Это улучшение на 75%!

Эй! Вы можете тестировать веб-приложения Materialize онлайн — высокопроизводительное облако кросс-браузерного тестирования и кросс-устройств для масштабного тестирования Materialize. Проводите ручное и автоматизированное тестирование веб-сайтов Materialize на 3000+ различных настольных и мобильных браузерах.

Давайте проводить AB-тестирование!

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

Итак, вам необходимо провести тестирование, а для этого нужны данные.

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

Если нет, то отлично!

Если да, то снова отлично 😉 У нас есть ответ для вас. Не беспокойтесь.

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

  • Разделение google analytics

  • Измерение коэффициента конверсии в и из PWA, например, корзины и оформления заказа в случае PWA для электронной коммерции

  • Наличие одинаковых URL-адресов на обеих сторонах эксперимента.

  • Люди, увидевшие A, должны увидеть A, а те, кто сначала увидел B, должны увидеть B.

Для первых двух случаев использования вы можете настроить новое представление в Analytics на основе какого-либо пользовательского измерения. Измерение должно быть заполнено непосредственно в коде PWA и основано на cookie.

Для последних двух пунктов все, что вы можете сделать, это направить весь трафик на PWA. Там случайная жеребьевка решит, продолжите ли вы там или будете перенаправлены на мобильный сайт. Как только вы закончите с этим, вы можете сохранить этот выбор в cookie «навсегда», если кто-то видит PWA, а если он/она видит мобильный сайт, то в течение некоторого времени, например, дня. Это поможет вам узнать, с какой версии пользователь подошел к окончательному оформлению заказа?

Как только вы решите все эти проблемы и приступите к выпуску PWA-версии вашего приложения. Вам останется только откинуться на спинку кресла и посмотреть на результаты, отлаживая на месте некоторые нежелательные ошибки. Ну, ошибки всегда нежелательны ;).

Тестирование PWA с помощью LambdaTest

Итак, вы закончили разработку и решили все проблемы, с которыми столкнулись. Теперь пришло время протестировать ваш PWA. Как же его протестировать?

LambdaTest может помочь вам протестировать PWA.

О том, как LambdaTest может помочь вам протестировать PWA, читайте в этой статье блога.

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

Trivago

  • увидела 150% прирост людей, которые добавили ее PWA на домашний экран

  • 97% увеличение количества кликов

  • 67% людей продолжили посещать сайт через браузер после того, как зашли на него из точки, где они были в офлайне

Pinterest

  • число основных вовлечений увеличилось на 60%

  • На 44% увеличился доход от рекламы, генерируемой пользователями

  • На 40% увеличилось время, проведенное на сайте

BookMyShow

  • 80% увеличение коэффициента конверсии

  • загрузка занимает менее 3 секунд

Twitter Lite

  • 65% увеличение количества страниц за сеанс

  • 75% увеличение количества твитов

  • 20% снижение показателя отказов

Оцените статью
Procodings.ru
Добавить комментарий