Что такое прогрессивное веб-приложение? Почему нам нужно один? Как мы можем построить один?
Вы когда-нибудь видели «Добавить в главный экран», как выше, просмотра сайта? При нажатии кнопки «Приложение» устанавливается в фоновом режиме. Когда вы открываете это приложение, которое теперь находится в вашем ящике приложений, вы можете просматривать тот же опыт, который вы делали в вашем браузере, но сейчас прямо на вашем мобильном телефоне.
Теперь у вас есть мобильное приложение, которое было загружено из веб-приложения. Все это, даже не нужно видеть лицо магазина приложений.
Получение приложения было так легко! Но это даже не самая лучшая часть. Когда вы открываете это приложение, вы сможете просматривать контент, даже если у вас нет Интернета. У вас есть в автономном режиме доступа к приложению! Как это круто?
То, что вы столкнулись, это прогрессивное веб-приложение (PWA). PWA позволяет устанавливать приложение из самого окна браузера, доступно на вашем телефоне, как нативное приложение, и работает в автономном режиме, как и нативное приложение.
Но что это действительно означает для прогрессивного веб-приложения? Давайте возьмем более глубокое погружение в какие прогрессивные веб-приложения, почему я думаю, что они лучше, чем нативные приложения, и что делает их отличными от традиционных веб-приложений.
Что такое прогрессивное веб-приложение (PWA)?
Термин-прогрессивное веб-приложение было приведено Алекса Рассел и Фрэнсис Берримана. В словах Алекса:
Это не новая рамка или технология. Это набор лучших практик, чтобы сделать функцию веб-приложения, аналогичную рабочему столу или мобильному приложению. Мечта состоит в том, чтобы иметь опыт настолько однородной и бесшовной, чтобы пользователь не может сказать разницу между прогрессивным веб-приложением и собственным мобильным приложением.
Прогрессивные веб-приложения доставляют опыт пользователя через прогрессивное улучшение. Это, по сути означает, что PWA будет выполнять те же функции на новом iPhone 8, так как он будет на iPhone старшего поколения. Конечно, некоторые функции могут быть недоступны, но приложение продолжает работать и выполнять, как следует.
Почему нам нужно прогрессивное веб-приложение?
Прежде чем мы понимаем, почему нам нужно прогрессивное веб-приложение, давайте поговорим о некоторых проблемах, которые мы сталкиваемся сегодня с родным и веб-приложениями.
Интернет скорость : Вы не можете реализовать это в зависимости от того, где вы живете, но 60% населения мира все еще используют 2G Интернет. Даже в США некоторые люди должны использовать Dialup для доступа к Интернету.
Медленная нагрузка на сайт: Знаете ли вы, как долго пользователь ждет кнопку «Закрыть x», если веб-сайт слишком медленный? Три секунды! 53% пользователей отказываются от сайта, если оно слишком медленно.
Высокое трение: Люди не хотят устанавливать нативные приложения. Средний пользователь устанавливает 0 приложений в месяц.
Пользовательская взаимодействие: Пользователи проводят большую часть своего времени в нативных приложениях, но мобильная веб-досягаемость почти в три раза увлечения нативных приложений. Следовательно, большинство пользователей не активно участвуют. Тем не менее, пользователи тратят 80% своего времени только на их три лучших нативных приложения.
PWA помогает решить эти проблемы. Есть несколько причин использования прогрессивного веб-приложения, но вот некоторые из лучших возможностей, которые он обеспечивает:
- F AST: PWA предоставляет опыт, которые постоянно быстро. С того момента, как пользователь загружает приложение к моменту, когда они начинают взаимодействовать с ним, все происходит действительно быстро. Поскольку вы можете кэшировать данные, чрезвычайно быстро начать приложение еще раз, даже не ударяя сеть.
- Я Нецегрированный пользовательский опыт: PWA почувствуют себя и ведут себя как родные приложения. Они сидят в домашнем экране пользователя, отправляют Push-уведомления, такие как нативные приложения, и имеют доступ к функциям устройства, такими как нативные приложения. Опыт чувствует себя бесшовным и интегрированным.
- R Пожизнательный опыт: с помощью работников обслуживания мы можем надежно покрасить изображение на экране пользователя, даже когда сеть не удалась.
- Е Zgaging: Поскольку мы можем отправлять уведомления для пользователя, мы можем действительно управлять взаимодействием, сохраняя уведомление пользователя и задействовано приложением.
Короче, это ОГОНЬ.
Как построить прогрессивное веб-приложение
Google опубликовал Контрольный список предметов Для прогрессивных веб-приложений. Я пройду четыре минимальных требования к заявке, чтобы быть PWA:
1. Манифест веб-приложения
Это просто JSON Файл, который дает мета информацию о веб-приложении. Он имеет информацию, такую как значок приложения (который видит пользователь после установки его в их приложении), цвет фона приложения, имя приложения, короткое имя и так далее. Мы можем написать этот манифест файл себя или мы можем использовать Инструменты генерировать один для нас.
2. Работники обслуживания
Работники обслуживания являются работниками, управляемыми событиями, которые работают на фоне приложения и выступают в качестве прокси между сетью и приложением. Они могут перехватывать сетевые запросы и кэшировать информацию для нас на заднем плане. Это может быть использовано для загрузки данных для автономного использования. Они JavaScript Сценарий, который слушает события, такие как Fetch и устанавливает, и они выполняют задачи.
Вот образец ServiceWorker.js.
self.addEventListener('fetch', event => {
//caching for offline viewing
const {request} = event;
const url = new URL(request.url);
if(url.origin === location.origin) {
event.respondWith(cacheData(request));
} else {
event.respondWith(networkFirst(request));
}
});
async function cacheData(request) {
const cachedResponse = await caches.match(request);
return cachedResponse || fetch(request);
}3. Значок
Это используется для предоставления значка приложения, когда пользователь устанавливает PWA в своем ящике приложений. Изображение JPEG просто будет хорошо. Инструмент «Манифест», которого я выделил выше, помогает генерировать значки для нескольких форматов, и я нашел это очень полезным.
4. Подается через HTTPS.
Для того чтобы быть PWA, веб-приложение должно быть подано в безопасной сети. С такими услугами, как CloudFare и Letsencrypt, очень легко получить сертификат SSL. Будучи надежным сайтом – это не только лучшая практика, она также устанавливает ваше веб-приложение в качестве доверенного сайта для пользователей, демонстрирующих доверие и надежность, и избегать атак среднего человека.
Примечание: Это часть 1 из 2 частей серии. В следующей части мы создадим прогрессирующее веб-приложение с нуля с помощью скелета index.html. Проверьте часть 2 здесь.
Вы узнали что-то новое? Есть комментарии? Знать devgoke? Tweet Me @ shrutikapoor08
Почему программисты запутаются между Хэллоуином и Рождеством? Потому что 25 окт #Devjokes #WorkChat.
Оригинал: “https://www.freecodecamp.org/news/progressive-web-apps-101-the-what-why-and-how-4aa5e9065ac2/”