На мобильных устройствах приходится более половины трафика в сети, а веб-приложения позволяют пользователям делать что-то в браузере, конкурирующем с родными приложениями, но есть проблема: качество соединений и устройств сильно варьируется во всем мире.
Удовлетворение пользователей пользователями от молниеносных соединений в Сеуле и пользователей в сельской Индии на устаревшем телефоне — это последняя проблема удобства использования, а решение Progressive Web Apps — это решение.
Использование PWA прогрессивное повышение загрузки самого важного контента, а затем добавление презентационных и функциональных дополнений по мере необходимости, а это означает, что все ваши пользователи получают как можно более быстрый опыт работы с базой данных.
Хотя прогрессивные веб-приложения приносят много преимуществ и функциональности в Интернете, они не требуют переписывания всего вашего приложения. Любое приложение может быть преобразовано в PWA, добавив к нему несколько дополнительных слоев.
Для достижения наилучших результатов вам нужно будет уделять особое внимание производительности с самого начала, но это верно для любого веб-приложения. Здесь мы пройдем шаги, чтобы сделать ваше приложение прогрессивным.
Давайте будем честными: вы все равно должны это делать. SSL добавляет дополнительный уровень безопасности в Интернет, помогая вашим пользователям чувствовать себя в безопасности при использовании вашего сайта. С помощью PWA HTTPS имеет важное значение для использования сервисных работников и разрешения установки домашнего экрана. Вы можете приобрести сертификат SSL у своего регистратора домена за небольшую плату, а затем настроить его через свой хостинг.
02. Создать оболочку приложения
Ваша оболочка приложения — это первое, что загружается — первое, что видит пользователь. Он должен существовать полностью в вашем HTML-документе с индексом, с встроенным CSS, чтобы убедиться, что он отображается как можно быстрее, и ваш пользователь не смотрит на белый экран дольше, чем необходимо. Оболочка приложения является частью шаблона прогрессивного улучшения. Ваше приложение должно как можно скорее предоставить пользовательский контент, а затем постепенно увеличивать его по мере загрузки большего количества данных (вероятно, JavaScript).
Пример ниже берется из приложения React.js. Пользователь представлен контур приложения и индикатор загрузки в index.html. Затем, после загрузки JavaScript и перезагрузки, полное приложение отображается в оболочке.
Чат
03. Зарегистрируйте сервисного работника
Чтобы воспользоваться полным спектром плюсов PWA (push-уведомления, кеширование, установить подсказки), вам понадобится сотрудник службы.
К счастью, их довольно легко установить вверх. Ниже мы сначала проверяем, поддерживает ли браузер пользователя рабочих служб. Тогда, если это так, мы можем двигаться вперед, зарегистрировав файл рабочего рабочего, который называется service-worker.js . Обратите внимание, что в этот момент вам не нужно ничего особенного внутри этого файла — он может быть пустым.
. В приведенном ниже примере мы покажем, как задействовать три ключевых события жизненного цикла сервис-работника. Это «установить», когда пользователь впервые посещает вашу страницу; «активировать», незадолго до завершения регистрации; и 'fetch', когда приложение делает сетевой запрос. Последний имеет значение для кэширования и автономной работы.
Работники службы позволяют вашим пользователям получать push-уведомления через веб-Push API. Чтобы получить доступ к нему, вы можете нажать self.registration.pushManager из вашего рабочего файла службы. Поскольку отправка push-уведомлений в значительной степени зависит от настроек вашего бэкэнд, мы не будем здесь погружаться.
Если вы запускаете приложение с нуля, служба Firebase от Google поставляется с Firebase Cloud Messaging для относительно безболезненных push-уведомлений. В приведенном ниже коде показано, как регистрировать push-уведомления через Push API.
navigator.serviceWorker.ready.then (функция (регистрация) {
if (! registration.pushManager) {
alert («Нет поддержки push-уведомлений»);
return false;
}
// Подписываем `push-уведомление` из push-менеджера
registration.pushManager.subscribe ({
userVisibleOnly: true // Всегда показывать уведомление при получении
})
.then (функция (подписка) {
console.log ( 'подпиской.');
})
.catch (функция (ошибка) {
console.log ('Ошибка подписки:', ошибка);
});
})
05. Добавьте манифест веб-приложения
. Чтобы сделать ваше приложение доступным, вам нужно включить manifest.json в корневой каталог приложения. Вы можете рассматривать это как описание своего приложения, похожее на то, что вы можете отправить в App Store. Он включает в себя значки, заставку, имя и описание.
Существует также некоторая настройка того, как ваше приложение появляется, когда оно запускается с главного экрана пользователя: вы хотите показать адресную строку в браузере или нет? Какой цвет вы хотите, чтобы строка состояния была? И так далее. Обратите внимание, что соответствующий manifest.json должен включать полный спектр размеров значков для различных устройств. Код ниже представляет собой предварительный просмотр некоторых свойств, которые может содержать ваш манифест.
Когда пользователь посещает PWA с рабочим и манифестатором, Chrome автоматически предложит установить его на свой рабочий стол, учитывая следующее: пользователь должен дважды посещать сайт с пятью минутами между посещениями.
Идея здесь состоит в том, чтобы дождаться, пока пользователь проявит интерес к вашему приложению, а затем попросит их сделать это устройством своего устройства (это резко контрастирует с привычным приложением, который требует инвестиций до фронта).
Но могут быть случаи, когда вы хотите показать приглашение установки в разных ситуациях, например, после того, как пользователь предпримет конкретное полезное действие. Для этого перехватим событие beforeinstallprompt и сохраним его позже, а затем разворачиваем подсказку, когда сочтем нужным.
window.addEventListener ('beforeinstallprompt', e => {
console.log ('beforeinstallprompt Event fired');
e.preventDefault ();
// Спрячьте событие, чтобы его можно было запустить позже.
this.deferredPrompt = e;
return false;
});
// Если вы хотите вызвать приглашение:
this.deferredPrompt.prompt ();
this.deferredPrompt.userChoice.then (choice => {
console.log (выбор);
});
this.deferredPrompt = null;
07. Анализируйте производительность своего приложения
Производительность — это сердце и душа PWA. Ваше приложение должно быть быстрым для пользователей во всех сетевых условиях. Кэширование и автономные возможности помогают много, но в конце дня ваше приложение должно быть быстрым, даже если у пользователя нет браузера для поддержки технологии сервисных работников. Это определение прогрессивного улучшения — обеспечить отличный опыт для всех, независимо от современности устройства или условий сети.
Для этого полезным набором показателей является система RAIL. RAIL — это то, что Google называет «ориентированной на пользователя модель производительности» — набор рекомендаций по измерению производительности нашего приложения.
Сокращение означает Response (как долго требуется, чтобы приложение реагировало на действия пользователя), анимация (поддерживающая скорость анимации со скоростью 60 кадров в секунду), Idle (с использованием времени, когда ваше приложение ничего не делает для загрузки и загружать ваше приложение за одну секунду или меньше.
Вот таблица значимых тестов для загрузки приложений, предоставленная автором статьи Meggin Kearney в Google Web Fundamentals.
]
08. Аудит вашего приложения с Lighthouse
Google — самый большой чемпион, продвигающий Progressive Web Apps в качестве будущего Интернета.
Раньше назывался Маяк и поставлялся как расширение Chrome, а с Chrome 60 он входит в состав Chrome DevTools на вкладке «Аудит». Что Маяк делает, запускает ваше приложение в разных условиях и измеряет его реакцию и успех в соответствии с рекомендациями PWA. Затем он дает вам оценку из 100. Он также может забивать ваше приложение в лучших передовых методах работы в Интернете.
Следующий текст представляет собой список значений, измеренных Маяком.
Зарегистрирует служебного работника
Отвечает с 200 при автономном режиме
Содержит некоторое содержимое, когда JavaScript недоступен
Использует HTTPS
Перенаправляет HTTP-трафик на HTTPS
Загрузка страницы достаточно быстро на 3G
Пользователю может быть предложено установить веб-приложение
Настроено для пользовательский заставку
Адресная строка соответствует цветам бренда
Имеет тег с шириной или ]
Содержимое имеет размер правильно для просмотра
Эта статья первоначально появилась в веб-дизайнере; подписываются здесь .
Загрузка...
