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

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

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

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

• 10 шагов к включению пользовательского опыта

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

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

Если вы хотите построить гладкий сайт, убедитесь, что ваш веб хостинг на месте и использует приличный Строитель сайта Отказ

01. Служить через HTTPS

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

02. Создать прикладную оболочку

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

Приведенный ниже пример взяты из приложения rest.js. Пользователь представлен схема приложения и индикатора загрузки в Index.html. Затем, как только JavaScript загружает и React Boots UP, полное приложение отображается в оболочке.

 & lt; - index.html - & gt;
& lt; body & gt;
& lt; div id = "root" & gt;
  & lt; div id = "контейнер" & gt;
  & lt; div class = "Внутренний контейнер" & gt;
  & lt; div id = "заголовок" & gt;
  & lt; img src = "/ actsets / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; чат & lt; / h1 & gt;
  & lt; / div & gt;
  & lt; div id = "загрузка-контейнер" & gt;
  & lt; img src = "/ actsets / icon.png" alt = "logo" ID = "Loader" / & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / div & gt;
& lt; / body & gt;
// index.js.
Reactom.runder (
& lt; app / & gt;
Документ. GetElementById («root»)
);

03. Зарегистрируйте услугу

Чтобы постучать в полный спектр PWA вкусности (push-уведомления, кэширование, установка подсказок) вам понадобится сервисный работник.

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

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

& lt; скрипт & gt;
  Если («ServiceWorker» в навигаторе) {
  window.addeventListener («нагрузка», функция () {
  Navigator.ServiceWorker.register («Service-Worker.js»). Затем (функция (регистрация) {
  // Регистрация прошла успешно
  Console.log («зарегистрирован!»);
  }, функция (ERR) {
  // Регистрация не удалась :(
  console.log (не удалась «Регистрация услуг Workworker:«, ERR);
  }). CALL (функция (функция (ERR) {
  console.log (Err);
  });
  });
  } еще {
  Console.log («Сервисский работник не поддерживается»);
  }
  & lt; / script & gt;
// Service-Worker.js
self.addeventListener («Установка», функция () {
  Console.log («Установить!»);
});
self.addeventListener («активировать», событие = & GT; {
  Console.log («активировать!»);
});
self.addeventListener («FECTE», Функция (событие) {
  console.log ('fetch!', event.request);
}); 

04. Добавить push-уведомления

Услуги обслуживания позволяют своим пользователям получать push-уведомления через веб-интерфейс Web Push. Чтобы получить доступ к нему, вы можете подключиться к self.registration.pushmanager изнутри вашего сервисного рабочего файла. Поскольку отправка Push-уведомлений в значительной степени опирается на вашу настройку Backend, мы не будем нырять здесь.

Если вы начинаете приложение с нуля, сервис Firebase Google поставляется с обмена сообщениями отеля Firebase для относительно безболезненных кнопок Push-уведомлений (помните: убедитесь, что вы сохраните ваши файлы дизайна в безопасности в облачное хранилище) Отказ Ниже приведен код, показывает, как зарегистрироваться для push-уведомлений через Push API.

 Navigator.ServiceWorker.Ready.then (функция (регистрация) {
  Если (! Регистрация.PushManager) {
    оповещение (не поддерживает уведомления о push. ');
    вернуть ложь;
  }
  // Подписаться `push-уведомление` от Push-менеджера
  Регистрация.PushManager.subscribe ({{
  Uservisibleonly: True // Всегда показываем уведомление при получении
  })
  .then (функция (подписка) {
  Console.log («подписан».);
  })
  .catch (функция (ошибка) {
  console.log (ошибка подписки: ', ошибка);
  });
}) 

05. Добавить программу веб-приложения

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

Существует также некоторая конфигурация для того, как появляется ваше приложение, когда он запускается с домашнего экрана пользователя: вы хотите показать адресную панель в браузере или нет? Какой цвет вы хотите, чтобы полоса состояния быть? И так далее. Обратите внимание, что правильный Манифест Должен включать полный спектр размеров значка для различных устройств. Ниже приведен код предварительного просмотра некоторых свойств, которые может включать в себя ваш манифест.

 {
  «Short_Name»: «Чат»,
  «Имя»: «Чат»,
  «Иконки»: [
  {
  "SRC": "/ Активы / icon.png",
  «Размеры»: «192x192»,
  «Тип»: «Изображение / PNG»
  }
  ],
  "start_url": "/? Utm_source = HomeScreen",
  "background_color": "# E05A47",
  "theme_color": "# E05A47",
  «Дисплей»: «Автономный»
} 

06. Настройте подсказку установки

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

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

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

 window.addeventListener ('forinstallprompt', e = & gt; {
  Console.log («ForeinstAllPrompt Event Filled»);
  E.PreventDefault ();
  // stash событие, чтобы его можно было вызвать позже.
  this.deferredPrompt = e;
  вернуть ложь;
  });
// Когда вы хотите вызвать подсказку:
this.deferredPrompt.prompt ();
  this.deferredprompt.userchoice. Затем (выбор = & gt; {
  console.log (выбор);
  });
this.deferredPrompt = null; 

07. Проанализируйте производительность вашего приложения

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

Для этого полезный набор метрик - это железнодорожная система. Rail - это то, что Google вызывает «модель производительности пользователей» - набор рекомендаций по измерению производительности нашего приложения.

Акроним означает ответ (как долго требуется для вашего приложения, чтобы ответить на действия пользователей), анимацию (сохранение скорости анимации на 60FPS), простаистый (используя время, когда ваше приложение не делает ничего, чтобы загрузить и кэшировать дополнительные активы) и Нагрузка (загрузка вашего приложения за одну секунду или меньше).

Вот таблица значимых ориентиров на загрузку приложений, поставляемой Meggin Kearney, Tech Writer в Google Web Foodementals. Отказ

08. Ревизировать свое приложение с маяком

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

Ранее называемый маяк и поставляется в виде хромированного расширения, поскольку Chrome 60 - часть Chrome devtools, под вкладкой «аудиты». Какой маяк выполняет ваше приложение в разных условиях и измеряет свой ответ и успех в соответствии с Руководствами PWA. Затем он дает вам оценку из 100. Он также может забить ваше приложение в лучших практиках в Интернете одновременно.

Следующий текст представляет собой список значений Mighouse измеряется. В употреблении также показывает описания.

• Регистрирует обслуживающий рабочий
• Отвечает на 200, когда в автономном режиме
• Содержит некоторое содержание, когда JavaScript недоступен
• Использует HTTPS.
• Перенаправляет HTTP-трафик к HTTPS
• Загрузка страницы достаточно быстро на 3G
• Пользователь может быть предложено установить веб-приложение
• Настроен для настраиваемого экрана всплеска
• Адресная строка соответствует цвета бренда
• Имеет & lt; meta name = "viewport" & gt; тег с ширина или же первоначальный
• Контент правильно размечен для просмотра просмотра

Эта статья изначально появилась в веб-дизайнере; Подписаться здесь Отказ

Статьи по Теме:

• PWA: Добро пожаловать в мобильную революцию
• Как использовать анимацию в мобильных приложениях
• 9 Удивительные секреты PWA