home

Библиотека ELiS стала прогрессивным веб-приложением. Что это значит и как использовать?

pwa-windows10-example.png

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

При работе с сайтами пользователи встречаются с проблемами:

1) Связь с интернетом может прерываться и надо чтобы при этом открытый сайт со сделанными на нем изменениями еще не отправленными на сервер продолжал работать (например можно было продолжить редактировать документ Google Docs).

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

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

Для решения этих проблем и используется стандарт Progressive Web App (PWA).

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

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

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

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

Ну вот, это и есть PWA.

Теперь как сайт с поддержкой PWA превращается в приложение: обычно пользователю надо самому в браузере в настройках нажать специальную кнопку ("отправить" страницу сайта на домашний экран в iOS, создать приложение в Chrome в Android или Windows из настроек). Т.е. пользователь это делает сам.

Второй вариант связан с тем, что некоторые магазины (Windows Store, Google Play) позволяют создавать приложения из сайтов с поддержкой PWA (но делать это уже должен владелец библиотеки, т.к. в соответствующих магазинах надо купить аккаунт разработчика приложений) и тогда уже обычные пользователи находят приложение и устанавливают его обычным для смартфона способом.

ELiS теперь PWA[править]

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

Как включить PWA в ELiS[править]

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

Далее установите пакет:

# dnf install elis_pwa

Включите его

# cd /var/www/vh/library; su elis
$ drush en elis_pwa
$ exit

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

Опции настройки PWA по адресу admin/config/content/elis_pwa:

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

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

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

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

Изменение настроек произойдет при перезагрузке ServiceWorker.

ELiS PWA soft network request timeout (ms) - для некоторых типов ресурсов кеширование работает так:

  • Делается сетевой запрос на получение ресурса;
  • Если ресурс по сети не получен за указанное количество миллисекунд, делается попытка достать ресурс из кеша;
  • Какой из запросов завершится раньше (получение из кеша или из сети) тот ответ пользователь и увидит.

PWA short_name - короткое имя PWA-приложения, указываемое в манифесте PWA согласно спецификации.

Использование PWA в Android[править]

В Android при использовании Chrome он сам обнаружит возможность создания PWA-приложения и останется только кликнуть по подсказке (или в меню Chrome выбрать соответствующий пункт)

pwa-install-saggestion.png

Chrome запроси подтверждение и получив его создаст ярлык на экране запуска приложений.

pwa-android-install-dialog.png

А вот открыв приложение, по-факту открытие произойдет в особом интерфейсе в полноэкранном режиме, в котором виден будет только сайт ELiS без URL и табов.

pwa-example.png

Использование PWA в Windows 10[править]

Я рассмотрю вариант снова использования Chrome (хотя в Windows 10 можно и в Microsoft Store создать приложение и в Edge).

В Chrome надо кликнуть по меню и там появится пункт "Установка приложения ...".

udoba-pwa-install-app-menu.png

При клике по нему создастся соответствующее приложение для текущего пользователя.

pwa-elis-windows-desktop.png

Запускать его можно как с рабочего стола, так и из меню "Пуск".

udoba-windows10-start-menu.png