Будущее уже наступило или всё про PWA приложения. Что такое Progressive Web Apps и какие возможности они открывают для вашего бизнеса

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

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

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

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

1. Веб-сайты
2. Мобильные приложения

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

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

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

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

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

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

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

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

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

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

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

PWA на десктопе

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

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

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

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

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

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

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

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

Манифест PWA

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

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

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

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

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

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

Установка PWA на сайт WordPress на практике

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

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

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

Вот появился баннер на установку приложения внизу экрана

Приложение устанавливается…

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

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

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

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

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

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

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

Но это уже совсем другая история…

Понятие Progressive Web Applications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.

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

Философия PWA

Для начала стоит заметить, что нет точного определения PWA приложения. Нельзя четко сказать, вот этот сайт PWA или нет. Это протяженная шкала, на которой могут располагаться и «хоумпейдж» второкурсника Пети, который добавил web app манифест, создающий иконку сайта на домашнем экране мобильника; и внешне ничем не отличимый от обычного новостной сайт, только пользователи которого могут сказать, что он удивительно быстрый и удобный, а всё потому что где-то внутри него бьется горячее сердце работника сферы услуг (service worker"a).

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

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

Архитектура PWA

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

Целевые показатели расшифровываются следующим образом:

Надежность (Reliable) - приложение загружается и показывается сразу же, вне зависимости от статуса и качества сетевого соединения.
Быстрота (Fast) - взаимообмен данными по сети происходит быстро, UI плавный и отзывчивый.
Привлекательность (Engaging) - делает для пользователя опыт работы с приложением комфортным и приятным, побуждая его захотеть пережить его снова, и снова, и снова…

С точки зрения Google, именно это отделяет сейчас по внешнему виду и ощущениями (look and feel) веб-сайты от нативных приложений.

Другими словами, разработчику предлагаются инструменты (Service Worker, Push Notifications и др.) и указываются цели (сайт/приложение должен быть быстрым в загрузке, работать на слабом коннекте, не «лагать», работать оффлайн при необходимости). Насколько далеко продвинется по этому пути разработчик зависит только от него.

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

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

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

И в кои-то веки всё это одинаково работает на всех основных браузерах и на всех основных платформах.

Google атакует iOS

Есть мобильные приложения, которым нужно быть нативными (необходима производительность, доступ к системным ресурсам и др.), однако есть приложения, которые в своем функционале вполне реализуемы как PWA. Для них теперь:

Не нужно писать различные версии для Android и iOS (и Windows)
- Не нужно регистрировать в Google Play и App Store и платить за это
- Открыт прямой выход на десктоп

До нынешнего времени рынок мобильных приложений был закрыт для энтузиастов, которые могут написать полезную программу, но не могут/не хотят платить за ее размещение. И не хотят связываться с бюрократией Google и Apple по проверке приложения, после которой монопольные времена Microsoft вспоминаешь с тоской.

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

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

APK vs PWA

Из личного опыта можно вспомнить, как после перевода одного новостного сайта на работу с Service Worker, было решено отказаться от Андроид приложения, сделанного по функционалу сайта. И не столько потому, что его поддержка занимала человеческие ресурсы, а потому, что PWA версия, как ни удивительно, была быстрее, красивее и удобнее в работе, чем java приложение.

Технологии

Кратко рассмотрим основные движители PWA.

Service Worker

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

Из хранилищ у Service Worker"a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. Но, самое главное, полная свобода для реализации бизнес логики.

Можно, например, принять запрос от браузера, проверить состояние сети, взять данные из хранилища, произвести с ними операции и вернуть некий результат обратно в браузер - который будет думать, что ответ ему пришел от сервера. Или не будет - как разработчик захочет, так и сделает. Два браузерных слоя (клиентский фронтэнд и Service Worker) позволяют писать полноценные приложения.

В тоже время, для большинства сайтов будет достаточно кэширующей функциональности Service Worker"a, чтобы превратиться в PWA.

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

С программистской точки зрения Service Worker представляет собой javascript файл, подключаемый в html коде страницы. В нем разработчик определяет логику работы с приходящими из фронтэнда запросами и другую функциональность.

HTTPS

PWA требует, чтобы все ресурсы сайта передавались по HTTPS протоколу. SSL сертификат можно получить бесплатно, некоторые хостеры это делают за вас. Но критично, чтобы на сайте не было ссылок на незащищенные ресурсы - некоторые браузеры просто не будут отображать сайт в этом случае.

Основная встречаемая в таких случаях проблема - картинки. Часто редакторы или комментаторы ставят в материал ссылки на картинки из интернета, иногда они автоматически туда (в материал) попадают. Необходимо картинки пересохранять или к себе, или на сервис с доступом по HTTPS.

Application Shell

App shell - это просто скелет графического интерфейса, шаблон. Для примера, возьмем средний сайт c хидером, двумя колонками и прочим. Грубо говоря, вырежем из него контент текущей страницы и всю динамическую информацию, оставшаяся статика - app shell.

Суть в том, что app shell хранится на клиенте и загружается при запуске приложения, а затем уже в него грузится из сети динамическая информация. И пока она грузится, app shell должен выглядеть красиво («лоадеры» на местах и т.п.)

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

App shell - это как оболочка нативной программы. Смотрите на свое PWA как на нативную программу, и многое станет проще.

Web App manifest

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

Push Notifications

Если посерфить интернет с Chrome DevTools, открытым на вкладке Application, то можно увидеть, как мало сайтов пользуют PWA технологии. А 90% тех, что пользуют, делают это только ради Push Notifications.

Пока что это самая популярная и самая злоупотребляемая технология PWA - за последние несколько месяцев число сайтов, заходя на которые первым делом ищешь «мышкой» кнопку «Блокировать» на предложение получать самые свежие новости, выросло, такое ощущение, многократно, а само желание навязать свой Push похоже на Spam.

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

12.04.2017

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

Если посмотрите на красочные квадраты на главном экране своего смартфона, то теперь они будут называться «нативными» или «родными приложениями». «Нативные» они потому что разработаны для операционной системы вашего смартфона (будь то iOS или Android).

Что же такое Progressive Web Apps

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

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

Сайты, подобные whatwebcando.today , способны анализировать API вашего браузера и показывать, какие из функций, изначально доступные на мобильных устройствах, также поддерживаются браузером. Попробуйте и будете удивлены. Версия Chrome (57) в моем примере поддерживает 27 из 36 функций.

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

Исследование, проведенное в 2015 году marketingland.com, показало удивительную статистику - мобильные пользователи тратят 80% времени на своих устройствах, используя только три приоритетных нативных приложения.

Доля времени, проведенная в приоритетных приложениях, различных пользователей

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

Количество скачиваемых нативных приложений из года в год падает. За последние годы оно упало на 20% и эта цифра продолжает увеличиваться. В 2016 году число скачиваемых приложений стало меньше, чем число удаленных.

Среднее количество нативных приложений, устанавливаемых в месяц

Другим недостатком мобильных приложений является то, что эти приложения нужно искать. Будь то App Store или Google Play, чтобы загрузить приложение из магазина нужно, прежде всего, найти его там (что означает, что нужно точно знать, что ищете, иначе вам придется перепробовать десятки приложений, чтобы найти то, которое вас устроит). Нажать на «Загрузить», согласиться на условия, дождаться загрузки приложения, а далее и его установки… К тому времени, как все закончится, вы можете легко забыть, что вы искали и для чего.

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

Вес приложения - еще один немаловажный фактор. Средний вес нативного приложения составляет около 25 Мб. Некоторые из них откормились. Чем больше появляется различных сервисов, тем больше приложений теснятся в наших смартфонах и не всегда для всех них достаточно места.

Средний вес Progressive Web Apps - всего 2Мб.

Какая выгода от Progressive Web Apps

• Веб-разработчики, что не побоялись первыми взяться за новые технологии, утверждают, что PWA просты в разработке, в сравнении с современными сайтами.
• Progressive Web Apps становятся незаменимыми в сфере SEO. Google поднимает PWA значительно выше в поисковой выдаче. Также все прогрессивные веб-приложения работают по протоколу HTTPS, соответственно, Google так же позитивно реагирует на это и награждает сайт более благоприятным ранжированием сайта.
• Кроссплатформенность Progressive Web Apps дает нам возможность делать одно веб-приложение, которое будет работать абсолютно на всех устройствах, где присутствует браузер.
• Возможность продолжать работу с приложением при сбоях в интернет-подключении и увеличенная скорость загрузки с помощью PWA обезопасит вас от утери потенциальных конверсий и от увеличения количества отказов.

Итак , Progressive Web App - это сайт , который:

• может «устанавливаться» на смартфон
• выглядит как нативное приложение
• работает offline
• присылает push-уведомления

При этом его преимущества перед нативными приложениями:

• кроссплатформенность
• индексируется
• маленький вес
• установку предлагает браузер
• установка моментальная
• не нужно обновлять, всегда предоставляют свежий контент и интерфейс
• улучшения в SEO

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

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

Давайте посмотрим, как PWA может функционировать в качестве собственного мобильного приложения.

Кэширование оболочки приложения

Это минимальный набор HTML, CSS и JavaScript, необходимых для отображения главной страницы приложения. Когда вы заходите в Интернет и открываете веб-сайт, вы дожидаетесь загрузки всей главной страницы, и это включает в себя не только динамический контент страницы, но и все изображения, шрифты, таблицы стилей, JavaScript, используемые на странице, — и большинство из них остаются неизменными независимо от того, сколько раз вы открываете сайт. Так почему бы не кэшировать все это?

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

Читайте також: 10 причин, почему ваша аудитория в Instagram не растет, и как это исправить

Кэширование ответов

Это, возможно, самая мощная вещь, на которую способны PWA. Они могут кэшировать не только статические компоненты оболочки приложения, но и целые ответы из GET-запросов.

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

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

Алгоритмы кеширования

Cache with fallback to Network	Network with fallback to Cache	Cache and Network race
«Кэш с резервом для сети» Используйте, если вы создаете автономное первое приложение. Если ответ уже находится в кэше, он будет передан пользователю, и онлайновый запрос никогда не будет выполнен. Если ответ еще не кэширован, приложение попытается загрузить его онлайн и затем поместить в кэш. Этот подход следует использовать для контента, который изменяется очень редко или не изменяется вообще.	«Сеть с откатом к кэшу» Это подход, при котором онлайн-пользователи всегда получают актуальную онлайн-версию, а автономные пользователи получают кэшированную версию. Используйте его для ресурсов, которые часто обновляются.	«Кэш и сетевая гонка» Это когда вы ищете ответ в кеше, одновременно запрашивая онлайн-контент. Сначала вы показываете кешированный ответ пользователя, а затем заменяете его новым контентом сразу после его появления или добавляете новый контент поверх кэшированных страниц, таких как Facebook и Twitter.

Манифест PWA

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

Офлайновая поддержка чрезвычайно важна, но чтобы успешно заменить нативное приложение, PWA должно выглядеть и вести себя как нативное приложение. Это достигается с помощью файла manifest.json, который содержит JSON-форматированные свойства приложения, такие как имя, URL главной страницы, значки для различных разрешений, цвета заставки, ориентация устройства и т.п.

{ "name": "Название приложения" , "short_name": "Краткое имя" , "icons": [{ "src" : "images/icons/icon-128x128.png" , "sizes" : "128x128" , "type": "image/png" }, { "src": "images/icons/icon-144x144.png" , "sizes" : "144x144" , "type": "image/png" }, {…}, { "src": "images/icons/icon-256x256.png" , "sizes": "256x256" , "type": "image/png" }], "stert_url": "/index.html" , "display": standalone" ,//browser? minimal-ui, fullscreen "background_color": "#3E4EB8 "display": "2F3BA2 }

Если вы дважды открываете приложение на мобильном устройстве, по крайней мере, 5 минут между посещениями, вам будет предложено установить его на устройстве, о чем мы уже писали выше (при условии, что манифест на месте, конечно).

Service Worker

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

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

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

PWA могут также использовать функциональные возможности, предоставляемые операционной системой. Например, в Windows 10 приложения могут использовать центр уведомлений операционной системы или учитывать определенные правила и политики операционной системы.

Примечание: Пользователи Linux и Mac OS X должны включить в браузере политику chrome://flags/#enable-desktop-pwas , установив ее в значение Enabled . Google планирует добавить поддержку PWA по умолчанию для этих систем только в Chrome 72.

Установка PWA в Chrome

Компания Google интегрировала поддержку прогрессивных веб-приложений в Chrome 70 , релиз которого состоялся в октябре 2018 года. Для установки таких приложений используется довольно простой подход.

Пользователи Chrome должны посетить страницу PWA, например страницу приложения для заметок ">Notepad , и выбрать в основном меню Установка приложения “Notepad”... для установки.

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

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

Chrome также выводит список установленных прогрессивных веб-приложений и предоставляет пользователям опции для управления. Google приняла решение интегрировать их с приложениями в браузере. Таким образом, что посмотреть полный список установленных приложений, откройте страницу chrome://apps/ .

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

Chrome и PWA

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

Компания могла бы добавить прогрессивные приложения в Интернет-магазин Chrome, но на данный момент о таких планах не сообщалось.

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

Нашли опечатку? Нажмите Ctrl + Enter

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

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

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

Внимание. Современный сайт с технологией Progressive Web Apps очень быстро загружается. Работает при любом интернет соединении, будь то широкополосный 4g или слабый 2g, или вообще без интернета, автономно (offline). Работа сайта оффлайн основана на информации взятой от предвидящих посещений.

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

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

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

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

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

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

Более половины населения земного шара в настоящее время в интернете. Количество интернет — пользователей по всему миру увеличивается более чем на 20 процентов каждый год.

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

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

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

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

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

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

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

Что в коробке

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

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

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

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

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

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

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

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