3 простых шага, чтобы сделать Progressive Web App из вашего сайта


Оглавление (нажмите, чтобы открыть):

Progressive Web Apps — cледующий шаг в разработке веб приложений

Что, если я скажу вам, что теперь веб-разработчик может легко создавать мобильные приложения? Все, что вам нужно знать это немного HTML, CSS и JavaScript, и вы готовы к бою! Не нужно проходить через боль при изучении нативных языков, таких как Java (для Android-приложений) или Objective-C и Swift (для iOS-приложений).

Было бы еще круче, если бы вы могли публиковать свои приложения, не следуя правилам и ограничениям, установленным в Play Store и в App Store! Если вы мобильный разработчик, возможно, у вас уже были трудности с соблюдением норм App Store. В App Store также есть некоторые очень строгие правила касательно обновления приложений и того, что может содержать это обновление (App Store не позволит вам опубликовать обновление, если оно изменяет базовую часть работы вашего приложения).

В этой статье мы узнаем о том, как создание Progressive Web Apps позволяет вам делать все, о чем я говорил выше, и многое другое!

ReactFoo Pune 2020

Это статья сопутствует докладу Neeraj Singh о Progressive Web Apps, с которым он выступил на ReactFoo Pune 2020.

ReactFoo — конференция разработчиков, организованная HasGeek. Эта конференция состоит из множества докладов и семинаров о структуре веб-дизайна, ReactJS.

Конференция проходила в торговой башне MCCIA. Было много замечательных докладов известных разработчиков, таких как Сатьяджит Сан, Сиддхарт Кшетрапал, Манджула Дубе, Прети Вадхвани, Джайсон Джон Титус и многие другие!

An impromptu panel discussion at @ReactFoo about React Native and how a developer can migrate to it! Panel members: @JaisonTitus @satya164 @zereraz and Neeraj Singh from @geekyants #reactfoo pic.twitter.com/OyebBFzXCR

В мероприятии приняли участие многие разработчики и энтузиасты React, которые приехали из таких мест, как Ахмадабад, Сурат, Хайдарабад, Ченнай, Мумбаи и, конечно же, Пуна!

Что такое прогрессивные веб-приложения (PWA)?

Проще говоря, Progressive Web App представляет собой смесь мобильного и веб-приложения!

Но что это значит? Чем они отличаются от традиционных веб-приложений и нативных приложений?

  • PWA являются прогрессивными — эти приложения работают для каждого пользователя, независимо от того, какой браузер вы используете или даже в какой точке мира вы находитесь! Так что, если вы используете Chrome или Opera или вы живете в Индии, Великобритании или даже Северной Корее, это не имеет значения! Прогрессивные веб-приложения будут работать одинаково хорошо, потому что они построены с прогрессивным улучшением в качестве основного принципа.
  • Отзывчивость — Progressive Web Apps подходят для любого устройства! Будь то настольный компьютер, мобильный телефон, планшет или даже то, что еще не создано!
  • Веб-приложения, которые не зависят от наличия интернет подключения. С помощью service workers Progressive Web Apps могут работать даже в слабых сетях или даже в автономном режиме!
  • Подобие приложениям — PWA работают как приложения. У них есть интерактивное взаимодействие и навигация.
  • Обновленность — благодаря сервис воркерам ваше PWA всегда будет синхронно с последними обновлениями!
  • Безопасность — PWA всегда обслуживаются через HTTPS, гарантируя, что никто не сможет вмешаться в ваше приложение без надлежащего разрешения.
  • Доступность — Согласно манифесту W3C, PWA классифицируются как приложения. Легче найти PWA благодаря скоупу регистрации сервис воркеров, который позволяет поисковым системам легко находить их.
  • Взаимодействие с пользователем — функции PWA, такие как пуш уведомления, очень упрощают взаимодействие с пользователем!
  • Установка. Пользователи могут «хранить» самые полезные PWA на своем домашнем экране без ипользования магазинов приложений.
  • Ссылочность — PWA можно легко поделиться по URL-адресу и не требует сложной установки.

Нативные приложения vs традиционные веб-приложения vs PWA

Давайте проведем краткое сравнение между нативными приложениями, традиционными веб-приложениями и PWA.

Нативные приложения

Нативное мобильное приложение — это приложение для смартфонов, которое пишется на языке программирования, таком как Objective-C для iOS или Java для операционных систем Android.

Нативные приложения имеют следующие фичи:

  • Высокая производительность и высокая степень надежности.
  • Полный доступ к аппаратным средствам телефона.
  • Нативные приложения могут изменять системные настройки.
  • Нативные приложения могут получать доступ к различным устройствам и функциям телефона, таким как камера или адресная книга. Они также могут использовать функции телефонии для отправки сообщений или для совершения вызовов.
  • У нативных приложений довольно медленные итерации. Это означает, что для получения обновлений пользователям требуется некоторое время. Это объясняется тем, что нативные приложения обычно можно найти в магазинах приложений, поэтому любое обновление, отправленное разработчиком, должно пройтичерез проверку магазином до того, как оно станет доступно для публикации.

Традиционные веб-приложения

Традиционные веб-приложения — это приложения, которые имеют следующие функции:

  • Доставка в режиме реального времени — в зависимости от скорости вашего интернет-приложения веб-приложение будет немедленно доставлено вам.
  • Веб-приложения создаются с использованием стандартных HTML, CSS и JavaScript.
  • Ограниченный доступ к функциям устройства. В то время, когда ваше приложение может иметь доступ к таким функциям как камера или услуги геопозиционирования, оно не будет иметь доступ к функциям телефонии вашего смартфона.
  • Веб-приложения зависят от интернет-подключения. Без должного соединения, все что вы можете сделать, это поиграть с динозавром Chrome.
  • Вы не можете установить веб-приложение на своем устройстве.
  • Любое обновление будет немедленно доставлено всем пользователям. В отличие от нативных приложений, веб-приложениям не нужно беспокоиться о каких-либо ограничениях в магазине приложений.

Прогрессивные веб-приложения (PWA)

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

  • Скорость распространения — обновления PWA мгновенно! Все пользователи мгновенно и сразу получат приглашение!
  • Подобно традиционному веб-приложению, PWA также будут иметь ограниченный доступ к функциям устройства.
  • Основным недостатком PWA является то, что iOS еще не обеспечивает поддержку PWA. Но разработчики Apple, похоже, начали работать над предоставлением поддержки.

Открытость в PWA

Согласно Comscore Mobile App Report, более 50% пользователей смартфонов в Америке загружают 0 приложений в месяц! Это означает, что время, когда наш телефон используется для установки приложений, медленно уменашается!

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

Еще одна победа PWA заключается в том, что нативные приложения доступны только через Play Store / App Store. Причина успеха этих магазинов заключается в том, что у пользователей нет другого выбора в способе поиска и установки нативных приложений.

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

Общий процесс установки нативных приложений выглядит примерно так:

  1. Откройте App Store и найдите приложение.
  2. Нажмите «Установить».
  3. Примите различные разрешения.
  4. Откройте приложение.
  5. Приложение запускается.
  6. Войдите в приложение.
  7. Используйте приложение

Давайте сравним это с установкой прогрессивных веб-приложений:

  1. Посетите сайт.
  2. Добавьте на домашний экран.
  3. Перейдите на главный экран и откройте сайт.
  4. Используйте приложение!
  5. PWA на главном экране.

Возьмем пример Flipkart. Когда вы открываете URL-адрес Flipkart в браузере своего мобильного устройства, вы получите что-то вроде этого:

Когда вы откроете меню браузера, вы увидите вариант «Добавить на главный экран».

Примечание. Если вы увидите prompt-окно, как показано ниже, вы узнаете, что вы добавляете PWA на главный экран.

Но если браузер вместо этого просит вас ввести имя, то это не PWA.

Как только ваше PWA установлено, оно появится на вашем домашнем экране следующим образом:

Также как и нативное приложение, ваше PWA также будет доступно в списке приложений устройства.

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

Браузер Chrome автоматически отправит вам запрос на добавление PWA на главный экран, если вы открыли веб-страницу 2 раза в течение двух недель.

PWA Манифест

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

Вот пример файла manifest.json приложения PWA:

Чтобы связать этот файл JSON с вашим PWA, используйте:

Всплывающие уведомления

Push-уведомление — это сообщение, которое появляется на устройстве пользователя. Push-уведомления могут запускаться локально открытым приложением или их можно «пушить» пользователю с сервера, даже если приложение не запущено. Push-уведомления позволяют пользователям выбирать своевременные обновления, а также позволяют эффективно взаимодействовать с кастомным контентом.

Пуш уведомления собираются с использованием двух API: API уведомлений и Push API. API уведомлений позволяет отображать системные уведомления для пользователя. Push API позволяет сервис воркерам обрабатывать Push-сообщения с сервера, даже если приложение неактивно.

API уведомлений и Push API построены поверх Service Worker API, который реагирует на события push-сообщений в фоновом режиме и передает их в ваше приложение.

Service Workers

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

Service Worker — это скрипт, который ваш браузер запускает в фоновом режиме, отдельно от веб-страницы / веб-приложения. Он обычно используется для функций, которым не требуется веб-страница или взаимодействие с пользователем.


Сервис воркеры предоставляют техническую основу, которая включает в себя оффлайн работа, периодические фоновые синхронизации и push-уведомления.

Регистрация сервис воркеров

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

Чтобы узнать больше о сервис воркерах:
Service Workers: an Introduction

Как использовать пуш уведомления?

Чтобы создать push-уведомления, вам необходимо настроить как клиентскую, так и серверную сторону вашего PWA.

Сначала начнем с серверной части.

Серверная сторона

На стороне сервера вашего PWA

  1. Сначала генерируются данные, которые вы хотите отправить своему пользователю.
  2. Затем данные шифруются с использованием открытого ключа пользователя.
  3. Теперь сервер отправляет зашифрованные данные на URL эндпоинта.

VAPID

Существует несколько способов отправки Push-уведомления пользователю с помощью сервера. Одним из таких методов является протокол VAPID (добровольный идентификатор сервера приложений для Web Push). VAPID использует JSON Web Tokens для передачи информации.

Ядро VAPID называется запрос. Запрос представляет собой объект JSON, который содержит несколько общих полей.

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

Когда пользователь выбирает получать push-уведомления, PWA добавляет открытый ключ к объекту опций вызова subscribe() .

Теперь, когда сервер приложения отправляет push-сообщение, он включает подписанный JSON веб-токен вместе с открытым ключом.

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

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

Web Push

Web Push Уведомления — это сообщения, которые поступают из Интернета. Вы получаете их на свое устройство, когда PWA не открыто и обычно используется для повторного привлечения пользователей без необходимости детализации.

Вы можете настроить Web Push с помощью службы Google Cloud Messaging или с помощью VAPID, как показано ниже:

Теперь вы можете отправлять Push-уведомления на свое устройство! Вот как вы можете настроить свои push-уведомления:

Клиентская сторона

На стороне клиента вашего PWA

  1. Пользователь подписывается на услугу push.
  2. PWA отправляет объект подписки на сервер.

Слушатель пуш уведомлений

Вот слушатель событий, который будет «слушать», когда вы получите Push-уведомление:

Оффлайн возможности

Интернет подключение часто бывает нестабильным или вовсе отсутствовать. Вот почему PWA поставляется с оффлайн функционалом, что позволяет работать даже при отсутствии подключения к интернету вообще!

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

Если содержимое доступно у сервис воркера, мы получим новую страницу, независимо от сетевого подключения. В противном случае сервис воркер перенаправляет запрос в сеть.

Когда следует обновлять PWA?

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

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

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

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

PWA с ReactJS

Можно поразмышлять, насколько совместимы PWA с существующими архитектурами, использующими библиотеки типа React. Требует ли PWA массового переписывания?

Есть много преимуществ, если вы используете React для создания PWA. Одно из этих преимуществ — лучшая открытость.

Если вы разработаете одностраничное приложение (SPA), у вас будет клиентский JavaScript, который будет выполняться в браузере, и Google сможет его проиндексировать.

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

Другим преимуществом использования React for PWA является асинхронный имопрт.

Часто бывает так, что пользователь не использует определенную часть приложения. Но наше приложение должно связать все компоненты и их зависимости в файле bundle.js. Делая это, увеличивается размер приложения, но приложение также требует больше времени для загрузки.

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

Внедряя вышеуказанный код, ваше приложение будет загружать файл LineChart только тогда, когда пользователю это нужно.

Инструменты PWA

Google предоставил нам два полезных приложения под названием Lighthouse и Workbox, которые помогут нам создавать улучшенные PWA.

Lighthouse

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

Lighthouse доступен как расширение Chrome и CLI, оба из которых предоставляют отчет, который выглядит примерно так:

Аудиты высшего уровня Lighthouse эффективно используют коллекцию современных передовых технологий, оптимизированных для мобильного мира:

  • Сетевое подключение безопасно
  • Возможность уведомления пользователя о добавлении на домашный экран
  • Запуск установленного веб-приложения с пользовательской заставкой
  • Приложение может загружаться в оффлайн/нестабильном соединении
  • Высокая производительность загрузки страницы
  • Дизайн для мобильных устройств
  • Постепенное расширение сайта
  • Адресная строка соответствует цветам бренда

Workbox

Workbox является преемником sw-precache и sw-toolbox. Это набор библиотек и инструментов, используемых для создания сервис воркеров, маршрутизации и времени выполнения. Workbox также включает модули для легкой интеграции фоновой синхронизации и Google аналитики с вашими воркерами.

Чтобы создать прекэш:

Workbox также предоставляет вам различные стратегии кэширования, такие как:

  • Только кеш
  • Сначала кэш, возвращение к сети
  • Кэш с сетевым обновлением
  • Только сеть
  • Сначала сеть, возвращение к кешу


Ознакомьтесь с этим CodeLab, чтобы узнать, как создать PWA с помощью Workbox:

PWA это следующий шаг в веб разработке. Так что попробуйте создать свое и приготовьтесь к будущему!

Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram чтобы не пропустить самое интересное!

Современные сайты как прогрессивные веб-приложения PWA!

Хотите создавать современные сайты? Тогда вам не обойтись без Progressive Web Apps! Прогрессивные веб-приложения (PWA) — это новая технология, которая создает промежуточную точку между веб-сайтом и мобильным приложением. Они устанавливаются на смартфоны и планшеты как обычное приложение, и могут быть доступны с главного экрана!

Что могут современные сайты с технологией PWA?

Современные сайты с Progressive Web Apps (PWA)могут конвертировать сайт в мобильное приложение. В момент посещения такого сайта, с мобильного устройства браузер предлагает всплывающее сообщение «ДОБАВИТЬ НА ГЛАВНЫЙ ЭКРАН» и если пользователь соглашается, то в фоновом режиме происходит установка сайта как приложения. С этого момента сайт в интернете остается сайтом, а на мобильном устройстве это мобильное приложение.

всплывающее сообщение «ДОБАВИТЬ НА ГЛАВНЫЙ ЭКРАН»

Нет, я не ошибся. Теперь сайт становится именно мобильным приложением со всеми его фичами и преимуществами. Не правда ли это очень круто! Заметьте такой момент, нам не нужно ходить в специальный магазин мобильных приложений App Store или Google Play, мы делаем прямую установку- что намного круче.

Добавлена иконка приложения

Есть ли ограничения у такого приложения? Абсолютно нет! Ограничения могут быть только в функционале, но это зависит нет от самого приложения, а от функционала который в него заложен. Далее мы коснемся ресурсов создания и внедрения Progressive Web Apps на сайты.

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

Основные преимущества веб-сайтов с Progressive Web Apps

  1. Прогрессивность. С каждым новым обновлением мы получаем новые технологические новшества. Подключившись однажды, мы остаемся, так сказать в теме развития новых технологией.
  2. Адаптивность. Возможность подстраиваться под различные операционные системы устройств, их экраны и возможности.
  3. Независимое от соединения с интернетом. Автономная работа вне сети -оффлайн.
  4. Как нативное приложение. Нативное, значит имеющее свою собственную программную оболочку, быстро загружаемую.
  5. Безопасное. Работающее по защищенному протоколу HTTPS.
  6. Доступное для поиска в интернете. Прогрессивное веб приложение это все еще сайт, находящийся в интернете, он доступен для поиска, он индексируется.
  7. Технология push. Возможность коммуникации владельца и пользователя посредством отправки на устройство сообщений (push-нотификаций).
  8. Легкая установка и распространение. Установка в одно нажатие, минуя магазины приложений App Store или Google Play. Поделится можно с помощью ссылки.

Почему необходимо внедрение PWA на современные сайты?

Не секрет, что в 2014 году произошло знаковое событие, изменившее лицо интернета. Напомним. Тогда число посетителей интернета с мобильных устройств превысило аудиторию посетителей с настольных компьютеров. С тех пор всё чаще мы слышим, мобильный сайт, адаптивный дизайн. Смотрите график роста мобильных пользователей интернета.

Рост мобильных пользователей интернета

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

По данным ВЦИОМ количество пользователей интернета в России за 1 квартал 2020 года составил 80% от общего числа населения. Прирост числа ежедневных интернет-посетителей вырос – с 28% 2011 года до 62% в 2020 году.

Рост пользователей интернета в России

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

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

Посмотрим на глобальные иследования DIGITAL IN 2020

Доля посещение интернета по устройствам

  • Две трети населения во всем мире используют смартфон.
  • Цифра уникальных мобильных посетителей в мире выросла на 4% за год.
  • Смартфоны это предпочтительное устройство для выхода в интернет, что составляет самую большую долю веб-пользователей вместе взятых.
Мастер Йода рекомендует:  Как увеличить конверсию продающего лендинга

Как начать использовать PWA в современных сайтах

Разработка современных сайтов с WordPress

Как я писал ранее о преимуществах WordPess, продолжаю о том же — выбирайте его. Современные сайты с технологией PWA уже доступны и работают на этой cms. Да, как не странно звучит, на бесплатной системе есть такая возможность. Рассмотрим один из бесплатных плагинов реализующих Progressive Web Apps .

Плагин Super Progressive Web Apps

Super Progressive Web Apps упрощает преобразование современного веб-сайта WordPress в прогрессивное веб-приложение мгновенно! Скачать плагин Официальный сайт приложения SuperPWA

Пользователи могут вернуться на ваш сайт, запустив приложение со своего домашнего экрана и взаимодействуя с вашим сайтом через приложение-интерфейс. Ваши посетители, будут запускать его почти мгновенное и наслаждаться отличными преимуществами вашей PWA!

После установки SuperPWA пользователи, просматривающие ваш сайт с мобильного устройства, увидят уведомление «Добавить на главный экран» (внизу экрана) и смогут «установить ваш сайт» на главном экране своего устройства. Каждая посещаемая страница хранится локально на этом устройстве и будет доступна для чтения, даже если находится в автономном режиме!

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

Что в коробке

Вот текущие функции Super Progressive Web Apps:

  • Установка иконки для вашего прогрессивного веб-приложения.
  • Установите цвет фона для заставки вашего прогрессивного веб-приложения.
  • На вашем веб-сайте будет отображаться уведомление «Добавить на главный экран» при обращении к нему в браузере.
  • Агрессивное кэширование страниц с использованием CacheStorage API.
  • Страницы, которые когда-то были кэшированы, обслуживаются, даже если пользователь находится в автономном режиме.
  • Задайте настраиваемую автономную страницу: если вы хотите выдать её пользователю, а её нет в кэше, и она будет доступна, даже когда пользователь находится в автономном режиме.
  • Поддержка тематического цвета.
  • Теперь вы можете редактировать имя приложения и краткое описание.
  • Установите стартовую страницу вашего PWA.
  • Установка ускоренной версии мобильных страниц (AMP) в качестве начальной страницы.
  • Поддерживаемые плагины: AMP для WordPress, AMP для WP, Better AMP, AMP Supremacy, WP AMP.
  • Добавлена ​​поддержка высококачественной заставки.
  • Теперь вы можете установить значок 512px × 512px для заставки вашего прогрессивного веб-приложения.
  • Super Progressive Web Apps теперь учитывает обновления содержимого и обновляет кеш при обновлении веб-сайта.
  • Улучшена обработка обновлений рабочего стола в браузере.
  • Теперь вы можете установить ориентацию вашего PWA по умолчанию. Выберите «Любые» («Ориентация на устройство»), «Портрет» или «Пейзаж».
  • Теперь вы можете установить свойство theme_color в манифесте.
  • Интеграция OneSignal для Push-уведомлений.
  • Совместимость с многопользовательской сетью WordPress.

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

Установка в WordPress в пять шагов:

  1. Зайдите WordPress Admin
  2. Плагины
  3. Добавить новый
  4. В строке Поиска напишите: «PWA»
  5. Нажмите «Установить», а затем «Активировать»

Чтобы установить вручную:

  1. Загрузите папку Super Progressive Web Apps в каталог / wp-content / plugins / на вашем сервере
  2. Перейти к WordPress Admin> Плагины
  3. Активируйте плагин Super Progressive Web Apps из списка.

Настройка прогрессивного веб-приложения

Ваше прогрессивное веб-приложение должно быть готово к работе с настройками по умолчанию при активации. Вы также можете настроить его дальше и сделать его по-настоящему своим.

Настройка прогрессивного веб-приложения

Перейти к WordPress Admin> SuperPWA
Установите цвет фона для отображения заставки, когда ваш PWA открывается на мобильном устройстве.
Установите значок приложения. Это будет значок вашего PWA, когда он будет добавлен на рабочий стол на мобильном устройстве. Значок должен быть PNG-изображением и размером 192 x 192 пикселя.
Установите автономную страницу. Эта страница будет отображаться, если пользователь находится в автономном режиме, и запрошенная им страница уже не кэшируется.
Нажмите «Сохранить настройки».

Заключение

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


Если Вы согласны или не согласны с содержанием данного материала, просим Вас оставить свой отзыв или проголосовать.

Остались вопросы? Задайте его удобным для вас способом:

Вам не нужны технологии ни PWA, ни AMP, чтобы ваш сайт загружался быстро

Дата публикации: 2020-12-25

От автора: в Интернете появилась тенденция к введению новых «революционных» технологий, которые часто позволяют вам делать что-то, что было возможно еще десятилетия назад. Именно такими являются технологии PWA и AMP.

Во-первых, AMP (Ускоренные мобильные страницы). Подумайте об этом: Интернет, в общем, не был быстрым, поэтому Google изобрел параллельный веб, где они просто не позволяют использовать JavaScript. Да, и они позволяют вам использовать только пару одобренных Google компонентов AMP JS. Но подождите, разве обычная сеть не может работать без JavaScript? Конечно может. Может ли обычный Веб включать пользовательские компоненты JS? Готов поспорить, может. Может это быть быстрым? Netflix недавно обнаружил, что если они уберут 500 Кбайт JavaScript со статической (. ) веб-страницы, она будет загружаться НАМНОГО быстрее, а пользователи, как правило, будут счастливее. Кто бы мог подумать, верно?

Так зачем нужен AMP? Ну, в основном Google нужно было заблокировать контент-провайдеров, которые будут обслуживаться через поиск Google. Но им нужна была хорошая история для прикрытия. И они решили продвигать его как решение для повышения производительности.

Дело в том, что веб-разработчики не верят в производительность. Они говорят, что заботятся об этом, но на самом деле нет. То, во что они верят, это обман. Поэтому, если вы раскручиваете старые трюки под новым именем, разработчики могут сказать: «Теперь, наконец, я могу начать писать быстрые приложения. Спасибо, Google! » Как будто Google когда-нибудь запрещал вам делать это.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Возможно, но что мешает Google, если он действительно хочет помочь, выпустить его как обычную библиотеку JS? Так что шумиха сработала, многие разработчики купились на это и поспешили создать параллельную версию каждой веб-страницы, которую они обслуживают, с повышением производительности с помощью «AMP».

До этого: «Эй, босс, давайте перепишем наш сайт, чтобы он быстро загружался!» «Отвали!» «Но исследования показывают, что каждая секунда времени загрузки…» «Я сказал, отвали!»

Сейчас: «Эй, босс, давайте перепишем наш сайт с AMP. Это новая технология от Google …» «Брось все, возьмись за это! Вот тебе $$$» «Это также может улучшить …» «Мне все равно. Делай это УЖЕ!»

Я не говорю, что практика, продвигаемая AMP, плохая или бесполезная. Это хорошая практика. Но ничто не мешает вам следовать ей в обычной сети. Ничто никогда не мешало вам писать страницы с оригинальным контентом, с самого начала работы в Интернете. Google с трудом изобрел CDN и загрузку асинхронных скриптов. Но никто не заботился об этом раньше, потому что старые технологии и передовые практики никогда не бывают такими соблазнительными, как что-то, что называется «новым».

Введите PWA. Прогрессивные веб-приложения. Или приложения. Без разницы.

Таким образом, идея состояла в том, чтобы иметь возможность создавать нативные интерфейсы, но с помощью веб-стека. Чего не хватало для этого Вебу? Установки приложений. Оффлайн режима. Уведомлений (Ew). Работы в фоновом режиме. Да, это в основном так. Но это и все.

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

Проблемы с PWA? Ну, есть две проблемы.

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

Но большинство «приложений» сегодня доступны только онлайн! Вы не можете вызвать Uber, находясь в оффлайн режиме, и зачем тогда вам открывать приложение Uber? Tinder бесполезен в оффлайн режиме. Вы не можете назначать свидание с пустыми экранами чата. Вы не можете присоединиться к собранию на Meetup.com без подключения к сети. Вы не можете выбрать или забронировать отель, вы не можете перевести деньги или проверить баланс своего счета в автономном режиме. И никто не хочет перечитывать старые кэшированные твиты из Twitter или просматривать вчерашние фотографии из Instagram. Это просто не имеет никакого смысла.

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

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

Дело в том, что на самом деле это никак не связано с производительностью. Я имею в виду, ничего нового. Вы всегда могли кэшировать ресурсы для быстрой навигации по страницам, и браузеры с этим неплохо справляются. С помощью HTTP / 2 вы можете эффективно извлекать ресурсы в большом количестве и даже выгружать ресурсы с сервера для «более мгновенного» восприятия.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Таким образом, управление кэшем ресурсов в ServiceWorker кажется скорее бременем, чем благословением. HTTP-кеширование также декларативно, хорошо протестировано и хорошо понято на данный момент. Другими словами, с его помощью трудно что-то испортить. Чего вы не можете сказать о ServiceWorker. Кэширование — одна из двух самых сложных вещей в области компьютерных наук. Лично у меня был плохой опыт работы с Meetup.com PWA, когда из-за ошибки в их кешированном коде весь сайт стал непригодным до такой степени, что я не мог открыть страницы встречи. И в отличие от HTTP, это не так просто сбросить. Нет, обновление не помогло.

Но было бы хорошо, если бы ServiceWorker был компромиссом: вы платите за сложность, но получаете новые захватывающие возможности. Но то-то и оно, что это не так. С помощью ServiceWorke вы не можете сделать ничего полезного, что бы вы не могли сделать с помощью HTTP-кеша / AJAX / REST / Local Storage. Это просто сложная дыра, в которую вы выбрасываете бесчисленное количество рабочих часов.

PWA, как и AMP, даже не гарантирует, что ваш сайт будет загружаться близко к «быстро» или «мгновенно». Забавно, что, например, экран входа в систему Tinder (один элемент ввода текста, одна кнопка, один SVG-логотип и градиент фона) загружается при 4G подключении за 5 секунд! Я имею в виду, что им пришлось добавить загрузчик для 2-5 секунд, чтобы пользователи не закрывали эту ерунду сразу. И они называют это быстро.

О, а также не обслуживая миллиард JavaScript-пакетов и не визуализируя в клиенте с помощью React, обслуживаемого через GraphQL с помощью fetch polyfill. Это, вероятно, тоже помогло.

Если ваша целевая страница содержит 170+ запросов для изображения в 3,1 Мб и четырех полей формы, ServiceWorker или AMP, не могут загружаться быстро, независимо от того, сколько новых фреймворков вы добавите.

Вердикт

Так каков вердикт? Чтобы создавать быстрые веб-сайты с помощью AMP и PWA, вам все равно нужно разбираться в оптимизации производительности. Без этого единственный выбор, который у вас есть — быть обманутым. Но помните, что ни AMP, ни PWA не сделают волшебным образом ваш сайт быстрее, чем, скажем, обычная перезапись.

Знаменитая индексная страница Airbnb в 800Kбайт. Я ожидал бы большего от 900+ разработчиков со средней зарплатой $290 000 / год. Даже SublimeText в какой-то момент перестает подсвечивать эту ерунду.

Однако, как только вы разберетесь в производительности, вы поймете, что вам не нужны ни AMP, ни PWA. Просто прекратите заниматься ерундой, и Веб внезапно начнет работать мгновенно. AMP не изобрел CDN и noscript. PWA не изобрел кэширование. Статический Веб по-прежнему вращается вокруг современных хайповых фреймворков.

«Но пользователи! Они хотят необычной интерактивности. Они ТРЕБУЮТ анимации!»

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

Хотя я не думаю, что нам нужно больше уведомлений в нашей жизни. Только не с веб-страниц, которые мы посещаем случайно. Даже не от нативных приложений — я держу свой телефон в постоянном режиме «Не беспокоить» с коротким белым списком приложений.

Кстати, с тех пор, как вы впервые открыли эту статью, мой ServiceWorker загрузил 1,031 Мбайт бесполезных данных в фоновом режиме. Я надеюсь, что вы работаете через WiFi

Автор: Nikita

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Progressive Web Apps в WordPress

Эта статья является компиляцией тезисов доклада на конференции WordCamp Moscow 2020.

Что такое Progressive Web Apps (PWA)?

На самом деле ответить на этот вопрос довольно сложно. Пока скажем так:

Progressive Web Apps (PWA) — это гибридное приложение или сайт, которое работает на любой платформе, на любом устройстве

Постараюсь объяснить это не очень удачное определение.

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

Веб-сайты нам хорошо известны и они занимают превалирующую долю в коммуникациях бизнеса и пользователя. В последнее время сайты в массе своей стали удобными для использования практически в любых условиях и на любых устройствах, но существует серьезное ограничение — нестабильный канал связи в мобильных условиях. Всё смотрится отлично, но если нет интернета — нет и веб-сайта. А если скорость соединения с интернетом скачет и резко изменяется от десятков мегабит в секунду до нескольких килобит, то работу с веб-сайтом вряд ли можно назвать комфортной. Вспомните, как вы смотрите сайты в поезде или в вагоне метро…

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

Progressive Web Apps как раз и призваны решить эти проблемы и объединить эти две большие группы способов коммуникации в одну большую — PWA. Можно сказать так:

Progressive Web Apps — это способ построения приложений, использующих стек Веба (HTML, CSS JS), которые отвечают трем важным принципам:

1. Независимость от соединения с сетью — работает в оффлайн-режиме

2. Скорость и отзывчивость — быстрая реакция на действия пользователя

3. Нативный вид — не ломается идеология интерфейса устройства

Несколько примеров PWA

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


Попробуйте открыть эти сайты/приложения (даже на декстопе!) и включить авиарежим, отключив интернет.

Если вы внимательно посмотрите на изображение выше, то наверняка заметите, то Google Keep явно работает в интерфейсе Windows, то есть он работает на десктопе как полноценное приложение!

PWA на десктопе

Действительно, Progressive Web Apps могут и работают на десктопе (правда, не все браузеры пока это поддерживают) как обычные приложения.

Вот пример экрана моего компьютера. Всё, все приложения, что сейчас открыты на экране — PWA.

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

Но как такое возможно?

Реализация Progressive Web Apps (PWA)

Прежде всего, важно понять, что любое PWA приложение — это сайт, точнее полноценное использование Веб-стека:

  • Интерфейс приложения — HTML/CSS через HTTPS (обязательно!)
  • Взаимодействие с пользователем (интерактив) — AJAX (мы предпочитаем взаимодействие по REST API)
  • Оповещения, принудительная синхронизация данных — Push API
  • Кэширование данных для оффлайн работы — Service Workers и Cache API (чуть подробнее ниже)

Вот небольшая инструкция как с нуля сделать свое первое приложение доступна в Google Сodelabs.

Манифест PWA

Но прежде всего, это манифест приложения. Мы объявляем, как приложение должно работать, какие у него иконки, какое поведение на устройстве. Посмотреть его достаточно просто — откройте консоль браузера и переключитесь на вкладку Application.

Вторым, но по факту значимости первым компонентом приложения является Service Worker.

Что такое Service Worker?

Начнем с определения: Service Worker — это код JavaScript, который работает в отдельном контексте, вне главного потока браузера, без доступа к DOM. Используя возможности современного JS для асинхротронных операций, SW может прозрачно контролировать обращения и любые запросы браузера в пределах указанного домена. Фактически SW может пропускать через себя весь трафик нашего сайта, и решать что и как отдавать браузеру на очередной запрос.

Именно SW реализует политику кэширования приложения для работы приложения в оффлайн-режиме. Понятно, для каждого приложения она будет своей, но чаще всего разработчики используют политику Offile First. Есть замечательная статья (тоже старая! PWA родились не сегодня и не вчера! А вы и не знали :)), которая хорошо объясняет почему так. Обязательно найдите время и изучите ее:
https://alistapart.com/article/offline-first

Вообще, Service Wordker — это далеко не такая безобидная штука, как может показаться на первый взгляд, и по хорошему они требуют детального рассмотрения, но сейчас пока предложим вам в качестве первого эксперимента вот такое довольно простое решение.
https://justmarkup.com/log/2020/01/add-service-worker-for-wordpress/

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

Внедрение PWA на сайты WordPress

Как ни странно, но несмотря на то, что Progressive Web Apps существуют уже довольно долго (да и самой идее уже не один год!), о них мало говорят разработчики. И готовых решений для самой распространенной CMS в мире тоже не так много. Но есть. Вот несколько плагинов, которые позволяют внедрить на сайты WordPress функции PWA приложений:

    Super Progressive Web Apps — довольно простой, но весьма удачный плагин.

  • Progressive Web Apps от PWAThemes.com — более сложное, но и более гибкое решение, которое позволяет в том числе делать отдельные темы (внешний вид) для PWA представления.
  • Установка PWA на сайт WordPress на практике

    Для начала я взял достаточно несложный интернет-магазин эротического белья — https://www.lustshop.ru/
    Обратите внимание: наличие HTTPS обязательно!

    Установил плагин Super PWA и задал начальные настройки (их немного):

    Сбросил кэши сайта, и попробовал зайти с мобильного устройства:

    Всё! PWA приложение на мобильном устройстве!

    Теперь попробуем поставить его на десктоп. Для этого выберем в бразуере вот этот пункт:

    Готово! Приложение появилось на рабочем столе!

    Краткие выводы

    Итак, как мы видим Progressive Web Apps фактически объединяют сайты и приложения, стирая между ними границы.

    Используя подход PWA мы можем создать удобный сервис (сайт? приложение?) который будет работать в любых условиях, на любых платформах.

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

    Что такое Progressive Web Apps и какие возможности они открывают для вашего бизнеса

    Представьте, что ваш сайт взаимодействует с пользователем как приложение. То есть пользователь может установить его на любой гаджет, получать уведомления и работать с ним (даже без интернет-соединения). Это уже реальная технология, которую активно продвигает Google, и в этом посте я расскажу вам о ней в деталях.

    Progressive Web Apps (PWA) Google анонсировал еще в 2015 году. Этот формат создания мобильных сайтов привлек внимание благодаря относительной простоте разработки и почти мгновенному взаимодействию с пользователем. Уже в мае 2020 на конференции разработчиков Google I/O The Washington Post продемонстрировал свой мобильный гибридный сайт-приложение.

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

    Отличия PWA от нативных приложений

    1. В браузерах Google, Opera, Firefox и Microsoft PWA можно загрузить на любых гаджетах, независимо от размера экрана и других спецификаций. Кроме того, разработчики данных браузеров будут предлагать пользователям установить PWA при втором посещении сайта.

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

    3. Не нужно API с поддержкой обратной совместимости. В случае с PWA пользователи запускают ту же версию кода сайта (в отличие от классических приложений).

    Анимированный пример баннера с предложением установить PWA на домашний экран от Google Developers.

    И это только начало. Microsoft уже занимается решением задачи, как добавить прогрессивные веб-приложения в Windows Store. Google в мае 2020 озвучил длинный список идей для развития прогрессивных приложений. И то, что поисковые системы будут уделять особое внимание PWA в будущем, кажется неизбежным.

    Присмотритесь: возможно, прогрессивные приложения — ваш золотой билет в SEO-продвижение будущего.

    Зачем бизнесу создавать прогрессивные веб-приложения и почему именно сейчас?

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

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

    Почему прогрессивные веб-приложения изменят ситуацию?

    1. Пользователи могут переходить на прогрессивные приложения из ссылок в соцсетях, во время просмотра веб-страниц или непосредственно из выдачи. Согласитесь, это гораздо удобнее, чем конкурировать за просмотры с двумя миллионами доступных приложений на IOS App Store или Google Play Store.

    Мастер Йода рекомендует:  Зачем нужно изучать HTML

    2. Предложение установить прогрессивное приложение показывается только тогда, когда веб-приложение отвечает определенным критериям, и пользователь продемонстрировал интерес посредством повторного посещения сайта.

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

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

    5. Всплывающие уведомления, работа в автономном режиме и все другие функции прогрессивного приложения будут работать, даже если посетитель никогда его не устанавливал.

    6. Обычные приложения могут быть использованы только на той платформе, для которой они созданы. Вы не можете использовать приложение на вашем компьютере так же, как на Android или iOS устройстве. Кроме того, использовать приложение могут только те, кто его установил.

    Прогрессивные веб-приложения будут работать в любом месте, независимо от того, установлены они или нет. Они будут работать даже на платформах, которые еще не поддерживают все функции PWA — даже со старых ПК с примитивными браузерами к ним можно будет получить доступ. Правда — с ограниченным функционалом.


    Вы можете возразить, что существуют классические приложения, которые поддерживаются на разных платформах. Но поддержка таких приложений обходится в копеечку. Progressive Web Apps могут снизить эти затраты, сведя все к обеспечению одного приложения, которое работает на любой платформе.

    7. Когда вы не в магазине приложений, то не ограничены правилами App Store и не должны платить 30% от объема продаж.

    Недостатки Progressive Web Apps

    1. PWA — новая технология, поэтому существует не так много примеров реализации этого формата. Те, кто рискнет, станут первопроходцами.

    2. На момент публикации прогрессивные веб-приложения не доступны повсеместно. Да, Chrome и Opera начали поддержку прогрессивных Web Apps. Firefox и Microsoft взяли на себя обязательство по поддержке. Пока намерений по поддержке этого формата нет только у Apple.

    Впрочем, ни одна из этих причин не является препятствием для тестирования PWA как формата уже сегодня.

    В чем именно «прогрессивность» нового формата?

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

    После внедрения прогрессивного веб-приложения AliExpress увеличил конверсии c iOS-устройств на 82%. При том, что iOS пока не поддерживает PWA.

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

    1. AliExpress увеличил коэффициент конверсии для новых пользователей на 104%.
    2. United eXtra Electronics показал 4-кратное увеличение возвратов посетителей и на 100% повысил уровень продаж от пользователей, которые приходят в результате взаимодействия со всплывающими уведомлениями.
    3. 5miles снизил показатель отказов на 50% и увеличил конверсии на 30%.
    4. Konga используют на 92% меньше данных для первоначальной загрузки по сравнению с загрузкой их родного приложения.

    The Washington Post создали Progressive Web App, который установлен в фоновом режиме, когда люди читают их AMP страницы в результатах поиска Google. В результате количество посещений статей выросло на 12%. От загрузки статей по 8 секунд в 2013 они пришли к 80 миллисекундам в Progressive Web App.

    Почему стоит поторопиться?

    Сегодня пользователю достаточно дважды посетить ваш сайт, чтобы получить от браузера предложение установить PWA. Но так как количество внедрений технологии будет расти, то и частота предложений по установке тоже изменится, и таких предложений будет меньше. Все больше компаний начинают осваивать Progressive Web Apps и вскоре станет сложно выделиться из толпы.

    1. Посмотрите и «пощупайте» Progressive Web Apps.
    2. Разберитесь в работе PWA и сделайте свое первое приложение с курсом от Udacity.
    3. Разберитесь в прогрессивных веб-приложениях вместе с представителем Google Андреем Липатцевым. Он рассказал об этой технологии на WebPromoExperts SEO Day.

    Технология PWA

    Сайт без интернета или технология PWA.

    Салют, всем читателям моего блога! Сегодня я хочу вас познакомить с новой технологией в сайтостроении. И называется она – Технология PWA. Давайте сначала разберемся что она из себя представляет и что может. А потом будем пошагово подключать сайт на WordPress или любой другой (не принципиально).

    Что такое PWA? – Аббревиатура от латинского словосочетания Progressive Web Apps. Что в переводе означает – Прогрессивное веб-приложение. В нашем случае, это тот же сайт, только он может работать на смартфонах без подключения к интернету. Заинтересовались? Я когда в первый раз прочел об этом на форуме, вообще не поверил.

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

    Только представьте, вы когда-то нашли очень полезную для вас информацию (какую-то инструкцию или список каких-то вещей) и вам он очень сейчас понадобился, но нет подключения к интернету. В обычном режиме вы никогда не сможете открыть нужную страницу, пока не подключитесь к интернету. А вот в случае, когда сайт поддерживает технологию прогрессивное веб-приложение, вы без проблем сможете отрыть нужную страницу без каких-либо манипуляций.

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

    ВАЖНО! Приложение работает только по защищенному протоколу https. Если вы ещё не перешли на этот протокол, подключение не получится.

    Как подключить PWA к сайту WordPress?

    В первом случае подключения вам необходимо будет иметь хотя-бы базовые знания в разметке html и структуре php кода WordPress движка. Так же для тех, кто предпочитает пользоваться плагинами, в конце статьи я покажу как и каким плагином воспользоваться. Но давайте всё по порядку.

    Способ первый: Вручную (примитивный).

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

    Шаг №1.

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

    • Иконки для apple
    • 57×57
    • 60×60
    • 72×72
    • 76×76
    • 114×114
    • 120×120
    • 144×144
    • 152×152
    • 180×180
    • Иконки для android
    • 36×36
    • 48×48
    • 72×72
    • 96×96
    • 144×144
    • 192×192
    • 512×512

    Как вы успели заметить, некоторые размеры повторяются, их можно заново не создавать. Их можно даже не переименовывать, работать будет и так. Чтобы проще было делать одинаковые иконки, создайте сначала самую большую, то есть 512х512 и уже из неё сохраняйте меньшие размеры. В фотошопе перед сохранением можно поставить нужный размер, вот тут и ставите нужный вам. Файл -> Сохранить для Web.

    Шаг №2.

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

    Рядом с ними создайте новую папку, у меня она называется icons. В итоге, получилось так:

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

    Шаг №3.


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

    Как видите, и в первом и во втором случае, подключение происходит напрямую с папки icons и ссылка имеет полный путь. После создания этого файла, заливаете его в корень сайта рядом папкой icons и подключаете его в файле header.php после подключения иконок, перед функцией

    Шаг №4.

    Теперь, нужно создать файл скрипта, который и будет создавать кэш в телефоне. Файл будет называться manUp.js.

    После создания, так же как и в предыдущем случае, заливаем этот файл в корень сайта и подключаем в header.php.

    Шаг №5.

    Теперь создаем ещё один файл с названием pwabuilder-sw.js и так же заливаем его в корень сайта. Теперь подключаем этот файл в том же header.php:

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

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

    Уверен, глаз уже радуется, не так ли?

    Теперь осталось выключить интернет и попробовать перейти на сайт по иконке. Сайт откроется как обычное приложение и будет полностью функционировать. Будет функционировать только сам сайт, а те скрипты которые требуют интернет подключение (например реклама от Гугла или Яндекса, видео с Ютуба), естественно работать не будут.

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

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

    Способ второй: Автоматический (рекомендуемый).

    Как многие уже из вас заметили, я переписал статью. Зачем? Дело в том, что на начальном этапе тестирования, я установил самый популярный плагин PWA для WP. Но как оказалось зря. А зря, потому-что этот плагин работает немного некорректно. Речь идет о Super Progressive Web Apps.

    Проблема заключалась в том, что пользователь не видел обновлений сайта. То есть, добавляется новая статья к примеру, а пользователь видит старую версию сайта даже с включенным интернетом. А чтобы увидеть новую версию, ему придется чистить полностью кэш в браузере. Что как вы понимаете, делать никто не будет. Поэтому я протестировал 3 самых популярных и сейчас расскажу какой плагин по моему мнению оказался лучшим и как его настроить.

    Плагин Progressive Web Apps For WP

    Для поиска этого плагина просто введите ключевое слово в поиск «PWA», данный плагин второй по популярности. Но как бы то не было, просто установить плагин и радоваться новой функцией своего сайта, не получится. Именно по этому я решил переписать статью и предоставить вам максимально понятную расшифровку настроек и инструкцию как правильно его настраивать.

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

    Первая вкладка Dashboard.

    На данной вкладке всё должно быть точно так же как и на скрине выше. Если у вас последняя галочка не зеленая, значит ваш сайт работает по незащищенному протоколу http. Это означает, что на этом сайте приложение работать не будет. Чтобы подключить приложение PWA к WordPress’у нужно сначала перевести сайт на защищенный протокол https.

    Вторая вкладка General.

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

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

    В настройках Offline Page нужно выбрать стандартную страницу, на которую будет автоматически перенаправляться пользователи со страниц, которые ещё не существуют в кэше приложения.

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

    Третья вкладка Design.

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

    Четвертая вкладка Push Notification.

    В данной вкладке как я понял, нужно подключать пуш уведомления для этого приложения через какой-то сервис FireBase от Google. Честно говоря я даже не разбирался, потому-что пользуюсь сервисом SendPulse для таких функций. Поэтому пропускаем эту вкладку, ну или если хотите, ознакомьтесь. В двух словах, я не до конца понял для чего этот сервис именно, поэтому не стал вникать.

    Пятая вкладка Advanced.

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

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

    • Stale While Revalidate – При каждом запуске приложения отдает параметр «Кэш устарел». Я так понял, эта настройка показывает сообщение что кэш старый и не соответствует настоящим данным на сайте.
    • Network First – Посылает запрос сначала на наличие интернета и если интернет есть загружает страницу и обновляет кэш приложения. Если же интернета нет, показывает страницу из кэша.
    • Cache First – Сначала обращается к кэшу и если страница в кэше есть, вытаскивает эту страницу пользователю. Если нет страницы в кэше, пытается загрузить из интернета.
    • Network Only – Сайт работает только через интернет, как обычный сайт. Приложение не обращается к кэшу.

    В чем соль? А соль в том, что предыдущий плагин Super Progressive Web Apps работает по настройкам Cache First. Именно поэтому пользователь не видел обновленной версии сайта. Алгоритм был следующим: пользователь заходит на страницу блог (где появилась новая статья), а приложение нашло в своем кэше эту страницу и по закону отдает её пользователю. Ведь у приложения четкая инструкция, загружать в кэш только тогда, когда страницы ещё нет в нем. В остальных случаях, просто отдавать пользователю страницы с кэша. Вот такие дела.

    Шестая вкладка Tools.

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

    Ну о последней вкладке сказать нечего. Думаю и так понятно для чего она. На этой ноте можно смело закончить настройку PWA приложения для WordPress сайта. Теперь, когда всё настроено, можете зайти на свой сайт и добавить его на рабочий стол. После этого выключите интернет и попробуйте открыть сайт нажав на свою иконку сайта (она будет находиться на главном экране рядом с другими приложениями). Если сайт открылся, поздравляю! Вы всё сделали правильно.

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

    Если же у вас что-то не получилось, не стесняйтесь спросить об этом в комментариях. Я всегда рад помочь если это в моих силах. Обязательно оцените статью, если она вам была полезна или просто понравилось написание. Оценить можно прям тут, под текстом. Пожалуй на сегодня у меня всё, увидимся на страницах блога WPMaster.KZ.

    Друзья, блогу нужна ваша поддержка. Если вам понравилась статья или она вам помогла решить задачу, поделитесь ею в одной из соцсетей. Этим вы поможете дальнейшему развитию. Всем активистам — спасибо!

    Progressive Web App – от А до Я: что это? Как создать прогрессивное веб приложение?

    Progressive Web App – это веб приложение, которое обладает рядом преимуществ, использует передовые возможности браузеров, и может быть добавлено как ярлык на ваш рабочий стол. Его поведение в целом напоминает нативные приложения.

    В этом уроке мы будем рассматривать все моменты которые стоить знать о Progressive Web App (дальше PWA). Шаг за шагом, с примерами кода и демо приложением. Как пример, мы будем создавать приложение для создания селфи.

    Progressive Web App – что это?

    В своей сущности, PWA ничем не отличается от привычных веб сайтов. Прогрессивное веб приложение также создано используя HTML, CSS, JavaScript. Оно легко открывается в браузере. Что отличает PWA от сайта? Мы рассмотрим концепцию из 10 ключевых моментов. Вот эти пункты, взяты из ресурса Google Developers.

    Безопасность — PWA должен быть создан на основании HTTPS протокола, чтобы избежать утечек данных.

    Прогрессивность — Рабочее для каждого пользователя и платформы. Так как каждый современный браузер, способен запускать такие приложения.

    Резиновый дизайн (responsive) – должно помещаться на дисплей любого устройства: десктоп, мобильный, планшет и все что появится в будущем.

    Независимое от подключения к интернету — такое приложение оборудуется специальным обработчиком (Service Worker), который способствует работе приложения без подключения к сети или на низкой скорости передачи данных.

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

    Обновляемое — благодаря вышеупомянутому Service Worker, наше приложение будет обновляться.

    Идентифицируемое — приложение будет определятся браузерами благодаря стандартизации ( W3C манифесту), а также Service Worker. Поисковики смогут видеть и находить ваше приложение.

    Вовлекаемое — вы сможете создавать push у ведомления, которые будут возвращать пользователя в приложение.

    Устанавливаемое — позволяет пользователю сохранять все полезные для него приложения на главный экран мобильного, без перехода в Play Market и App Store.

    Имеет URL – вы сможете с легкостью поделиться приложением, просто переслав URL другому человеку.

    Следуя этим указаниям убедитесь, что ваше приложение работает хорошо не только в браузере но и без участия интернета, запущенное через ярлычок. Может показаться, что все сложно и слишком много требований от Google. Не отчаивайтесь, мы объясним все требования одно за другим ниже.

    Чем Progressive Web App НЕ является?

    Концепция прогрессивного веб приложения ничем не связанна с следующими платформами:


    Electron и NW.js

    Все вышеупомянутые технологии упаковывают HTML приложение в исполняемые файлы . apk или . exe, или что то подобное этому. Все эти файлы могут устанавливаться на устройство и запускаться как приложения.

    PWA не потребуют инсталляции и не доступны Google Play Market и Apple Store (на данный момент). Чтобы установить PWA вам нужно посетить сайт, затем просто сохранить ярлык на рабочий стол.

    Безопасность

    Большинство прогрессивных веб приложений работают с нативыми API и сервисами. Это технологии которые работают с трепетными данными и должны обрабатываться осторожно. Вот почему PWA должно быть предоставлено через HTTPS протокол.

    Если вы не имеете возможности запустить сервер с SSL сертификатом, вы можете использовать страницы GitHub и аналогичные сайты. Любой репозиторий GitHub доступен по HTTPS и может быть использован бесплатно для публичного доступа.

    Для тестов приложения на локальном сервере, можно использовать Ngrok. Это не сложный инструмент, который создает тоннель соединения через публичный безопасный URL. Ngrok бесплатный и совместим с Windows, Mac, Linux.

    Прогрессивность

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

    Для примера, в нашем селфи приложении мы используем метод getUserMedia() чтобы получить доступ к камере устройства. Поддержка такового не доступна во всех браузерах — Safari не поддерживает это вообще, другие браузеры требуют префиксы.

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

    Мы также покажем ошибку, если никакой из префиксов не сработал:

    Такой подход должен быть предоставлен везде в коде приложения. Также это касается HTML и CSS кода.

    Резиновый дизайн (Responsive)

    Приложение должно выглядеть красиво, не важно на каком устройстве оно запущено. В нашем случае UI весьма простой. Поэтому мы использовали несколько media запросов, чтобы управлять размером шрифта, отступами и т. д.

    Вы можете использовать привычные всем библиотеки и фреймверки, такие как Bootstrap. Так как это упростит вам создание сеток, изменение размеров шрифтов и вообще упростит создание резинового дизайна.

    Независимое от подключения к интернету

    Это один из ключевых принципов. Используя Service Worker API, вы сможете сделать приложение работоспособным без подключения к интернету.

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

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

    Внимание! Это приблизительный пример использования Service Worker . Пользуйтесь этим API осторожно, особенно в коммерческих проэктах.

    Прежде всего создадим отдельный JS файл и опишем всю логику в нем:

    sw.js

    Затем нужно связать service worker с нашим HTML.

    index.html

    Теперь все необходимые файлы проекта будут сохранены браузером на устройство. Все JS переменные и обьекты также должны быть сохранены в localStorage или IndexDB, по возможности.

    На данный момент Service Worker поддерживается Chrome, FireFox, и Opera. Safari и Edge работают над поддержкой, и мы надеемся что в ближайшем будущем это будет кроссбраузерное API.

    Визуально похожее на приложение

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

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

    Мастер Йода рекомендует:  10 трюков библиотеки Python Pandas, которые вам нужны

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

    Обновляемое

    Однажды закэшированное приложение, всегда будет загружаться из кэша. Хотя, если мы обновим наш sw.js, то в следующий раз, все файлы должны обновиться и новая версия будет сохранена на устройство.

    Используя ServiceWorker мы можем обновлять реурсы, удалять из кэша старые, или поменять всю логику работы приложения. Изучайте больше методов Service Worker.

    Идентифицируемое

    Добавив Web Manifest в наше приложение, мы можем предоставить много информации о нашем приложении. Также в нем описано некое поведение приложения. Он позволяет сохранять приложение с вашим ярлычком, и запускать его в новой вкладке браузера. Это полезные вещи.

    Web Manifest это привычный JSON файл с руководствами:

    manifest.json

    Большинство свойств понятны интуитивно, поэтому мы рассмотрим только некоторые из них. Вся документация о веб манифесте находиться здесь.

    Shortname – название нашего приложение, которое будет показано снизу ярлычка.

    Icons – массив иконок с разными размерами

    Display – определяет каким образом будет запускаться приложение. Мы выбрали standalone, чтобы запустить приложение без вспомогательной навигации и всяких меню браузера. Также приложение будет показано как отдельное в свернутой панели задач.

    Чтобы зарегистрировать манифест, нам нужно всего лишь сослаться на него из HTML

    Safari все еще не поддерживает web manifest, но мы можем добавить специальный мета тег, чтобы определял поведение приложения.

    Вовлекаемое

    Push сообщения больше не ограничиваются в привычных приложениях. Благодаря Service Worker и Push API, веб приложения также могут рассылать уведомления в Andro >Не всем пользователям это нравится, но это весьма полезная вещь для соответствующих приложений.

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

    Устанавливаемое

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

    К счастью, есть способ быстрой установки приложения. У пользователя появится Pop-Up окно, с предложением сохранить приложение. Чтобы предотвратить надоедание всплывающими окнами, не существует ручного управления функцией. Но, такое окно будет появятся автоматически, если:

    Существует валидный Web Manifest

    Существует валидный Service Worker

    Приложение запускается по безопасному протоколу HTTPS

    Мы все это реализовали в нашем демо, поэтому пользователи будут видеть вот такое уведомление на дисплее.

    Весь процесс инсталляции приложение происходит через это окно.

    Имеет свой URL

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

    Если приложение запускается оффлайн, рекомендуем добавить кнопку поделиться. Так как некоторые стандартные элементы браузера могут быть скрыты. Пользователь должен иметь возможность переслать ссылку на приложение другим.

    В заключение

    Наше PWA теперь готово. Мы можем тестировать его и смотреть рекомендации по улучшению. Для этого есть специальный инструмент от Google, — Lighthouse.


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

    Вот и все! Пишите свои вопросы, идеи, замечания в комментариях ниже!

    Разработка вашего первого Progressive Web App c React

    Progressive Web Apps это разрекламированное будущее интернета. Давайте разработаем такое приложение!

    Google продвигает PWA как решение многих проблем современного веба — в частности вопросов связанных с мобильными пользователями: https://developers.google.com/web/progressive-web-apps/.

    Progressive Web App — это по сути быстрые, ориентированные на производительность веб-приложения, которые специальным образом подготовлены для мобильных устройств. Также их можно сохранить на домашнем экране вашего смартфона, а оттуда они будут выглядеть и чувствовать себя как нативные приложения (включая оффлайн особенности и Push уведомления).

    Крупные игроки, такие как Twitter или Flipboard недавно запустили свои PWA, которые можно попробовать посетив с мобильного устройства страницы http://flipboard.com или https://lite.twitter.com/.

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

    Настройка

    Для начала, давайте создадим базовое React приложение с помощью create-react-app.

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

    Теперь давайте установим React Router:

    Наконец, скопируйте этот код в файл App.js. Он даст нам простой макет страницы с навигацией:

    Запустите npm start чтобы протестировать ваше приложение. Смотреть ещё нечего, но для наших целей это хорошее начало. Давайте начнём конвертировать всё это в Progressive Web App.

    1. Установка Lighthouse

    Lighthouse — это бесплатный инструмент от Google, который оценивает ваше приложение на основе чек листа PWA. https://developers.google.com/web/tools/lighthouse/.

    Давайте установим его в Chrome, а после этого оценим нашем приложение. Вы можете запустить аудит Lighthouse кликнув по иконке в правом верхнем углу браузера, а затем нажав на кнопку «Generate Report».

    Пока что наше приложение быстрое (так как у нас очень мало контента), но оно проваливается в большинстве ключевых областей.

    Вы можете увидеть чек лист, который используется в Lighthouse здесь: https://developers.google.com/web/progressive-web-apps/checklist.

    Давайте работать с проблемами по порядку.

    2. Настройка Service Worker

    Service worker — это JavaScript код, который находится между нашим приложением и сетью. Мы будем использовать его для перехвата сетевых запросов и обслуживания закэшированных файлов — это позволит нашему приложению работать оффлайн.

    Чтобы начать работу с Service Worker’ом, нам необходимо сделать 3 вещи:

    • Создать файл service-worker.js в папке public ;
    • Зарегистрировать worker через наш index.js ;
    • Настроить кэширование;

    Давайте сделаем это.

    Первый шаг довольно понятен. В папке pwa-experiment/public , создаём пустой JavaScript файл названный service-worker.js .

    Второй шаг немного запутаннее. Мы хотим проверить если браузер поддерживает service worker’ы, и тогда регистрировать его с помощью service-worker.js .

    Чтобы сделать это, давайте добавим тег script в файл public/index.html.

    Этот код очень простой — если браузер поддерживает его, то мы ждём пока страница загрузится, а после этого регистрируем наш Service Worker загружая файл service-worker.js .

    Завершающий шаг: Настройка кэширования!

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

    Перезапустите ваш приложение с помощью npm run start и вы должны увидеть следующее в консоле:

    Давайте закроем консоль и запустим аудит Lighthouse снова:

    Мы делаем успехи! Теперь у нас есть зарегистрированный Service Worker. Так как у нас отключено кэширование, вторая галочка ещё не отмечена, но как только мы включим кэширование она будет работать!

    3. Добавление прогрессивных улучшений

    Прогрессивные улучшения в основном означают, что сайт будет работать без загрузки любого JavaScript кода.

    Прямо сейчас, файл index.html отображает пустой div (#root) , который подхватывает наше React приложение.

    Вместо этого, мы хотим отображать какой-то базовый HTML и CSS, ещё до того как React приложение будет инициализировано.

    Самый простой способ сделать это — переместить некоторые из наших основных HTML структур в этот самый div#root . Этот HTML будет перезаписан как только ReactDOM отобразит компонент App, но покажет пользователю что-то вместо пустой страницы на которую пришлось бы глазеть пока загружается bundle.js.

    Вот наш новый index.html . Обратите внимание, что стили находятся в head , а HTML в div#root .

    (Кстати, теперь мы можем удалить дубликаты стилей в App.css и index.css — просто чтобы сделать код чище.)

    Одобрит ли это Lighthouse?
    Ага!

    4. Возможность добавления на домашний экран

    Мы можем пропустить требования касающиеся HTTPS — которые будут учтены после деплоя.

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

    Чтобы это сделать, нам нужно добавить файл manifest.json в папку public .

    Если у вас нету значка, то можете использовать этот (любезность моей компании MuseFind), или создайте свой собственный (должен быть 192 на 192 пикселя):

    Добавьте icon.png и manifest.json в папку public , а также добавьте следующие строки в ваш index.html файл:

    Хорошо, что теперь мы делаем?

    Всё что нам не хватает, это кэширование и HTTPS.

    5. Деплой через Firebase

    Во-первых, включите кэширование. Измените doCache на true в файле service-worker.js .

    После этого, в консоле Firebase создайте новый проект и назовите его pwa-experiment .

    Вернитесь в папку с проектом и запустите следующее:

    После того как вы пройдёте авторизацию и начнётся инициализация: ответьте на следующие вопросы:

    Когда он спросит What Firebase CLI features do you want to setup for this directory? , с помощью пробела снимете галочки везде кроме «Hosting».

    Нажмите Enter, а после этого выберите pwa-experiment в качестве проекта.

    Когда он спросит What do you want to use as your public directory? , наберите на клавитуре «build» и нажмите Enter.

    На вопрос про одностраничное приложение, выберите «No».


    После этого процесс должен завершиться. Теперь можно запустить команду:

    Это соберёт наш проект в папку build , которую Firebase будет деплоить.

    Firebase вернёт нам URL. Давайте откроем его в Chrome и запустим аудит Lighthouse в заключительный раз.

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

    Куда двигаться дальше

    Вся суть Progressive Web App — скорость. В этой статье мы пропустили много всего связанного с улучшением производительности, так как наше приложение было скелетным.

    Однако, по мере роста вашего приложения, файл main.js будет увеличиваться и увеличиваться, и Lighthouse будет всё меньше и меньше доволен вами.

    Следите за нами, чтобы не пропустить углублённую статью об оптимизации производительности с помощью React и React Router, которая будет применима как и для Progressive Web App так и для старомодных веб-приложений.

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

    Современные сайты как прогрессивные веб-приложения PWA!

    Хотите создавать современные сайты? Тогда вам не обойтись без Progressive Web Apps! Прогрессивные веб-приложения (PWA) — это новая технология, которая создает промежуточную точку между веб-сайтом и мобильным приложением. Они устанавливаются на смартфоны и планшеты как обычное приложение, и могут быть доступны с главного экрана!

    Что могут современные сайты с технологией PWA?

    Современные сайты с Progressive Web Apps (PWA)могут конвертировать сайт в мобильное приложение. В момент посещения такого сайта, с мобильного устройства браузер предлагает всплывающее сообщение «ДОБАВИТЬ НА ГЛАВНЫЙ ЭКРАН» и если пользователь соглашается, то в фоновом режиме происходит установка сайта как приложения. С этого момента сайт в интернете остается сайтом, а на мобильном устройстве это мобильное приложение.

    всплывающее сообщение «ДОБАВИТЬ НА ГЛАВНЫЙ ЭКРАН»

    Нет, я не ошибся. Теперь сайт становится именно мобильным приложением со всеми его фичами и преимуществами. Не правда ли это очень круто! Заметьте такой момент, нам не нужно ходить в специальный магазин мобильных приложений App Store или Google Play, мы делаем прямую установку- что намного круче.

    Добавлена иконка приложения

    Есть ли ограничения у такого приложения? Абсолютно нет! Ограничения могут быть только в функционале, но это зависит нет от самого приложения, а от функционала который в него заложен. Далее мы коснемся ресурсов создания и внедрения Progressive Web Apps на сайты.

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

    Основные преимущества веб-сайтов с Progressive Web Apps

    1. Прогрессивность. С каждым новым обновлением мы получаем новые технологические новшества. Подключившись однажды, мы остаемся, так сказать в теме развития новых технологией.
    2. Адаптивность. Возможность подстраиваться под различные операционные системы устройств, их экраны и возможности.
    3. Независимое от соединения с интернетом. Автономная работа вне сети -оффлайн.
    4. Как нативное приложение. Нативное, значит имеющее свою собственную программную оболочку, быстро загружаемую.
    5. Безопасное. Работающее по защищенному протоколу HTTPS.
    6. Доступное для поиска в интернете. Прогрессивное веб приложение это все еще сайт, находящийся в интернете, он доступен для поиска, он индексируется.
    7. Технология push. Возможность коммуникации владельца и пользователя посредством отправки на устройство сообщений (push-нотификаций).
    8. Легкая установка и распространение. Установка в одно нажатие, минуя магазины приложений App Store или Google Play. Поделится можно с помощью ссылки.

    Почему необходимо внедрение PWA на современные сайты?

    Не секрет, что в 2014 году произошло знаковое событие, изменившее лицо интернета. Напомним. Тогда число посетителей интернета с мобильных устройств превысило аудиторию посетителей с настольных компьютеров. С тех пор всё чаще мы слышим, мобильный сайт, адаптивный дизайн. Смотрите график роста мобильных пользователей интернета.

    Рост мобильных пользователей интернета

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

    По данным ВЦИОМ количество пользователей интернета в России за 1 квартал 2020 года составил 80% от общего числа населения. Прирост числа ежедневных интернет-посетителей вырос – с 28% 2011 года до 62% в 2020 году.

    Рост пользователей интернета в России

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

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

    Посмотрим на глобальные иследования DIGITAL IN 2020

    Доля посещение интернета по устройствам

    • Две трети населения во всем мире используют смартфон.
    • Цифра уникальных мобильных посетителей в мире выросла на 4% за год.
    • Смартфоны это предпочтительное устройство для выхода в интернет, что составляет самую большую долю веб-пользователей вместе взятых.

    Как начать использовать PWA в современных сайтах

    Разработка современных сайтов с WordPress

    Как я писал ранее о преимуществах WordPess, продолжаю о том же — выбирайте его. Современные сайты с технологией PWA уже доступны и работают на этой cms. Да, как не странно звучит, на бесплатной системе есть такая возможность. Рассмотрим один из бесплатных плагинов реализующих Progressive Web Apps .

    Плагин Super Progressive Web Apps

    Super Progressive Web Apps упрощает преобразование современного веб-сайта WordPress в прогрессивное веб-приложение мгновенно! Скачать плагин Официальный сайт приложения SuperPWA

    Пользователи могут вернуться на ваш сайт, запустив приложение со своего домашнего экрана и взаимодействуя с вашим сайтом через приложение-интерфейс. Ваши посетители, будут запускать его почти мгновенное и наслаждаться отличными преимуществами вашей PWA!

    После установки SuperPWA пользователи, просматривающие ваш сайт с мобильного устройства, увидят уведомление «Добавить на главный экран» (внизу экрана) и смогут «установить ваш сайт» на главном экране своего устройства. Каждая посещаемая страница хранится локально на этом устройстве и будет доступна для чтения, даже если находится в автономном режиме!

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

    Что в коробке

    Вот текущие функции Super Progressive Web Apps:

    • Установка иконки для вашего прогрессивного веб-приложения.
    • Установите цвет фона для заставки вашего прогрессивного веб-приложения.
    • На вашем веб-сайте будет отображаться уведомление «Добавить на главный экран» при обращении к нему в браузере.
    • Агрессивное кэширование страниц с использованием CacheStorage API.
    • Страницы, которые когда-то были кэшированы, обслуживаются, даже если пользователь находится в автономном режиме.
    • Задайте настраиваемую автономную страницу: если вы хотите выдать её пользователю, а её нет в кэше, и она будет доступна, даже когда пользователь находится в автономном режиме.
    • Поддержка тематического цвета.
    • Теперь вы можете редактировать имя приложения и краткое описание.
    • Установите стартовую страницу вашего PWA.
    • Установка ускоренной версии мобильных страниц (AMP) в качестве начальной страницы.
    • Поддерживаемые плагины: AMP для WordPress, AMP для WP, Better AMP, AMP Supremacy, WP AMP.
    • Добавлена ​​поддержка высококачественной заставки.
    • Теперь вы можете установить значок 512px × 512px для заставки вашего прогрессивного веб-приложения.
    • Super Progressive Web Apps теперь учитывает обновления содержимого и обновляет кеш при обновлении веб-сайта.
    • Улучшена обработка обновлений рабочего стола в браузере.
    • Теперь вы можете установить ориентацию вашего PWA по умолчанию. Выберите «Любые» («Ориентация на устройство»), «Портрет» или «Пейзаж».
    • Теперь вы можете установить свойство theme_color в манифесте.
    • Интеграция OneSignal для Push-уведомлений.
    • Совместимость с многопользовательской сетью WordPress.

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

    Установка в WordPress в пять шагов:

    1. Зайдите WordPress Admin
    2. Плагины
    3. Добавить новый
    4. В строке Поиска напишите: «PWA»
    5. Нажмите «Установить», а затем «Активировать»

    Чтобы установить вручную:

    1. Загрузите папку Super Progressive Web Apps в каталог / wp-content / plugins / на вашем сервере
    2. Перейти к WordPress Admin> Плагины
    3. Активируйте плагин Super Progressive Web Apps из списка.

    Настройка прогрессивного веб-приложения

    Ваше прогрессивное веб-приложение должно быть готово к работе с настройками по умолчанию при активации. Вы также можете настроить его дальше и сделать его по-настоящему своим.

    Настройка прогрессивного веб-приложения

    Перейти к WordPress Admin> SuperPWA
    Установите цвет фона для отображения заставки, когда ваш PWA открывается на мобильном устройстве.
    Установите значок приложения. Это будет значок вашего PWA, когда он будет добавлен на рабочий стол на мобильном устройстве. Значок должен быть PNG-изображением и размером 192 x 192 пикселя.
    Установите автономную страницу. Эта страница будет отображаться, если пользователь находится в автономном режиме, и запрошенная им страница уже не кэшируется.
    Нажмите «Сохранить настройки».

    Заключение

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

    Если Вы согласны или не согласны с содержанием данного материала, просим Вас оставить свой отзыв или проголосовать.

    Остались вопросы? Задайте его удобным для вас способом:

    Как сделать PWA устанавливаемым

    На этой странице

    В предыдущей статье мы читали о том, как js13kPWA работает в off-line режиме благодаря service worker, но мы можем пойти дальше и позволить устанвливать веб-приложения на поддерживающие мобльные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».

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

    Требования

    Чтобы сделать сайт доступным для установки, ему необходимы соедующие вещи:

    • Веб-манифест с правильно заполненными полями
    • Сайт должен использовать защищенный (HTTPS) домен
    • Иконка для предоставления приложения на устройстве
    • Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)

    Файл манифеста

    Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате.

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

    Файл js13kpwa.webmanifest веб-приложения js13kPWA включен в раздел содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.»> файла index.html с помощью средующей строчки кода:

    Примечание: Существует несколько расширений, используемых в прошлом: manifest.webapp был популярен в манифестах приложений Firefox OS, также многие используют manifest.json потому что содержание организовано по структуре JSON. Однако, расширение .webmanifest явно упоминается в W3C manifest specification, поэтому давайте придерживаться именно этого стандарта.

    Содержимое файла может выглядеть так:

    Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:

    • name : Полное название вашего приложения.
    • short_name : Короткое название для отображения на домашнем экране.
    • description : Одно-два предложения, описывающих приложение.
    • icons : Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше пдходила под устройство пользователя
    • start_url : Загружаемый исходный документ при запуске приложения
    • display : Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)
    • theme_color : Основной цвет для интерфейса, используемый операционной системой
    • background_color : Цвет для фона, используемый при установке и на заставке

    Минимальные требования к манифесту — name и хотя бы один значок (с src , size и type ). Поля description , short_name , и start_url являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на Web App Manifest reference.

    Добавить на домашний экран

    «Добавить на домашний экран» (кратко: a2hs) — это функция, реализованная браузерами, которая берет информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.

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

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

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

    При подтверждении ярлык будет добавлен на рабочий стол.

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

    Экран загрузки

    В некоторых браузерах, на основе информации из манифеста, создается заставка, отображаемая при запуске PWA

    Иконка и фоновый цвет использовались для создания заставки.

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

    Для получения большей информации, можете почитать наш Add to Home screen гайд. В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.

    Теперь давайте перейдём к последнему фаргменту PWA-головоломки — повторному запуску с помощю push-уведомлений.

    Добавить комментарий