Что такое PWA и как работать с progressive web apps уже сегодня

Что такое PWA и как работать с progressive web apps уже сегодня 1 Интернет маркетинг

PWA либо прогрессивное Интернет-приложение (англ. progressive web app) – гибрид веб-сайта и приложения для мобильных устройств. Из данной статьи вы узнаете, что такое PWA и почему это крутая фишка для бизнеса. Также можете за 5 минут добавить на имеющийся веб-сайт функциональность прогрессивного веб-приложения либо сделать гибрид веб-сайта и приложения с нуля.

Что такое PWA

Это разработка, которая добавляет на веб-сайт функциональность приложения. В десктопном браузере progressive web app остается обыденным веб-сайтом. А когда гость открывает его в мобильном браузере, PWA преобразуется в гибрид веб-сайта и приложения.

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

Что такое PWA и как работать с progressive web apps уже сегодня 67

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

Что такое PWA и как работать с progressive web apps уже сегодня 69

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

Что такое PWA и как работать с progressive web apps уже сегодня 71

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

Что такое PWA и как работать с progressive web apps уже сегодня 73

Весьма принципиальный момент: по состоянию на начало апреля 2019 года стопроцентно поддерживает работу PWA лишь Chrome, в том числе Chrome для мобильных. Остальные браузеры поддерживают отчасти либо совершенно не поддерживают.

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

Результаты экспресс-тестов:

  • В Firefox PWA стопроцентно работает.
  • В браузере Самсунг Internet PWA не работает, блог доступен как обыденный веб-сайт.
  • В Opera веб-сайт доступен без функциональности PWA.
  • В Microsoft Edge для Android PWA стопроцентно работает.

Таковым образом, разработка PWA поддерживается как минимум в 80% браузеров (это толика Chrome, Firefox и Edge).

Что такое PWA и как работать с progressive web apps уже сегодня 75

Промежный результат: PWA делает четыре крутые штуки:

  • Устанавливается на устройство в один клик без магазинов приложений.
  • Стремительно загружается благодаря заблаговременно сделанному кэшу страничек.
  • Работает офлайн благодаря тому же кэшу.
  • Рассылает юзерам push-уведомления.

Для чего бизнесу применять progressive web apps

Все ответы на вопросец из подзаголовка можно отыскать в прошлом разделе. Повторим главные тезисы для закрепления. PWA помогают бизнесу:

  • Пробраться на мобильное устройство юзера в обход Гугл Play и остальных магазинов приложений.
  • Сделать веб-сайт легкодоступным офлайн. Это работает даже для веб-магазинов, но информация о оформленных сделках «прилетает» в магазин, когда у юзера возникает веб.
  • Повысить скорость загрузки веб-сайта на мобильных устройствах.
  • Рассылать юзерам извещения.

Внедрение PWA дает измеримые результаты. Вот несколько примеров:

  • Tinder благодаря технологии уменьшил время загрузки страничек с 11,9 до 4,69 секунды. PWA Tinder на 90% «легче», чем их нативное приложение.
  • PWA Uber практически ничего не весит и грузится за 3 секунды даже в сетях 2G.
  • OLX благодаря PWA повысил CTR объявлений на 146 % и уменьшил количество отказов на 80 %.

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

«Как избрать обычный движок для веб-сайта, а не платить за любой чих разрабам»

При помощи инструкций ниже вы за 5 минут реализуете функциональность progressive web app на собственном веб-сайте. Безвозмездно. правда, повезет не многим, а лишь тем, кто выбирает обычные движки для веб-сайта. Остальным придется рассчитываться за неверный выбор в прямом смысле: нанимать разрабов и платить за внедрение PWA.

Что такое PWA и как работать с progressive web apps уже сегодня 77

Как воплотить функциональность PWA на веб-сайте

Для реализации PWA имеющийся веб-сайт должен соответствовать требованиям:

  • Доступ по протоколу https.
  • Адаптивность либо отзывчивость.
  • Отдельный URL для каждой странички (принципиальный пункт, если ваш веб-сайт – SPA).

Рекомендация для новичков: перед внедрением PWA сделайте запасную копию веб-сайта. Запасное копирование необходимо созодать перед хоть какими переменами.

Разглядим два метода воплотить PWA в порядке от обычного к сложному.

Как в пару кликов перевоплотить веб-сайт в PWA при помощи готовых плагинов

Обладателям фаворитных CMS подфартило: они могут перевоплотить веб-сайт в прогрессивное приложение при помощи плагинов.

На WordPress по состоянию на конец 2018 года работает третья часть от полного количества веб-сайтов либо практически две трети веб-сайтов на CMS. Потому аннотация написана на примере этого движка. Опосля нее будет нужная информация для тех, кто работает с иными CMS.

Установите на веб-сайт бесплатный плагин PWA for WP. Я протестировал несколько модулей из официального каталога WordPress и тормознул на этом решении. Результаты его работы можно узреть сначала статьи. Если желаете, попытайтесь остальные плагины.

Мы делаем проф веб-сайты на WordPress.Подробнее

Укажите общие опции. Изберите иконку для десктопа (App Icon) и иконку-прелоадер (App Splash Screen Icon). В настройках есть возможность избрать ориентацию приложения (портрет либо ландшафт), но эта функция не работает. приложение отображается в режиме «портрет» независимо от опций.

Что такое PWA и как работать с progressive web apps уже сегодня 79

Чтоб отправлять юзерам push-уведомления, зарегте проект в Firebase, получите ключ к API и укажите его на вкладке Push notifications.

В расширенных настройках включите офлайн-отслеживание при помощи Гугл Analytics. По желанию включите поддержку PWA-уведомлений на экранах десктопов.

Что такое PWA и как работать с progressive web apps уже сегодня 81

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

Что такое PWA и как работать с progressive web apps уже сегодня 83

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

Что созодать, если веб-сайт работает не на WordPress? Ловите решения:

  • Joomla!: PWA от WebKul (59 баксов).
  • Drupal: Progressive Web App (работает с Drupal 7, версия для Drupal 8 в разработке).
  • OpenCart: OpenCart PWA (99 баксов).
  • Magento: PWA Studio (пригодится помощь разраба).
  • CS-Cart: CS-Cart PWA (99 баксов).
  • Prestashop: PWA and push notifications и Advance PWA (90 и 150 евро соответственно).
  • WooCommerce: PWACommerce.

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

Промежный результат: бесплатные модули для реализации PWA есть у WordPress, включая WooCommerce и Drupal. За модули для Joomla!, OpenCart, CS-Cart и Prestashop необходимо платить. Для реализации прогрессивного веб-приложения на остальных движках придется заплатить разрабам.

Если у вас пока нет веб-сайта либо вы желаете протестировать прогрессивное Интернет-приложение перед внедрением на основном веб-сайте, перебегайте к последующему шагу.

Резвый и бесплатный метод сделать веб-сайт с функциональностью PWA при помощи Gatsby

Gatsby – генератор статических веб-сайтов, написанный React (это библиотека JavaScript). На Gatsby работают огромные ресурсы, в том числе ecommerce-проекты, лендинги, корпоративные веб-сайты. Для проф использования Gatsby на суровых проектах необходимо разбираться в коде.

Но сделать маленькой веб-сайт-визитку, портфолио либо блог на Gatsby можно и без технических познаний. Для этого необходимо пользоваться библиотекой готовых сборок для новичков. Разглядим создание PWA на примере минималистичной сборки для блога от создателя Gatsby Кайла Мэттьюза.

Установите на комп Node.js. Это необходимо, чтоб запустить на компе локальный , нужный для работы с Gatsby. Подойдет как LTS-, так и Current-версия Node.js. Опосля установки откройте командную строчку и введите две команды: node —version и npm —version. Чтоб запустить командную строчку в Windows, введите «cmd» в поиске на панели задач.

Если все изготовлено правильно, увидите приблизительно такую картину (версии могут различаться):

Что такое PWA и как работать с progressive web apps уже сегодня 85

Установите Git. Это система контроля версий, она нужна для работы с Gatsby. Опосля установки сделайте учетную запись. Для этого введите в командную строчку свои данные:

  • git config —global User.name «Vasya Pupkin».
  • git config —global User.email «basil.pupkin@gmail.com».

Установите Gatsby CLI при помощи команды npm install -g gatsby-cli.

Что такое PWA и как работать с progressive web apps уже сегодня 87

сейчас можно установить сборку Gatsby. В командной строке изберите диск D либо иной несистемный диск на ПК. Для этого введите команду D:.

Gatsby не работает, если в заглавии папки либо в пути к файлу есть кириллические знаки.

Что такое PWA и как работать с progressive web apps уже сегодня 89

Установите сборку Gatsby при помощи команды gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog. В данном случае my-blog-starter – заглавие веб-сайта. Сможете поменять его на хоть какое другое.

Что такое PWA и как работать с progressive web apps уже сегодня 91

Опосля окончания установки перейдите в папку проекта при помощи команды cd my-blog-starter. Запустите PWA на локальном сервере при помощи команды gatsby develop. Если все изготовлено правильно, локальная версия веб-сайта станет доступной по адресу HTTP://localhost:8000.

Что такое PWA и как работать с progressive web apps уже сегодня 93

Пуск Gatsby на локальном сервере показан на иллюстрации ниже, процесс продолжается наименее минутки.

Что такое PWA и как работать с progressive web apps уже сегодня 95

Редактировать PWA и создавать посты будем в папке проекта.

Что такое PWA и как работать с progressive web apps уже сегодня 97

Чтоб поменять характеристики блога, откройте в «Блокноте» либо другом редакторе текста файл gatsby-config.js. Укажите пригодные метаданные: заглавие блога, имя создателя, описание. В качестве URL укажите что-то вроде https://basil-pupkin.surhe.sh, лишь заместо «basil-pupkin» напишите хотимый вариант. Обратите внимание, необходимо указать протокол соединения https. Чуток позднее безвозмездно опубликуем веб-сайт на хостинге Surge.

Что такое PWA и как работать с progressive web apps уже сегодня 99

Сохраните конфигурации в файле. Опосля этого локальный обновит будущее PWA.

Что такое PWA и как работать с progressive web apps уже сегодня 101

Поменяйте аватар в папке Content – Assets. Назовите файл со своим фото так же, как именуется дефолтный аватар. Чтоб отредактировать информацию о создателе, откройте файл bio.js в папке Src – Components. Укажите данные и сохраните конфигурации.

Что такое PWA и как работать с progressive web apps уже сегодня 103

Создавать публикации будем в папке Content – Blog. Войдите в эту директорию и изучите содержимое. Любой пост испытательной сборки лежит в отдельной папке. Заглавие папки сформировывает URL поста. Снутри папки лежит текстовый файл index.md и опционально фото.

Что такое PWA и как работать с progressive web apps уже сегодня 105

Чтоб опубликовать новейший пост, действуйте так:

  • Сделайте папку с пригодным заглавием.
  • Снутри папки сделайте файл index.md.
  • Откройте файл в редакторе текста.

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

Что такое PWA и как работать с progressive web apps уже сегодня 107

Сохраните конфигурации. Gatsby сам обновит блог и опубликует пост.

Что такое PWA и как работать с progressive web apps уже сегодня 109

Удалите все папки не считая собственной из директории Blog. На веб-сайте остается лишь ваша публикация. Я этого не делаю, чтоб в предстоящем наглядно показать работу PWA.

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

Установите Surge. Для этого введите в терминал команду npm install —global surge. Сгенерируйте статический веб-сайт: введите команду gatsby build в папке проекта. Gatsby в течение минутки подготовит статические файлы html и JavaScript, которые в предстоящем будут размещены в сети.

Что такое PWA и как работать с progressive web apps уже сегодня 111

Введите команду surge public/.

Что такое PWA и как работать с progressive web apps уже сегодня 113

Система предложит случайное заглавие домена.

Что такое PWA и как работать с progressive web apps уже сегодня 115

Вручную поменяйте это заглавие на хотимое.

Что такое PWA и как работать с progressive web apps уже сегодня 117

Нажмите Enter и дождитесь сообщения о публикации веб-сайта.

Что такое PWA и как работать с progressive web apps уже сегодня 119

Проверьте доступность веб-сайта в браузере. Обратите внимание, ресурс доступен по протоколам http и https. Редирект можно настроить, если приобрести платный акк Surge. Чтоб поглядеть на работу PWA, используйте неопасное соединение, потому что прогрессивные веб-приложения всеполноценно работают лишь через https.

Что такое PWA и как работать с progressive web apps уже сегодня 121

Проверьте работу PWA. Откройте блог на мобильном устройстве в браузере Chrome. Через несколько секунд покажется предложение установить приложение.

Что такое PWA и как работать с progressive web apps уже сегодня 123

Добавьте приложение, подождите пару минут и отключите веб. Запустите приложение.

Что такое PWA и как работать с progressive web apps уже сегодня 125

Проверьте, доступны ли внутренние странички при отсутствии подключения.

Что такое PWA и как работать с progressive web apps уже сегодня 127

Обратите внимание, на неких устройствах при первом запуске PWA просит подключения к Вебу.

Чтоб опубликовать новейший пост, повторите описанные шаги: запустите блог на локальном сервере, сделайте пост в папке проекта, удостоверьтесь, что содержание и наружный вид вас устраивает, сгенерируйте статические файлы и поновой опубликуйте блог на Surge.

Принципиальный момент: в отличие от Гугл, «Yandex» пока не умеет регистрировать контент, который генерируется при помощи JavaScript. Чтоб посодействовать поисковику, необходимо настроить в Gatsby рендеринг на стороне сервера. О этом побеседуем в последующих публикациях.

Промежный результат: разглядели два метода реализации PWA. Это внедрение функциональности PWA на имеющийся веб-сайт при помощи готовых плагинов либо создание PWA с нуля при помощи генератора статических веб-сайтов Gatsby. Естественно, есть и 3-ий путь: постоянно можно обратиться к проф разрабам и попросить воплотить прогрессивное Интернет-приложение.

«Почти все считают PWA технологией грядущего, и я с ними согласен»: программер отдела разработки веб-сайтов «Текстерры» Николай Ильичев

Программер «Текстерры» Николай Ильичев поделился с читателями своим воззрением о прогрессивных Интернет-приложениях.

Дмитрий Дементий: Хороший денек, Николай. Как животрепещуще применять PWA? необходимо ли обладателям бизнеса добавлять на корпоративные веб-сайты либо веб-сайты Веб-магазинов функциональность прогрессивных приложений?

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

Что такое PWA и как работать с progressive web apps уже сегодня 129

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

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

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

«Подробное управление по AMP»

Д.Д.: Воплотить функциональность PWA на веб-сайте можно в пару кликов без технических познаний. Почему, по вашему воззрению, PWA пока не весьма обширно употребляются?

Н.И.: разработка довольно новенькая – в этом вся причина. Гугл анонсировал ее в 2015 году, а наиболее либо наименее обычная поддержка браузерами возникла еще позднее. Почти все даже не слышали о данной технологии, а кто слышал, не соображают, какие достоинства она имеет. Хотя стоит увидеть, что ситуация повсевременно улучшается. Почти все большие компании уже употребляют данную технологию. А разрабов, способных воплотить этот функционал, становится все больше. Почти все считают, что за данной технологией будущее, и я с ними согласен.

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

Н.И.: Так и есть. Но, естественно, лучше, чтоб эти хвосты подтягивались по дефлоту, или не появлялись совсем. Адаптивность – без нее никуда, огромную часть времени мы отыскиваем что-то в Вебе через телефон, и веб-сайт без адаптивного дизайна просто не выживет: юзер просто не сумеет им воспользоваться. Скорость загрузки – один из самых принципиальных характеристик веб-сайта, который влияет на позицию в поисковой выдаче. Мне кажется, что стоит применять PWA не для закрытия хвостов, а для роста общей производительности веб-сайта и удобства его использования.

Д.Д.: Как вы думаете, воздействует ли на популярность PWA тот факт, что этот формат интенсивно продвигает Гугл?

Н.И.: Думаю, да. Гугл у всех на слуху, а технологии, которые он продвигает, обычно стают довольно популярны. Эта компания владеет впечатляющими ресурсами, позволяющими повсевременно облагораживать технологии, которые она считает многообещающими.

Что далее

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

Если во время работы с PWA на WordPress либо Gatsby будут вопросцы, пишите в комментах, будем разбираться.

Источник

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