Progressive Web App использует современные возможности веб для обеспечения пользователя удобным интерфейсом. Любой веб-сайт может быть PWA, а статья поможет вам это сделать.

Max Böck — фронт-энд разработчик из Австрии написал статью, в которой показал насколько прост процесс превращения обычного сайта в Progressive Web App. Мы перевели ее для вас и всё, что вам остается — скорее приступать к работе.

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

1. Вашему проекту не обязательно быть «приложением», чтобы быть Progressive Web App.

Progressive Web App может быть блогом, рекламным сайтом, магазином или коллекцией кошачьих мемов. По своей сути, Progressive Web App — это всего лишь способ оптимизировать ваш код для лучшей и быстрой доставки пользователю. Вы можете и должны использовать эти возможности независимо от вашего контента.
Замечание: термин «приложение» в Progressive Web App активно обсуждается, поскольку некоторые люди считают, что он передает неверную идею. ИМХО, это просто название и в любом случае в наши дни трудно определить разницу между веб-сайтами и веб-приложениями.

2. Вашему проекту не обязательно быть одностраничником на основе Javascript.

Если вы не используете передовой React-Redux SPA, то это не причина уклоняться от использования этой технологии. Мой личный сайт — это всего лишь куча статического HTML, работающего на Jekyll, и он по-прежнему остается действующим прогрессивным веб-приложением. Если вы запускаете что-то в Интернете, это может пригодиться.

3. Progressive Web App не сделаны специально для Google или Android.

Вся красота заключается в том, что Progressive Web App предлагают лучшее из обоих миров — deep linking и URL-адреса с www, автономный доступ, push-уведомления и многое другое из родных приложений — при этом остаются полностью независимыми от платформы. Никаких play market и app store, никаких отдельных кодов для iOS / Android, только веб.

4. Progressive Web App сразу готовы и безопасны для использования.

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

OK, зачем мне это делать?
Превращение вашего сайта в Progressive Web App обладает серьезными преимуществами:
● Более быстрый, более безопасный UX
● Лучший рейтинг Google
● Удобство использования
● Лучшая производительность
● Автономный доступ

Даже если вы не ожидаете, что ваши пользователи «установят» ваше Progressive Web App (например, поместят ярлык на своем главном экране), все еще многое предстоит сделать для переключения. Все шаги, необходимые для создания Progressive Web App, улучшат ваш сайт и обычно рассматриваются как best practice.

Шаг 1: Манифест.

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

{ "lang": "en", "dir": "ltr", "name": "This is my awesome PWA", "short_name": "myPWA", "icons": [ { "src": "/assets/images/touch/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" } ], "theme_color": "#1a1a1a", "background_color": "#1a1a1a", "start_url": "/", "display": "standalone", "orientation": "natural" }

Обычно он называется «manifest.json» и связан с тегом вашего сайта:

Cовет: вам не нужно писать этот файл самостоятельно. Разные системы имеют разные размеры, но заниматься этим самостоятельно очень утомительно. Вместо этого можно создать одно изображение 500×500 для иконки вашего приложения (возможно, ваш логотип), а затем нужно перейти к Real Favicon Generator . Они предоставляют все нужные размеры, метатеги и генерируют файл манифеста. Это просто потрясающе.

Шаг 2. Перейдите на HTTPS.

Progressive Web App должны работать через безопасное соединение, поэтому протокол HTTPS — это верное решение. HTTPS шифрует данные пользователей, отправляемые на сервер, и защищает соединение от вмешательства злоумышленников. В последнее время Google активно поддерживает сайты с HTTPS и оценивает их выше небезопасных конкурентов.
Чтобы перейти на HTTPS, вам понадобится сертификат SSL от доверенного органа. Способ получения напрямую зависит от ситуации с хостингом, но обычно есть всего два способа сделать это:

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

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

Шаг 3: Service worker.

Здесь творится вся магия. Service worker — это, по сути, часть Javascript, которая выступает посредником между браузером и хостом. Он автоматически устанавливается в поддерживаемых браузерах, может перехватывать запросы, отправленные на ваш сайт, и по-разному на них реагировать.
Вы можете настроить новый SW, просто создав файл Javascript в корневом каталоге вашего проекта. Назовем его sw.js. Содержимое этого файла зависит от того, чего вы хотите достичь — мы займемся этим через секунду.
Чтобы браузер знал, что мы намерены использовать этот файл в качестве Service Worker, нам нужно сначала его зарегистрировать. В главном скрипте вашего сайта включите такую функцию:

function registerServiceWorker() { // регистрирует скрипт sw в поддерживаемых браузерах if ("serviceWorker" in navigator) { navigator.serviceWorker.register("sw.js", { scope: "/" }).then(() => { console.log("Service Worker registered successfully."); }).catch(error => { console.log("Service Worker registration failed:", error); }); } }

Параметр scope определяет, какие запросы может перехватывать SW. Это относительный путь к корню домена. Например, если вы установите его в / articles, то сможете управлять запросами на yourdomain.com/articles/my-post, но не в yourdomain.com/contact.

Offline — это новый черный

Существует много крутых вещей, которые можно сделать с Service Workers. Одна из них — возможность кэшировать контент, хранить его локально и, таким образом, делать его доступным, когда пользователь находится в офлайне. Даже если он находится в сети, это значительно повлияет на время загрузки страницы, так как запросы могут просто обходить сеть, и доступ к ассетам будет мгновенным.
Помимо традиционного кеширования браузера, при установленном service worker вы можете определить список ресурсов для кеширования — так, что пользователю не нужно будет переходить на страницу для кэширования. Вот как это может выглядеть:

// sw.js self.addEventListener("install", e => { e.waitUntil(// после установки service worker // открыть новый кэш caches.open("my-pwa-cache").then(cache => { // добавляем все URL ресурсов, которые хотим закэшировать return cache.addAll([ "/", "/index.html", "/about.html", "/images/doggo.jpg", "/styles/main.min.css", "/scripts/main.min.js", ]); })); });

🔥 Совет. Если вы хотите быстро начать работу в автономном режиме, я настоятельно рекомендую использовать sw-precache. Этот инструмент, был сделан ребятами из Google, он легко интегрируется в процесс сборки Gulp или Grunt для создания service worker файла.

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

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 приложение, но не решат всех проблем. Хорошее приложение нужно тщательно проектировать и разрабатывать самостоятельно.

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

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

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

В 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 - известный французский косметический бренд.

• Перевод

Видели когда-нибудь кнопку «Добавить на главный экран», которая появлялась на экране вашего Android-смартфона, когда вы просматривали какой-нибудь сайт? Если щёлкнуть по этой кнопке, то на телефон, в фоновом режиме, будет установлено некое приложение, значок для запуска которого попадёт на главный экран. Теперь это приложение можно запустить и работать с сайтом почти так же, как и раньше, но только в обычном телефонном интерфейсе.

То, о чём мы говорим, представляет собой мобильное приложение, которое было загружено из веб-приложения. Причём, как можно заметить, для установки такого приложения вам не приходится взаимодействовать с Play Market. В результате, установка таких приложений упрощается настолько, насколько это вообще возможно. Однако это - далеко не самое интересное. Запуская подобные программы, вы получаете возможность работать с теми данными, которые они выводят, даже без подключения к интернету. Они позволяют взаимодействовать с веб-страницами в оффлайне. Ну не замечательно ли это?

Вероятно, вы уже поняли, что мы только что говорили о так называемых прогрессивных веб-приложениях (Progressive Web App, PWA). Такое приложение можно установить прямо из окна браузера, значок для его запуска будет выглядеть как значок обычного мобильного приложения, и оно, как многие мобильные приложения, позволит вам работать с ним без подключения к интернету.

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

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

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

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

• Низкая скорость подключения к интернету. Возможно, там, где вы живёте, с быстрым интернетом всё в порядке, поэтому данная проблема вас не затрагивает. Но 60% населения Земли всё ещё пользуется 2G-интернетом. Даже в США некоторым пользователям доступны лишь скорости, сравнимые со скоростями обычных модемов, использующих простые телефонные линии.
• Медленная загрузка веб-сайта. Если сайт загружается очень медленно, знаете, сколько пользователь ждёт, прежде чем нажать на кнопку закрытия окна? Три секунды! 53% пользователей уходят со слишком медленных сайтов.
• Трудоёмкость установки приложений. Пользователи не стремятся устанавливать обычные мобильные приложения. Средний пользователь устанавливает 0 приложений в месяц.
• Вовлечение пользователей в работу с приложением. Пользователи тратят большую часть времени в обычных мобильных приложениях, но охват пользователей мобильными веб-приложениями примерно в три раза больше. В результате, большинство пользователей не особенно активно вовлечено в работу с приложениями, хотя эти пользователи и тратят 80% времени в трёх мобильных приложениях, которыми они пользуются чаще всего.

Есть множество причин использовать PWA, здесь хотелось бы выделить основные возможности, которые они дают. Если описать эти возможности одним словом, то тут подойдёт аббревиатура FIRE (Fast, Integrated, Reliable, Engaging), то есть, прогрессивное веб-приложение должно быть быстрым, интегрированным в рабочую среду устройства, надёжным, и иметь средства вовлечения пользователей в работу с ним.

1. Если говорить о скорости, то PWA, на всех этапах взаимодействия с ними пользователя, работают быстро. Они быстро устанавливаются, быстро запускаются, быстро работают. Так как PWA позволяют кэшировать данные, повторный запуск таких приложений происходит очень быстро, даже без обращения к сетевым ресурсам.
2. Интегрированность PWA в среду устройства выражается в том, что такие приложения ведут себя как обычные приложения. Значок для их запуска находится на главном экране, они умеют работать с push-уведомлениями, они могут пользоваться теми же функциями устройства, что и обычные приложения. В результате, работая с прогрессивными веб-приложениями, пользователь не чувствует, что покидает привычную среду.
3. Надёжность интегрированных веб-приложений базируется на том факте, что они могут нормально работать и без подключения к сети, за счёт возможностей по кэшированию данных средствами сервис-воркеров.
4. Возможности PWA по вовлечению пользователя в работу с ними основаны на том, что они могут отправлять пользователям уведомления. Это позволяет держать пользователя в курсе интересных ему событий, связанных с приложением, и привлекает его к работе с этим приложением.

Как создать прогрессивное веб-приложение?

▍1. Манифест приложения

{ "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "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-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icons/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }
Перед нами - обычный JSON-файл, который содержит мета-информацию о веб-приложении. Здесь есть данные о значках приложения (один из них пользователь видит на главном экране после установки приложения), о фоновом цвете приложения, о его полном и сокращённом названии, и так далее. Этот манифест можно написать самостоятельно, а можно использовать специальный инструмент , автоматизирующий создание таких файлов.

▍2. Сервис-воркеры

Вот пример файла serviceworker.js .

Self.addEventListener("fetch", event => { // кэширование данных для работы без подключения к сети const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request); }

▍3. Значки

▍4. Безопасность

Итоги

Что такое Progressiwe Web Applications (PWA)?

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

А если немного усложним, то PWA — это группа приложений, которая строится на базовом стеке Web технологий (JS+HTML+CSS) и позволяет упростить взаимодействие с сайтом до уровня нативного мобильного приложения. Главная задача технологии — увеличить конверсию страницы, упростить взаимодействие с ней мобильного пользователя.

Технология PWA является продолжением AMP. Более того, AMP страницы можно «прокачать» до стандартов Progressive Web Applications.

Типичные требования к PWA:

• Адаптивность — корректная работа на любых устройствах
• Автономность — при использовании Service Worker приложение должно работать в автономном режиме
• Удобство — пользователю должно быть удобно взаимодействовать с приложением на своем устройстве
• Безопасность — должна быть защита от перехвата и подмены данных
• Легкость в установке — пользователь должен иметь возможность установить PWA сайт на свое устройство за пару кликов
• Кроссплатформенность — технология разработки не зависит от платформы (android или iOs)

Недостатки PWA

1. Технология новая, поэтому ещё не получила широкого распространения
2. Apple пока не выразила намерений по поддержке технологии

Зачем PWA Бизнесу?

Исследования показывают, что пользователи сейчас очень неохотно ставят полноценные приложения на свои устройства.

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

Пример PWA приложения

• AliExpress использует PWA и увеличил конверсию примерно на 104%.
• Konga оптимизировали свой ресурс, сократив на 92% количество первоначально загружаемых данных.
• The Washington Post после внедрения PWA увеличил посещаемость своих статей на 12%, ускорив загрузку с 8 секунд до 80 миллисекунд