×
Россия +7 (495) 139-20-33

Progressive Web Applications: когда разница между сайтом и приложением исчезает

Россия +7 (495) 139-20-33
Шрифт:
2 14733

Хотя использование PWA – тема уже не такая новая и в современных реалиях очень актуальная, материалов об этом в Рунете, мягко говоря, недостаточно. В то время как в Европе термин Progressive Web Applications очень популярен, в российских источникам информацию о нем придется поискать. Например, меня очень удивило то, что на момент написания этой статьи в Википедии попросту отсутствовала русскоязычная статья на эту тему.

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

Что такое PWA?

PWA, или Progressive Web Application – это обычный сайт, который может устанавливаться на телефон как приложение и, как следствие, имеет доступ к таким данным об устройстве как уровень заряда батареи, положение в пространстве, может осуществлять вибровызовы. А главное – он может работать офлайн.

Зачем нужны PWA? Из-за чего сыр-бор?

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

По сравнению с обычным сайтом, PWA обладают следующими преимуществами:

  • Вы даете возможность пользователю запомнить свой сайт. Согласитесь, разница между закладкой в браузере и иконкой на рабочем столе телефона очевидна.
  • Клиент может сформировать заказ, даже когда находится офлайн. А когда он будет онлайн, этот заказ будет отправлен в магазин. То есть у нас есть возможность получить лид в ситуации, когда с обычным сайтом мы бы не получили ничего.
  • Push-уведомления. Конечно, человека можно доставать и просто по email, но еще один канал активного взаимодействия с пользователями лишним точно не будет.
  • И, наконец, это дополнительный способ получения трафика, например, из Windows Store.

Если мы сравним PWA с приложениями, то увидим следующие недостатки последних, которых нет у PWA:

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

Когда вам не стоит делать PWA?

В принципе, почти любой сайт, имеющий мобильную версию от PWA, только выиграет, но, разумеется, есть и исключения:

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

Какие требования есть к PWA?

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

  • Во-первых, приложение должно использовать безопасное соединение, что логично, ведь приложение в телефоне – это что-то более «интимное», чем сайт, на который ты просто заходишь.
  • Во-вторых, PWA должно работать в режиме офлайн, когда нет доступа к интернету. Технически это означает, что должен быть реализован процесс (Service Worker в терминах JavaScript), который гарантирует работу приложения независимо от наличия/отсутствия сети. Service Worker занимается такими вещами, как подгрузка файлов, подгрузка данных, сохранение данных и пр.
  • PWA обязательно должно иметь файл W3C манифеста, где содержатся как минимум следующие поля: название, начальный URL и настройки экрана.
  • Сайт должен быть интересен пользователю, например, Google Chrome предложит закрепить PWA на начальном экране телефона как приложение только после того, как на сайт зашли два-три раза в течение пяти минут.

Кроме формальных требований к сайту, есть и дополнительные моменты, которые подразумеваются, хотя и не заявлены прямо. Например, довольно здравым является требование к кроссбраузерности и удобству использования PWA с мобильных устройств. Логичной также выглядит реализация deep linking – когда каждая страница приложения имеет свой URL. Согласитесь, может быть довольно утомительным каждый раз искать нужную страницу, переходя с главной. Ну и конечно, большое значение имеет быстродействие сайта. Телефон все-таки немного медленнее настольного компьютера, поэтому тут оптимизация никогда не будет лишней.

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

Готовые решения для разработки

Итак, давайте посмотрим, что на сегодняшний день нам может предложить рынок. Вот несколько вариантов:

  • Vue Storefront. Это бесплатный каркас для PWA интернет-магазина с открытым исходным кодом. Написан на модном Vue.js. Он довольно дружелюбен к любому backend’у – его одинаково легко подружить как с Wordpress, так и например с Magento.
  • Ionic. C самого начала Ionic ставил перед собой задачу, чтобы один и тот же код работал и в браузере, и на любом устройстве, независимо от платформы. Если вы любите Angular – это ваш выбор. Наверное, если использовать Ionic – лучше все-таки брать его с платными фичами.
  • Quasar. Еще одна неплохая платформа для vue.js, которая может без дополнительных установок генерировать каркас PWA.
  • И, наконец, PWA-Starter-Kit от Polymer. Это самый простой базовый каркас для PWA.

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

(Голосов: 9, Рейтинг: 4)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Иван Андреевич
    1
    комментарий
    0
    читателей
    Иван Андреевич
    больше года назад
    Есть опыт применения на клиентских сайтах?
    -
    1
    +
    Ответить
  • Петр Красков
    21
    комментарий
    0
    читателей
    Петр Красков
    больше года назад
    Как еще один канал - да, круто.

    Но нам бы какой-нить конструктор без программирования ;):
    • нажал пару кнопок - PWA готово;
    • собрал статистику.
    -
    2
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Что скрывает «Прогноз бюджета Яндекс.Директ»?
Михаил Мухин
15
комментариев
0
читателей
Полный профиль
Михаил Мухин - Здравствуйте! 1-2. Считает стенд. Ссылка на него дана, но могу повторить: online.p-c-l.ru/competition/task/card/id/106. Нажмите на кнопку "Начать" и заранее приготовьте прогноз бюджета Яндекс. Суть расчета: перебор комбинаций всех ставок на всех фразах, построение бюджетных когорт - бюджетов с одинаковым СРС, отбор в каждой когорте бюджета с максимальным количеством кликов и ..., да упорядочивание этих бюджетов по мере возрастания СРС, причем берем не все, а с фиксированным шагом. 3. Гугл считается через поправочные коэффициенты. Мы перевариваем океан данных и представляем их. На удивление, получается не менее, хотя и не более точно, как и прогноз Яндекс. Конечно, нужно понимать, что это очень примерные прикидки, фактически перевод неточного прогноза Яндекс в удобочитаемую форму, не больше. Самое интересное начинается, когда применяешь метод бюджетных когорт к измерению показателей фраз на реальной рекламной кампании в режиме 48х7. Первые результаты очень хорошие. Если хотите присоединиться к бесплатному тестированию, напишите Эльвире r-support@r-broker.ru. В теме укажите "хочу присоединиться к тестам Умного управления рекламой"
Ссылочное продвижение локальных сайтов: ТОП худших SEO-методов
demimurych
8
комментариев
0
читателей
Полный профиль
demimurych - о господи. это для регионального сайта? в яндексе? где у сайта по региону конкурентов меньше чем выдачи на двух страницах из которых перваш это реклама москвы? потешно ей богу. ктото чего то не понеимает.
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Виктор Брухис
5
комментариев
0
читателей
Полный профиль
Виктор Брухис - Статья выглядит так, как пожелали редакторы и интервьюер) Вопросы к интервью подбирал не я)) Хотя, в целом я согласен с вашим видением. А за пожелание удачи большое спасибо!
Зачем подменять контент на сайте: разбираем инструмент и развенчиваем мифы
Дмитрий Сульман
4
комментария
0
читателей
Полный профиль
Дмитрий Сульман - Все верно, об этом я и говорю. У крупных компаний есть много данных и они имеют доступ к дорогим технологиям и решениям для персонализации контента. Топовые западные сервисы для персонализации, такие как RichRelevance или Dynamic Yield, стоят от нескольких тысяч до десятков тысяч долларов в месяц. Понятно, что малый бизнес не может себе этого позволить. Да даже если бы чисто теоретически и мог, то это вряд ли бы имело хоть какой-то смысл. Во-первых, у малого бизнеса недостаточно данных, чтобы подобные алгоритмы персонализации начали эффективно работать, а во-вторых, тот профит, который МСБ получит от персонализации, никогда не покроет таких расходов. Мы же предлагаем решение, доступное как раз для малого и среднего бизнеса. При этом наше решение комплексное: МультиЧат - это одновременно и инструмент для персонализации, и для коммуникации.
Как провести анализ содержания страниц товаров и категорий
Никита Седнин
3
комментария
0
читателей
Полный профиль
Никита Седнин - Спасибо!
Монетизируйте свой сайт вместе с VIZTROM
VIZTROM
3
комментария
0
читателей
Полный профиль
VIZTROM - Добрый день! Так как мы сейчас работаем в приватном режиме, Вы врятли можете объективно оценить нашу рекламную площадку. У нас будет официальный запуск 3 марта для вебмастеров. Приглашаем Вас присоединиться к нам и лично посмотреть наш функционал.
Digital-разговор: Михаил Шакин про SEO, Google и заработок в интернете
Анна Макарова
368
комментариев
0
читателей
Полный профиль
Анна Макарова - Подготовим ) Пока предлагаю почитать интервью с Денисом Нарижным из той же серии. Там стенограмма =) www.seonews.ru/interviews/digital-razgovor-denis-narizhnyy-pro-ukhod-iz-seo-i-zarabotok-na-partnerkakh/
Как удвоить выручку за счет продвижения в поиске. Кейс coffee-butik.ru
Максим Боровой
3
комментария
0
читателей
Полный профиль
Максим Боровой - Последний вопрос (извиняюсь за количество) - почему на "В корзину" стоит Nofollow. Осознанно для распределение весов?
Кейс Hansa: как увеличить органический трафик в 1,5 раза
Алексей Порфирьев
3
комментария
0
читателей
Полный профиль
Алексей Порфирьев - Спасибо за замечание, о данной проблеме известно, но она не стоит в порядке приоритетных. Вопрос, на самом деле, дискуссионный. В тематике конкуренция не настолько велика, а в топе выдачи часто встречаются сайты с более серьёзными техническими проблемами. По этому, именно в статьях, более важно работать над релевантностью контента, отношением времени пользователя на странице к уровню доскрола, и различным пользовательским функционалом (рейтинг материала, просмотры и т. п.).
Автоматические SEO-аудиты: как напугать некорректными выводами
SEOquick
38
комментариев
0
читателей
Полный профиль
SEOquick - Парсинг сайтов – это самый лучший способ автоматизировать процесс сбора и сохранения информации. Конкурентов всегда нужно мониторить, а не сравнивать свой сайт через автоматический аудит анализатора.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
368
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
139
Комментариев
121
Комментариев
108
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
85
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

Отправьте отзыв!
Отправьте отзыв!