Progressive Web Apps в WordPress

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

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


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

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

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

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

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

Что такое Service Worker?

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

Вот хорошее (хотя и старое) описание Service Worker:
https://developer.mozilla.org/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers

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

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

Стандартное изображение
Иван Никитин
Иван Никитин -- основатель и директор компании «Иван Никитин и партнеры» специалист в области интернет-маркетинга и веб-аналитики с более чем 15-летним стажем. Он реализовывал сотню проектов по внедрению систем аналитики. Компания Ивана существует с 2011 года и десять лет занимается веб-аналитикой: от простых задач внедрения аналитических средств на сайт до действительно сложных решений data-driven маркетинга. Интересные факты: ✔️ До основания своей компании Иван двенадцать лет преподавал ряд курсов, связанных с веб-программированием и аналитикой, в ЦКО «Специалист» при МГТУ им. Баумана. ✔️ Около 80% клиентов Ивана, получив решение, возвращаются со следующей задачей. И наша компания за все время существования ни разу не давала рекламу! ✔️ Автор курсов по аналитике, которые по сей день читаются во многих учебных заведениях: РАНХиГС при Президенте РФ в программе MBA Executive, ALMA University, Центр Мастеров, Учебный центр РРС и другие.
Статей: 641

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