7 инструментов для разработки прогрессивного веб приложения (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. Нажмите «Установить», а затем «Активировать»
Илон Маск рекомендует:  $IOChecks - Директива компилятора Delphi

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

  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 пикселя.
Установите автономную страницу. Эта страница будет отображаться, если пользователь находится в автономном режиме, и запрошенная им страница уже не кэшируется.
Нажмите «Сохранить настройки».

Заключение

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

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

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

Ваше первое прогрессивное веб-приложение

Введение

Что делает веб-приложение прогрессивным веб-приложением?

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

быстро и надежно

Каждый веб-опыт должен быть быстрым, и это особенно верно для Progressive Web Apps. Под быстрым понимается время, необходимое для получения значимого контента на экране и предоставления интерактивного опыта менее чем за 5 секунд.

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

Устанавливается

Прогрессивные веб-приложения можно запускать на вкладке браузера, но их также можно установить. Создание закладки для сайта просто добавляет ярлык, но установленное Progressive Web App выглядит и ведет себя как все остальные установленные приложения. Он запускается из того же места, что и другие приложения. Вы можете контролировать процесс запуска, включая настраиваемый экран-заставку, значки и многое другое. Он запускается как приложение в окне приложения без адресной строки или другого пользовательского интерфейса браузера. Как и все другие установленные приложения, это приложение верхнего уровня в переключателе задач.

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

Mobile & Desktop

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

Что вы будете строить

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

  • Используйте адаптивный дизайн, чтобы он работал на настольном или мобильном устройстве Быть быстрым, используя работника службы для предварительного кэширования ресурсов приложения (HTML, CSS, JavaScript, изображений), необходимых для запуска, и кэшировать данные о погоде во время выполнения для повышения производительности
  • beforeinstallprompt установки с использованием манифеста веб-приложения и события beforeinstallprompt чтобы уведомить пользователя о возможности его установки

Что вы выучите

  • Как создать и добавить манифест веб-приложения
  • Как обеспечить простой опыт работы в автономном режиме
  • Как обеспечить полный опыт работы в автономном режиме
  • Как сделать приложение доступным для установки

Эта кодовая метка ориентирована на прогрессивные веб-приложения. Нерелевантные концепции и блоки кода затенены и предназначены для простого копирования и вставки.

Что вам нужно

  • Недавние версии Chrome (74 или более поздних) — это веб-приложения, которые работают во всех браузерах, но мы будем использовать некоторые функции Chrome DevTools, чтобы лучше понимать, что происходит на уровне браузера, и использовать его для проверить опыт установки.
  • Знание HTML, CSS, JavaScript и Chrome DevTools .

Начало работы

Получите ключ для API Dark Sky

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

Убедитесь, что ваш ключ API работает правильно

Чтобы проверить, работает ли ваш ключ API, сделайте HTTP-запрос к API DarkSky. Обновите приведенный ниже URL-адрес, чтобы заменить DARKSKY_API_KEY вашим ключом API. Если все работает, вы должны увидеть последний прогноз погоды для Нью-Йорка.

Получить код

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

Настоятельно рекомендуется: используйте Glitch для импорта репо

Использование Glitch — рекомендуемый метод для работы с этим кодовым ярлыком.

  1. Откройте новую вкладку браузера и перейдите к https://glitch.com .
  2. Если у вас нет учетной записи, вам необходимо зарегистрироваться.
  3. Нажмите New Project, затем Clone из Git Repo .
  4. Клонируйте https://github.com/googlecodelabs/your-first-pwapp.git и нажмите OK
  5. После загрузки .env отредактируйте файл .env и обновите его с помощью ключа API DarkSky.
  6. Нажмите кнопку Show Live, чтобы увидеть PWA в действии.

Альтернатива: скачать код и работать локально

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

  1. Распакуйте загруженный zip-файл.
  2. Запустите npm install чтобы установить зависимости, необходимые для запуска сервера.
  3. Отредактируйте server.js и установите ваш ключ API DarkSky.
  4. Запустите node server.js чтобы запустить сервер на порту 8000.
  5. Откройте вкладку браузера для http://localhost:8000

Установить базовый уровень

Какая наша отправная точка?

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

Некоторые вещи, чтобы попробовать .

  1. Добавьте новый город с синей кнопкой «плюс» в правом нижнем углу.
  2. Обновите данные с помощью кнопки обновления в правом верхнем углу.
  3. Удалите город, используя крестик в правом верхнем углу каждой карты города.
  4. Посмотрите, как это работает на настольных и мобильных устройствах.
  5. Посмотрите, что происходит, когда вы выходите из сети.
  6. С помощью панели «Сеть» Chrome узнайте, что происходит, когда сеть переключается в режим медленной 3G.
  7. Добавьте задержку на сервер прогноза, изменив FORECAST_DELAY в server.js

Аудит с Маяком

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


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

  1. Откройте ваш проект в новой вкладке. 2. Откройте Chrome DevTools и перейдите на вкладку Audits, DevTools отобразит список категорий аудита, оставив их включенными. 3. Нажмите Run Audits, через 60-90 секунд Lighthouse предоставит вам отчет на странице.

прогрессивного веб-приложения

Мы собираемся сосредоточиться на результатах аудита Progressive Web App.

И есть много красного, чтобы сосредоточиться на:

  • ❗FAILED: Текущая страница не отвечает 200 в автономном режиме.
  • ❗FAILED: start_url не отвечает 200 в автономном режиме.
  • ❗FAILED: Не регистрирует работника службы, который контролирует страницу и start_url.
  • ❗FAILED: Манифест веб-приложения не соответствует требованиям к установке.
  • ❗FAILED: Не настроен для настраиваемой заставки.
  • ❗FAILED: Не устанавливает цвет темы адресной строки.

Давайте перейдем к решению некоторых из этих проблем!

Добавить манифест веб-приложения

К концу этого раздела наше приложение погоды пройдет следующие аудиты:

  • Манифест веб-приложения не соответствует требованиям к установке.
  • Не настроен для собственного заставки.
  • Не устанавливает цвет темы адресной строки.

Создание манифеста веб-приложения

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

Используя манифест веб-приложения, ваше веб-приложение может:

  • Сообщите браузеру, что вы хотите, чтобы ваше приложение открывалось в отдельном окне ( display ).
  • Определите, какая страница открывается при первом запуске приложения ( start_url ).
  • Определите, как приложение должно выглядеть на short_name приложений или в short_name запуска ( short_name , icons )
  • Создать заставку ( name , icons , colors ).
  • Скажите браузеру, чтобы открыть окно в альбомном или портретном режиме ( orientation ).
  • И plenty more .

Создайте файл с именем public/manifest.json в своем проекте и скопируйте / вставьте следующее содержимое:

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

Добавить ссылку на манифест веб-приложения

Далее нам нужно сообщить браузеру о нашем манифесте, добавив
на каждую страницу нашего приложения. Добавьте следующую строку в элемент в вашем index.html файле.

public/index.html

DevTools Detour

DevTools предоставляет быстрый и простой способ проверить ваш файл manifest.json . Откройте панель Manifest на панели Application. Если вы правильно добавили информацию о манифесте, вы сможете увидеть ее проанализированной и отображенной в удобном для человека формате на этой панели.

Добавить метатеги и иконки iOS

Safari на iOS не поддерживает манифест веб-приложения ( yet ), поэтому вам нужно добавить traditional meta tags в вашего файла index.html :

public/index.html

Бонус: Easy Lighthouse исправления

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

Установите мета-описание

В ходе SEO-аудита компания Lighthouse отметила, что наши Document does not have a meta description. « Document does not have a meta description. » могут отображаться в результатах поиска Google. Высококачественные уникальные описания могут сделать ваши результаты более релевантными для пользователей поиска и увеличить поисковый трафик.

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

public/index.html

Установить цвет темы адресной строки

В ходе аудита PWA компания Lighthouse отметила наше приложение « Does not set an address-bar theme color ». Тематическое отображение адресной строки браузера в соответствии с цветами вашего бренда обеспечивает более полное погружение пользователя.

Для того, чтобы установить цвет темы на мобильный, добавьте следующий meta тег в части документа:

public/index.html

Проверьте изменения с Lighthouse

Снова запустите Lighthouse (нажав на значок + в левом верхнем углу панели Audits) и проверьте внесенные изменения.

SEO Аудит

  • ✅ PASSED: В документе есть мета-описание.

Прогрессивный аудит веб-приложений

  • ❗FAILED: Текущая страница не отвечает 200 в автономном режиме.
  • ❗FAILED: start_url не отвечает 200 в автономном режиме.
  • ❗FAILED: Не регистрирует работника службы, который контролирует страницу и start_url.
  • ✅ PASSED: Манифест веб-приложения соответствует требованиям к установке.
  • ✅ PASSED: Настроен для собственного заставки.
  • ✅ PASSED: Устанавливает цвет темы адресной строки.

Обеспечить базовый опыт работы в автономном режиме

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

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

  • Текущая страница не отвечает 200 в автономном режиме.
  • start_url не отвечает 200 в автономном режиме.
  • Не регистрирует сервисного работника, который контролирует страницу и start_url.

В следующем разделе мы заменим нашу пользовательскую страницу в автономном режиме на полноценную работу в автономном режиме. Это улучшит работу в автономном режиме, но, что более важно, значительно улучшит нашу производительность, потому что большинство наших ресурсов (HTML, CSS и JavaScript) будут храниться и обслуживаться локально, устраняя сеть как потенциальное узкое место.

Сервисные работники на помощь

Если вы не знакомы с работниками сферы обслуживания, вы можете получить Introduction To Service Workers представление, прочитав Introduction To Service Workers о том, что они могут сделать, как работает их жизненный цикл и многое другое. После того, как вы закончите эту кодовую лабораторию, обязательно ознакомьтесь с Debugging Service Workers code lab для более глубокого изучения работы с сервисными работниками.

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

Зарегистрируй сервисного работника

Первым шагом является регистрация сервисного работника. Добавьте следующий код в файл index.html :

public/index.html

Этот код проверяет, доступен ли API сервисного работника, и если он есть, сервисный работник на /service-worker.js регистрируется, как только страница становится loaded .

Обратите внимание, что обслуживающий работник обслуживается из корневого каталога, а не из каталога /scripts/ . Это самый простой способ установить __ scope __ вашего сервисного работника. scope работника службы определяет, какие файлы контролирует работник службы, другими словами, по какому пути работник службы будет перехватывать запросы. scope умолчанию является местоположением рабочего файла сервиса и распространяется на все каталоги ниже. Таким образом, если service-worker.js находится в корневом каталоге, работник службы будет контролировать запросы со всех веб-страниц в этом домене.

Precache офлайн страница

Во-первых, нам нужно сообщить работнику сервиса, что нужно кэшировать. Мы уже создали простой offline page ( public/offline.html ), который будет отображаться каждый раз, когда нет сетевого подключения

В вашем service-worker.js добавьте ‘/offline.html’, в массив FILES_TO_CACHE , конечный результат должен выглядеть следующим образом:

public/service-worker.js

Затем нам нужно обновить событие install чтобы указать работнику сервиса предварительно кэшировать автономную страницу:

public/service-worker.js

Наше событие install теперь открывает кеш с caches.open() и предоставляет имя кеша. Предоставление имени кэша позволяет нам создавать версии файлов или отделять данные от кэшированных ресурсов, чтобы мы могли легко обновить одно, но не влиять на другое.

Когда кеш открыт, мы можем вызвать cache.addAll() , который берет список URL-адресов, выбирает их с сервера и добавляет ответ в кеш. Обратите внимание, что cache.addAll() будет отклонен, если какой-либо из отдельных запросов потерпит неудачу. Это означает, что вам гарантировано, что, если этап установки пройдет успешно, ваш кеш будет в согласованном состоянии. Но если по какой-то причине произойдет сбой, он автоматически попытается снова при следующем запуске сервисного работника.

DevTools Detour

Давайте посмотрим, как вы можете использовать DevTools для понимания и отладки сервисных работников. Перед перезагрузкой страницы откройте DevTools, перейдите на панель Service Workers на панели Application Это должно выглядеть так:

Когда вы видите пустую страницу, подобную этой, это означает, что на текущей открытой странице нет зарегистрированных сервисных работников.

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

Когда вы видите такую информацию, это означает, что на странице запущен сервисный работник.

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

Очистить старые офлайн-страницы


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

Добавьте следующий код в событие activate :

public/service-worker.js

DevTools Detour

Открыв панель «Service Workers», обновите страницу, вы увидите, что установлен новый «Service Worker», и увеличится номер статуса.

Обновленный сервисный работник немедленно получает управление, потому что наше событие install заканчивается с self.skipWaiting() , а событие activate заканчивается с self.clients.claim() . Без них старый сервисный работник продолжал бы контролировать страницу, пока есть открытая вкладка.

Обработка неудачных сетевых запросов

И, наконец, нам нужно обработать события fetch . Мы собираемся использовать network, falling back to cache strategy . Сервисный работник сначала попытается извлечь ресурс из сети, если это не удастся, он вернет автономную страницу из кэша.

public/service-worker.js

Обработчик fetch должен обрабатывать только fetch по страницам, поэтому другие запросы могут быть выгружены из обработчика и обычно обрабатываются браузером. Но, если запрос .mode — это navigate , используйте fetch чтобы попытаться получить элемент из сети. Если это не удается, обработчик catch открывает кеш с caches.open(CACHE_NAME) и использует cache.match(‘offline.html’) для получения предварительно кэшированной автономной страницы. Затем результат передается обратно в браузер с помощью evt.respondWith() .

Key Point: fetch вызова fetch в evt.respondWith() предотвращает обработку выборки по умолчанию в браузерах и сообщает браузеру, что мы хотим обработать ответ самостоятельно. Если вы не evt.respondWith() внутри обработчика fetch , вы просто получите поведение сети по умолчанию.

DevTools Detour

Давайте проверим, чтобы убедиться, что все работает так, как мы ожидаем. Открыв панель «Service Workers», обновите страницу, вы увидите, что установлен новый «Service Worker», и увеличится номер статуса.

Мы также можем проверить, что было кэшировано. Перейдите на панель Cache Storage на панели Application DevTools. Щелкните правой кнопкой мыши Cache Storage, выберите Refresh Caches, разверните раздел, и вы увидите название вашего статического кэша, приведенное в левой части. Нажатие на имя кэша показывает все файлы, которые кэшируются.

Теперь давайте проверим автономный режим. Вернитесь к панели Service Workers DevTools и установите флажок Offline. После проверки вы увидите небольшой желтый значок предупреждения рядом с вкладкой панели Network. Это указывает на то, что вы не в сети.

Перезагрузите страницу и . это работает! Мы получаем our офлайн панда, а не офлайн dino Chrome!

Советы по тестированию сервисных работников

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

Используйте DevTools

На панели Service Workers панели Application есть несколько флажков, которые значительно облегчат вашу жизнь.

  • Offline — Если этот флажок установлен, имитирует работу в автономном режиме и предотвращает отправку любых запросов в сеть.
  • Обновить при перезагрузке — Когда установлен флажок, вы получите последнюю версию сервисного работника, установите его и немедленно активируйте
  • Bypass for network — Когда проверенные запросы обходят работника сервиса и отправляются непосредственно в сеть.

Начни с

В некоторых случаях вы можете загружать кэшированные данные или что-то не обновляется, как вы ожидаете. Чтобы очистить все сохраненные данные (localStorage, данные indexedDB, кэшированные файлы) и удалить всех сервисных работников, используйте панель «Очистить хранилище» на вкладке «Приложение». Кроме того, вы также можете работать в окне инкогнито.

  • Как только сервисный работник был незарегистрирован, он может оставаться в списке, пока не будет закрыто содержащее его окно браузера.
  • Если открыто несколько окон для вашего приложения, новый работник сервиса не вступит в силу, пока все окна не будут перезагружены и обновлены до последней версии работника сервиса.
  • Отмена регистрации сервисного работника не очищает кеш!
  • Если сервисный работник существует и новый сервисный работник зарегистрирован, новый сервисный работник не будет управлять, пока страница не будет перезагружена, если вы не take immediate control .

Проверьте изменения с Lighthouse

Запустите Lighthouse снова и проверьте изменения. Не забудьте снять флажок Оффлайн, прежде чем проверять изменения

SEO Аудит

  • ✅ PASSED: B документе есть мета-описание.

Прогрессивный аудит веб-приложений

  • ✅ PASSED: Текущая страница отвечает 200 в автономном режиме
  • ✅ PASSED: start_url отвечает 200 в автономном режиме
  • ✅ PASSED: Регистрирует сервисного работника, который контролирует страницу и start_url.
  • ✅ PASSED: Манифест веб-приложения соответствует требованиям к установке.
  • ✅ PASSED: Настроен для собственного заставки.
  • ✅ PASSED: Устанавливает цвет темы адресной строки.

Обеспечить полный опыт работы в автономном режиме

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

Сервисный рабочий жизненный цикл

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

install событие

Первое событие, которое получает сервисный работник, это install . Он срабатывает, как только рабочий выполняет, и вызывается только один раз для сервисного работника. Если вы измените свой сценарий работника сервиса, браузер считает его другим работником сервиса, и он получит свое собственное событие install .

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

activate событие

Сервисный работник будет получать событие activate каждом запуске. Основная цель события activate — настроить поведение работника службы, очистить все ресурсы, оставшиеся после предыдущих запусков (например, старые кэши), и подготовить работника службы для обработки сетевых запросов (например, событие fetch описанное ниже).

fetch событие

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

Обновление сервисного работника

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

Выбор правильной стратегии кэширования

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

Кэширование статических ресурсов

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

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

Извлечение из локального кэша устраняет любую изменчивость сети. Независимо от того, в какой сети находится пользователь (WiFi, 5G, 3G или даже 2G), ключевые ресурсы, необходимые для работы, доступны практически сразу.

Caution: в этом примере статические ресурсы обслуживаются с использованием стратегии cache-first , в результате чего копия любого кэшированного содержимого возвращается без обращения к сети. Хотя стратегия cache-first проста в реализации, она может вызвать проблемы в будущем.

Кэширование данных приложения

stale-while-revalidate strategy идеально подходит для определенных типов данных и хорошо работает для нашего приложения. Он выводит данные на экран как можно быстрее, а затем обновляет их, как только сеть вернула последние данные. Stale-while-revalidate означает, что нам нужно запустить два асинхронных запроса, один в кэш и один в сеть.

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

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

Обновление логики приложения

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

Обновите функцию getForecastFromCache() , чтобы проверить, caches объект caches в глобальном объекте window , и, если это так, запросить данные из кэша.

public/scripts/app.js

Затем нам нужно изменить updateData() чтобы он updateData() два вызова, один для getForecastFromNetwork() чтобы получить прогноз из сети, и один для getForecastFromCache() чтобы получить последний кэшированный прогноз:

public/scripts/app.js

Наше приложение погоды теперь делает два асинхронных запроса данных, один из кеша и один через fetch . Если в кеше есть данные, они будут возвращены и обработаны очень быстро (десятки миллисекунд). Затем, когда fetch , карта будет обновлена самыми свежими данными непосредственно из API погоды.

Обратите внимание, как запрос кеша и запрос fetch заканчиваются вызовом для обновления карты прогноза. Как приложение узнает, отображает ли оно последние данные? Это обрабатывается в следующем коде из renderForecast() :

public/scripts/app.js

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

Предварительно кешировать ресурсы нашего приложения

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

Илон Маск рекомендует:  substr_count - Возвращает число вхождений подстроки

public/service-worker.js

Не забудьте также обновить CACHE_NAME ; мы также изменим все наши статические ресурсы.

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

Обновите массив FILES_TO_CACHE списком файлов:

public/service-worker.js

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

Обновление обработчика события активации

Для того, чтобы обеспечить наше activate событие не случайно удалить наши данные, в activate случае service-worker.js , заменить if (key !== CACHE_NAME) < с:


public / service-worker.js

Обновление обработчика событий выборки

Нам нужно изменить работника сервиса, чтобы он перехватывал запросы к API погоды и сохранял их ответы в кеше, чтобы мы могли легко получить к ним доступ позже. В стратегии «устаревшего подтверждения» мы ожидаем, что ответ сети будет «источником правды», всегда предоставляя нам самую свежую информацию. Если это невозможно, все в порядке, потому что мы уже получили последние кэшированные данные в нашем приложении.

Обновите fetch событий fetch для обработки запросов к API данных отдельно от других запросов.

public/service-worker.js

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

Нам нужно удалить проверку evt.request.mode !== ‘navigate’ потому что мы хотим, чтобы наш сервисный работник обрабатывал все запросы (включая изображения, скрипты, CSS-файлы и т. Д.), А не только навигацию. Если мы оставим эту регистрацию, только кеш будет обслуживаться из кэша рабочего сервиса, все остальное будет запрашиваться из сети.

Попробуйте это

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

Затем перейдите на панель Cache Storage на панели Application в DevTools. Разверните раздел, и вы увидите название вашего статического кеша и кеша данных, перечисленных слева. Открытие кеша данных должно показывать данные, хранящиеся для каждого города.

Затем откройте DevTools и переключитесь на панель Service Workers и установите флажок Offline, затем попробуйте перезагрузить страницу, а затем перейдите в автономный режим и перезагрузите страницу.

Если вы на быструю сеть и хотите увидеть , как прогноз погоды данные обновляются на медленном соединении, установите FORECAST_DELAY свойство в server.js в 5000 . Все запросы к API прогноза будут задерживаться на 5000 мс.

Проверьте изменения с Lighthouse

Это также хорошая идея, чтобы снова запустить Маяк.

SEO Аудит

  • ✅ PASSED: B документе есть мета-описание.

Прогрессивный аудит веб-приложений

  • ✅ PASSED: Текущая страница отвечает 200 в автономном режиме
  • ✅ PASSED: start_url отвечает 200 в автономном режиме
  • ✅ PASSED: Регистрирует сервисного работника, который контролирует страницу и start_url.
  • ✅ PASSED: Манифест веб-приложения соответствует требованиям к установке.
  • ✅ PASSED: Настроен для собственного заставки.
  • ✅ PASSED: Устанавливает цвет темы адресной строки.

Добавить опыт установки

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

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

Аудит с Маяком

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

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

Добавить install.js в index.html

Сначала добавим install.js в наш файл index.html .

public/index.html

Прослушать событие beforeinstallprompt

Если выполнено добавление на главный экран criteria , Chrome beforeinstallprompt событие beforeinstallprompt , которое можно использовать, чтобы указать, что ваше приложение можно «установить», а затем предложит пользователю установить его. Добавьте код ниже, чтобы прослушать событие beforeinstallprompt :

public/scripts/install.js

Сохранить событие и показать кнопку установки

В нашей функции saveBeforeInstallPromptEvent мы сохраним ссылку на событие beforeinstallprompt чтобы мы могли позже вызвать prompt() , и обновим наш пользовательский интерфейс, чтобы отобразить кнопку установки.

public/scripts/install.js

Показать подсказку / скрыть кнопку

Когда пользователь нажимает кнопку установки, нам нужно вызвать .prompt() для сохраненного события beforeinstallprompt . Нам также нужно скрыть кнопку установки, поскольку .prompt() можно .prompt() только один раз для каждого сохраненного события.

public/scripts/install.js

Вызов .prompt() покажет пользователю модальное диалоговое окно с просьбой добавить ваше приложение на домашний экран.

Зарегистрировать результаты

Вы можете проверить , чтобы увидеть , как пользователь ответил на диалог установки путем прослушивания обещания возвращенного userChoice свойство сохраненного beforeinstallprompt событий. Обещание возвращает объект со свойством outcome после того, как приглашение было показано, и пользователь ответил на него.

public/scripts/install.js

Один комментарий о userChoice , spec defines it as a property , а не функция, как вы могли ожидать.

Журнал всех событий установки

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

public/scripts/install.js

Затем нам нужно обновить функцию logAppInstalled , для этой кодовой метки мы просто будем использовать console.log , но в производственном приложении вы, вероятно, захотите зарегистрировать это как событие в своем аналитическом программном обеспечении.

public/scripts/install.js

Обновить сервисный работник

Не забудьте обновить CACHE_NAME в файле service-worker.js так как вы внесли изменения в файлы, которые уже кэшированы. Включение флажка Bypass for network на панели Service Workers панели Application в DevTools будет работать в процессе разработки, но не поможет в реальном мире.

Попробуйте это

Давайте посмотрим, как прошел наш шаг установки. Чтобы быть в безопасности, используйте кнопку Clear site data на панели приложений DevTools, чтобы убрать все и убедиться, что мы начинаем все заново. Если вы ранее установили приложение, обязательно удалите его, иначе значок установки больше не появится.

Убедитесь, что кнопка установки видна

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

  1. Откройте URL-адрес в новой вкладке Chrome.
  2. Откройте трехточечное меню Chrome (рядом с адресной строкой). ▢ Убедитесь, что вы видите «Install Weather . » в меню.
  3. Обновите данные о погоде, используя кнопку обновления в верхнем правом углу, чтобы убедиться, что мы встречаем user engagement heuristics . Ify Убедитесь, что значок установки отображается в заголовке приложения.

Убедитесь, что кнопка установки работает

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

  1. Откройте Chrome и в новой вкладке браузера перейдите к своему Weather PWA.
  2. Откройте DevTools и переключитесь на панель консоли.
  3. Нажмите кнопку установки в правом верхнем углу. Ify Убедитесь, что кнопка установки исчезла. Ify Убедитесь, что отображается диалоговое окно установки.
  4. Нажмите Отмена. ▢ Убедитесь, что «Пользователь отклонил запрос A2HS» отображается в выводе консоли. Ify Убедитесь, что кнопка установки появляется снова.
  5. Снова нажмите кнопку установки, затем нажмите кнопку установки в модальном диалоговом окне. ▢ Убедитесь, что «Пользователь принял приглашение A2HS» отображается в выводе консоли. ▢ Убедитесь, что в выводе консоли отображается «Приложение погоды было установлено». ▢ Убедитесь, что приложение Погода добавлено в место, где вы обычно находите приложения.
  6. Запустите Weather PWA. ▢ Убедитесь, что приложение открывается как отдельное приложение, либо в окне приложения на рабочем столе, либо в полноэкранном режиме на мобильном телефоне.

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

Убедитесь, что установка iOS работает правильно

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

  1. Откройте Safari и в новой вкладке браузера перейдите к Weather PWA.
  2. Нажмите Поделиться! Кнопка 8ac92dd483c689d3.png .
  3. Прокрутите вправо и нажмите кнопку Добавить на главный экран. ▢ Проверьте правильность заголовка, URL-адреса и значка.
  4. Нажмите Добавить. ▢ Убедитесь, что значок приложения добавлен на главный экран.
  5. апустите Weather PWA на главном экране. ▢ Убедитесь, что приложение запускает полный экран.

Bonus: обнаружение, запущено ли ваше приложение с домашнего экрана

Медиа-запрос display-mode позволяет применять стили в зависимости от того, как было запущено приложение, или определять, как оно запускалось с помощью JavaScript.

Вы также можете проверить display-mode медиа — запрос в JavaScript to see if you’re running in standalone .

Bonus: удаление вашего PWA

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

Android

На Android PWA удаляются так же, как и другие установленные приложения.

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

ChromeOS

В ChromeOS PWA легко удаляются из окна поиска программы запуска.

  • Откройте лаунчер.
  • Введите «* Погода *» в поле поиска, ваш Weather PWA должен появиться в результатах
  • Щелкните правой кнопкой мыши (alt-click) на Weather PWA.
  • Нажмите Удалить из Chrome .


macOS и Windows

На Mac и Windows PWA должны быть удалены через Chrome.

  • В новой вкладке браузера откройте chrome: // apps.
  • Щелкните правой кнопкой мыши (alt-click) на Weather PWA.
  • Нажмите Удалить из Chrome .

Поздравляем

Поздравляем, вы успешно создали свое первое Progressive Web App!

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

Теперь вы знаете ключевые шаги, необходимые для превращения любого веб-приложения в Progressive Web App.

Дальнейшее чтение

Справочные документы

Нашли проблему или есть отзывы?

Помогите нам сделать наши лаборатории кода лучше, отправив issue сегодня. И спасибо!

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

НКО | Progressive Web Apps: как создать приложение, когда на это нет средств

Ната­лья Бара­но­ва

Всего материалов: 585

Progressive Web Apps: как создать приложение, когда на это нет средств

Если вы меч­та­е­те о сво­ем мобиль­ном при­ло­же­нии, но пони­ма­е­те, что денег на него нет, при­смот­ри­тесь к про­грес­сив­ным веб-при­ло­же­ни­ям (Progressive Web Apps). Для неком­мер­че­ских орга­ни­за­ций это воз­мож­ность создать при­ло­же­ние без боль­ших финан­со­вых затрат.

О том, что такое Progressive Web Apps, замре­дак­то­ра Теп­ли­цы Ната­лье Бара­но­вой рас­ска­за­ли веб-дизай­нер и раз­ра­бот­чик, спе­ци­а­ли­зи­ру­ю­щий­ся на созда­нии про­ек­тов для неком­мер­че­ских орга­ни­за­ций, Анна Ладо­шки­на и руко­во­ди­тель уни­вер­саль­ной реклам­ной систе­мы Webartex Рус­лан Бай­бе­ков.

Progressive Web Apps (PWA) – про­грес­сив­ные веб-при­ло­же­ния, или гибрид­ный сайт-при­ло­же­ние. По сути это сайт, кото­рый вза­и­мо­дей­ству­ет с поль­зо­ва­те­лем как пол­но­цен­ное при­ло­же­ние. Он при­сы­ла­ет уве­дом­ле­ния и обнов­ля­ет­ся. Ком­па­ния Google анон­си­ро­ва­ла созда­ние этой тех­но­ло­гии в 2015 году, а пре­зен­то­ва­ла ее в 2020‑м.

«В опре­де­лен­ный момент воз­мож­но­сти бра­у­зе­ров в сово­куп­но­сти с push-интер­фей­са­ми теле­фо­нов дали воз­мож­ность уста­нав­ли­вать при­ло­же­ние сра­зу на домаш­ний экран, при этом вы може­те полу­чать уве­дом­ле­ния и, конеч­но же, рабо­тать в авто­ном­ном режи­ме», – объ­яс­нил Рус­лан Бай­бе­ков.

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

Плюсы

1. Нет необ­хо­ди­мо­сти реги­стри­ро­вать при­ло­же­ние в мага­зине при­ло­же­ний и огра­ни­че­ний, свя­зан­ных с пра­ви­ла­ми этих плат­форм (в App Store и Google Play).

2. Поль­зо­ва­те­лям не нуж­но уста­нав­ли­вать при­ло­же­ние. «На эта­пе уста­нов­ки отва­ли­ва­ет­ся до 30% ауди­то­рии, – гово­рит о плю­сах Анна Ладо­шки­на. – Кро­ме того, в прин­ци­пе, попасть в чис­ло уста­нов­лен­ных при­ло­же­ний труд­но. У поль­зо­ва­те­лей на теле­фоне в сред­нем поряд­ка 30 при­ло­же­ний, из кото­рых регу­ляр­но исполь­зу­ют­ся око­ло 10, попасть в это чис­ло неболь­шо­му нише­во­му про­ек­ту прак­ти­че­ски нере­аль­но».

«Мы пере­ста­ем ска­чи­вать при­ло­же­ния. При­чин тому море – кому-то лень, кто-то уже наиг­рал­ся. А вот на ваш сайт поль­зо­ва­те­ли могут пере­хо­дить по ссыл­кам из ВКон­так­те или Facebook, во вре­мя про­смот­ра сай­тов или непо­сред­ствен­но из поис­ко­вой выда­чи. То есть у вас как у вла­дель­ца ресур­са про­па­да­ет необ­хо­ди­мость кон­ку­рен­ции с мил­ли­о­на­ми при­ло­же­ний в сто­рах». Рус­лан Бай­бе­ков

3. Кросс-плат­фор­мен­ность. Не нуж­но раз­ра­ба­ты­вать отдель­ную вер­сию для раз­лич­ных плат­форм.

4. Мож­но исполь­зо­вать суще­ству­ю­щий ресурс (сайт) и суще­ству­ю­щий кон­тент.

«Еще один важ­ный аспект – поль­зо­ва­те­лям ниче­го не нуж­но уста­нав­ли­вать на свой смарт­фон. В стра­нах, где суще­ствен­ны огра­ни­че­ния в досту­пе к Интер­не­ту или где не очень рас­про­стра­не­ны мощ­ные совре­мен­ные смарт­фо­ны, напри­мер в Афри­ке, – это важ­ное пре­иму­ще­ство, поз­во­ля­ю­щее эко­но­мить на тра­фи­ке. В то вре­мя как про­ник­но­ве­ние тра­ди­ци­он­ных при­ло­же­ний на этих тер­ри­то­ри­ях очень огра­ни­че­но». Анна Ладо­шки­на

5. Ско­рость. Уста­нав­ли­ва­ет­ся такое при­ло­же­ние момен­таль­но, по сло­вам Рус­ла­на Бай­бе­ко­ва, так как все его ком­по­нен­ты уже под­гру­же­ны в кэш еще при пер­вом посе­ще­нии ваше­го сай­та.

6. Все функ­ции PWA рабо­та­ют даже в том слу­чае, если посе­ти­тель не уста­но­вил при­ло­же­ние, но сер­фит по ваше­му сай­ту.

Минусы

«Несмот­ря на три года суще­ство­ва­ния, к сожа­ле­нию, не все зна­ют о PWA, и най­ти раз­ра­бот­чи­ка, осо­бен­но в реги­о­нах, будет труд­но», – гово­рит об основ­ной про­бле­ме Рус­лан Бай­бе­ков.

Из огра­ни­че­ний, по сло­вам Анны Ладо­шки­ной, пока не все «натив­ные» функ­ции смарт­фо­нов доступ­ны в виде бра­у­зер­ных API. «Поэто­му не все воз­мож­но­сти, доступ­ные раз­ра­бот­чи­кам при­ло­же­ний, могут быть реа­ли­зо­ва­ны в таком фор­ма­те», – отме­ти­ла спе­ци­а­лист.

Надо ли НКО использовать эту технологию?

Спе­ци­а­ли­сты убеж­де­ны, что для НКО PWA отлич­ный вари­ант. « Тех­но­ло­гия раз­ра­бот­ки сай­тов PWA подой­дет прак­ти­че­ски любо­му сай­ту, – гово­рит Рус­лан Бай­бе­ков. – Но тех­ни­че­ская реа­ли­за­ция может зави­сеть от неко­то­рых фак­то­ров, напри­мер, какую CMS вы исполь­зу­е­те».

Если коман­да бла­го­тво­ри­тель­но­го фон­да или нефор­маль­но­го сооб­ще­ства хочет раз­ра­ба­ты­вать мобиль­ное при­ло­же­ние, то сто­ит рас­смот­реть вари­ант созда­ния имен­но PWA. «Плюс в сни­же­нии сто­и­мо­сти раз­ра­бот­ки и под­держ­ки, а так­же в воз­мож­но­сти пере­ис­поль­зо­вать суще­ству­ю­щий кон­тент. Осо­бен­но если при­ло­же­ние пре­иму­ще­ствен­но кон­тент­ной направ­лен­но­сти и не пред­по­ла­га­ет актив­но задей­ство­вать систем­ные функ­ции смарт­фо­на», – объ­яс­ни­ла Анна Ладо­шки­на.

«Кро­ме того, это может быть хоро­шим реше­ни­ем для про­ек­тов и при­ло­же­ний, направ­лен­ных на сла­бо соци­а­ли­зи­ро­ван­ную ауди­то­рию, – ведь что­бы ска­чать при­ло­же­ние из аппсто­ра, нуж­но иметь учет­ную запись и смарт­фон соот­вет­ству­ю­ще­го каче­ства, а в слу­чае с PWA это не обя­за­тель­но, доста­точ­но полу­чить более менее при­лич­ный доступ в Интер­нет, напри­мер, через какой-то пуб­лич­ный wi-fi». Анна Ладо­шки­на

Примеры

1. Плат­фор­ма по поис­ку изоб­ра­же­ний Pinterest.com исполь­зу­ет PWA. Резуль­та­ты были эффект­ны­ми: уве­ли­чи­лось чис­ло актив­ных поль­зо­ва­те­лей за неде­лю на 103%, уве­ли­чи­лось коли­че­ство новых под­пис­чи­ков на 843%, а вес стра­ни­цы изме­нил­ся с 490 КБ до 190 КБ.

Изоб­ра­же­ние с сай­та www.monterail.com

2. О том, как Tinder исполь­зу­ет PWA и как это повли­я­ло на про­из­во­ди­тель­ность, мож­но про­чи­тать на Medium.

3. Круп­ный сер­вис по поис­ку оте­лей и срав­не­ния цен на них в режи­ме онлайн Trivago исполь­зу­ет PWA. Так­же эту тех­но­ло­гию при­ме­ня­ет и попу­ляр­ный сер­вис поис­ка жилья по все­му миру Airbnb.

4. По сло­вам Анны Ладо­шки­ной, боль­шое пре­иму­ще­ство PWA дает онлайн-мага­зи­нам, так как им в этом слу­чае не надо раз­ра­ба­ты­вать спе­ци­аль­ные при­ло­же­ния. Поэто­му наи­бо­лее актив­но этот под­ход исполь­зу­ет­ся в элек­трон­ной ком­мер­ции. PWA исполь­зу­ет, напри­мер, Aliexpress и дру­гие онлайн-мага­зи­ны .

Прогрессивные веб-приложения — новый тренд 2020?

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

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

В 2015 году компания Google заявила о создании новой технологии — прогрессивных веб-приложениях/Progressive Web App (PWA). Однако тогда мало кто воспринял это новшество всерьез. Тем не менее сегодня PWA становится популярным трендом.

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

Теперь простота установки и открытия мобильного сайта и функционал нативного приложения (push-уведомления, gps-навигация и другие нативные функции) стали единым целым.

Благодаря данной технологии выигрывают и заказчики, и пользователи.

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

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

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

Отсутствие магазинов приложений для разработчиков означает, что им больше не нужно руководствоваться установленными правилами и политикой Apple и Google, а для пользователей — упрощение процедуры установки. Для того чтобы открыть PWA, достаточно перейти на сайт компании с мобильного устройства, и привязанное веб-приложение откроется автоматически.

При этом можно установить иконку такого приложения на экран телефона. Для этого в автоматически открывшемся диалоговом окне нужно согласиться с установкой.

Такой способ установки разительно отличается от установки обычного (нативного) приложения. По сути, иконка PWA — это картинка со ссылкой на веб-приложение, открывающееся через браузер, с помощью которой пользователь может запустить понравившееся приложение в любое время. Еще одним важным отличием PWA от «тяжелого натива» является то, что PWA почти не занимает места в памяти телефона пользователя.

Но преимущества преимуществами, а что же на практике?

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

Так, одной из первых компаний, примеривших на себя PWA, стала Lancôme — известный французский косметический бренд.

По заявлению Google, перед специалистами Lancôme стояла задача создать быстро загружаемый, мощный мобильный инструмент, который функционально подобен нативному приложению, но при этом его можно будет быстро найти и просто использовать. В результате в 2020 году у компании появилось прогрессивное веб-приложение/Progressive Web App (PWA).

И что же в итоге? Результаты говорят сами за себя: на 84% снизилось время загрузки,на 17% увеличилась конверсия,на 53% увеличилось количество мобильных сеансов на iOS,18% push-уведомлений открываются пользователями,8% потребителей, которые открыли push-уведомление, совершали покупку.

Ну что же, пример компании Lancôme стал показательным для всех, кто сомневался.

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

Возможно.Но пока рано говорить о полноценной замене “натива” на PWA. Скорее всего, PWA нужно рассматривать как новую ветвь мобильных технологий, которая будет развиваться независимо от игровых приложений и контролирующих монополий в лице App Store и Play Market. Развитие с учетом потребностей другого толка: продавец — покупатель.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Разработка вашего первого 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 и мы готовы к будущему веб-приложений.

Progressive Web Apps (PWA) — Полное руководство

Progressive Web Apps (PWA) — The Complete Guide

Создайте прогрессивное веб-приложение (PWA), которое будет выглядеть как приложение для iOS и Android, используя DeviceCamera, Push Notifications и многое другое. Прогрессивные веб-приложения (PWA) — еще одна важная вещь в веб-разработке, поскольку они позволяют мобильным пользователям не устанавливать приложение из магазина appstore или playmarket.
ы по-прежнему создаете веб-приложение (HTML, CSS, JavaScript), но этот курс научит вас добавлять такие функции, как доступ к камерам, service worker для автономной поддержки (не в сети), push-уведомления и многое другое. Все єто сочетает в себе лучшее из обоих миров: вы обеспечиваете быстрый, привлекательный и надежный опыт, сохраняя при этом доступность и доступность веб-страницы.

Илон Маск рекомендует:  Русский перевод файла "httpd conf"

Что такое 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.

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.

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 чтобы не пропустить самое интересное!

НКО | Progressive Web Apps: как создать приложение, когда на это нет средств

Ната­лья Бара­но­ва

Всего материалов: 585

Progressive Web Apps: как создать приложение, когда на это нет средств

Если вы меч­та­е­те о сво­ем мобиль­ном при­ло­же­нии, но пони­ма­е­те, что денег на него нет, при­смот­ри­тесь к про­грес­сив­ным веб-при­ло­же­ни­ям (Progressive Web Apps). Для неком­мер­че­ских орга­ни­за­ций это воз­мож­ность создать при­ло­же­ние без боль­ших финан­со­вых затрат.

О том, что такое Progressive Web Apps, замре­дак­то­ра Теп­ли­цы Ната­лье Бара­но­вой рас­ска­за­ли веб-дизай­нер и раз­ра­бот­чик, спе­ци­а­ли­зи­ру­ю­щий­ся на созда­нии про­ек­тов для неком­мер­че­ских орга­ни­за­ций, Анна Ладо­шки­на и руко­во­ди­тель уни­вер­саль­ной реклам­ной систе­мы Webartex Рус­лан Бай­бе­ков.

Progressive Web Apps (PWA) – про­грес­сив­ные веб-при­ло­же­ния, или гибрид­ный сайт-при­ло­же­ние. По сути это сайт, кото­рый вза­и­мо­дей­ству­ет с поль­зо­ва­те­лем как пол­но­цен­ное при­ло­же­ние. Он при­сы­ла­ет уве­дом­ле­ния и обнов­ля­ет­ся. Ком­па­ния Google анон­си­ро­ва­ла созда­ние этой тех­но­ло­гии в 2015 году, а пре­зен­то­ва­ла ее в 2020‑м.

«В опре­де­лен­ный момент воз­мож­но­сти бра­у­зе­ров в сово­куп­но­сти с push-интер­фей­са­ми теле­фо­нов дали воз­мож­ность уста­нав­ли­вать при­ло­же­ние сра­зу на домаш­ний экран, при этом вы може­те полу­чать уве­дом­ле­ния и, конеч­но же, рабо­тать в авто­ном­ном режи­ме», – объ­яс­нил Рус­лан Бай­бе­ков.

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

Плюсы

1. Нет необ­хо­ди­мо­сти реги­стри­ро­вать при­ло­же­ние в мага­зине при­ло­же­ний и огра­ни­че­ний, свя­зан­ных с пра­ви­ла­ми этих плат­форм (в App Store и Google Play).

2. Поль­зо­ва­те­лям не нуж­но уста­нав­ли­вать при­ло­же­ние. «На эта­пе уста­нов­ки отва­ли­ва­ет­ся до 30% ауди­то­рии, – гово­рит о плю­сах Анна Ладо­шки­на. – Кро­ме того, в прин­ци­пе, попасть в чис­ло уста­нов­лен­ных при­ло­же­ний труд­но. У поль­зо­ва­те­лей на теле­фоне в сред­нем поряд­ка 30 при­ло­же­ний, из кото­рых регу­ляр­но исполь­зу­ют­ся око­ло 10, попасть в это чис­ло неболь­шо­му нише­во­му про­ек­ту прак­ти­че­ски нере­аль­но».

«Мы пере­ста­ем ска­чи­вать при­ло­же­ния. При­чин тому море – кому-то лень, кто-то уже наиг­рал­ся. А вот на ваш сайт поль­зо­ва­те­ли могут пере­хо­дить по ссыл­кам из ВКон­так­те или Facebook, во вре­мя про­смот­ра сай­тов или непо­сред­ствен­но из поис­ко­вой выда­чи. То есть у вас как у вла­дель­ца ресур­са про­па­да­ет необ­хо­ди­мость кон­ку­рен­ции с мил­ли­о­на­ми при­ло­же­ний в сто­рах». Рус­лан Бай­бе­ков

3. Кросс-плат­фор­мен­ность. Не нуж­но раз­ра­ба­ты­вать отдель­ную вер­сию для раз­лич­ных плат­форм.

4. Мож­но исполь­зо­вать суще­ству­ю­щий ресурс (сайт) и суще­ству­ю­щий кон­тент.

«Еще один важ­ный аспект – поль­зо­ва­те­лям ниче­го не нуж­но уста­нав­ли­вать на свой смарт­фон. В стра­нах, где суще­ствен­ны огра­ни­че­ния в досту­пе к Интер­не­ту или где не очень рас­про­стра­не­ны мощ­ные совре­мен­ные смарт­фо­ны, напри­мер в Афри­ке, – это важ­ное пре­иму­ще­ство, поз­во­ля­ю­щее эко­но­мить на тра­фи­ке. В то вре­мя как про­ник­но­ве­ние тра­ди­ци­он­ных при­ло­же­ний на этих тер­ри­то­ри­ях очень огра­ни­че­но». Анна Ладо­шки­на

5. Ско­рость. Уста­нав­ли­ва­ет­ся такое при­ло­же­ние момен­таль­но, по сло­вам Рус­ла­на Бай­бе­ко­ва, так как все его ком­по­нен­ты уже под­гру­же­ны в кэш еще при пер­вом посе­ще­нии ваше­го сай­та.

6. Все функ­ции PWA рабо­та­ют даже в том слу­чае, если посе­ти­тель не уста­но­вил при­ло­же­ние, но сер­фит по ваше­му сай­ту.

Минусы

«Несмот­ря на три года суще­ство­ва­ния, к сожа­ле­нию, не все зна­ют о PWA, и най­ти раз­ра­бот­чи­ка, осо­бен­но в реги­о­нах, будет труд­но», – гово­рит об основ­ной про­бле­ме Рус­лан Бай­бе­ков.

Из огра­ни­че­ний, по сло­вам Анны Ладо­шки­ной, пока не все «натив­ные» функ­ции смарт­фо­нов доступ­ны в виде бра­у­зер­ных API. «Поэто­му не все воз­мож­но­сти, доступ­ные раз­ра­бот­чи­кам при­ло­же­ний, могут быть реа­ли­зо­ва­ны в таком фор­ма­те», – отме­ти­ла спе­ци­а­лист.

Надо ли НКО использовать эту технологию?

Спе­ци­а­ли­сты убеж­де­ны, что для НКО PWA отлич­ный вари­ант. « Тех­но­ло­гия раз­ра­бот­ки сай­тов PWA подой­дет прак­ти­че­ски любо­му сай­ту, – гово­рит Рус­лан Бай­бе­ков. – Но тех­ни­че­ская реа­ли­за­ция может зави­сеть от неко­то­рых фак­то­ров, напри­мер, какую CMS вы исполь­зу­е­те».

Если коман­да бла­го­тво­ри­тель­но­го фон­да или нефор­маль­но­го сооб­ще­ства хочет раз­ра­ба­ты­вать мобиль­ное при­ло­же­ние, то сто­ит рас­смот­реть вари­ант созда­ния имен­но PWA. «Плюс в сни­же­нии сто­и­мо­сти раз­ра­бот­ки и под­держ­ки, а так­же в воз­мож­но­сти пере­ис­поль­зо­вать суще­ству­ю­щий кон­тент. Осо­бен­но если при­ло­же­ние пре­иму­ще­ствен­но кон­тент­ной направ­лен­но­сти и не пред­по­ла­га­ет актив­но задей­ство­вать систем­ные функ­ции смарт­фо­на», – объ­яс­ни­ла Анна Ладо­шки­на.

«Кро­ме того, это может быть хоро­шим реше­ни­ем для про­ек­тов и при­ло­же­ний, направ­лен­ных на сла­бо соци­а­ли­зи­ро­ван­ную ауди­то­рию, – ведь что­бы ска­чать при­ло­же­ние из аппсто­ра, нуж­но иметь учет­ную запись и смарт­фон соот­вет­ству­ю­ще­го каче­ства, а в слу­чае с PWA это не обя­за­тель­но, доста­точ­но полу­чить более менее при­лич­ный доступ в Интер­нет, напри­мер, через какой-то пуб­лич­ный wi-fi». Анна Ладо­шки­на

Примеры

1. Плат­фор­ма по поис­ку изоб­ра­же­ний Pinterest.com исполь­зу­ет PWA. Резуль­та­ты были эффект­ны­ми: уве­ли­чи­лось чис­ло актив­ных поль­зо­ва­те­лей за неде­лю на 103%, уве­ли­чи­лось коли­че­ство новых под­пис­чи­ков на 843%, а вес стра­ни­цы изме­нил­ся с 490 КБ до 190 КБ.

Изоб­ра­же­ние с сай­та www.monterail.com

2. О том, как Tinder исполь­зу­ет PWA и как это повли­я­ло на про­из­во­ди­тель­ность, мож­но про­чи­тать на Medium.

3. Круп­ный сер­вис по поис­ку оте­лей и срав­не­ния цен на них в режи­ме онлайн Trivago исполь­зу­ет PWA. Так­же эту тех­но­ло­гию при­ме­ня­ет и попу­ляр­ный сер­вис поис­ка жилья по все­му миру Airbnb.

4. По сло­вам Анны Ладо­шки­ной, боль­шое пре­иму­ще­ство PWA дает онлайн-мага­зи­нам, так как им в этом слу­чае не надо раз­ра­ба­ты­вать спе­ци­аль­ные при­ло­же­ния. Поэто­му наи­бо­лее актив­но этот под­ход исполь­зу­ет­ся в элек­трон­ной ком­мер­ции. PWA исполь­зу­ет, напри­мер, Aliexpress и дру­гие онлайн-мага­зи­ны .

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL