Нино Миховилич
Проект, который мы опишем здесь, – это интерактивный интернет-киоск, который используется в качестве расширения для AlttUs Mobile Приложение . Allowus – это мобильное приложение, которое позволяет пользователям выбрать место для выхода на улицу, есть кофе или слушать концерт. Поскольку улица Tkalčićeva Zagreb – это место, где довольно много молодых людей, мы решили, что это правильное место для нашего автономного продвижения Alseus App.
Реализация режима киоска
Одна из первых проблем, которые мы столкнулись, была реализацией режима браузера киоска на нашем устройстве. Это был коробка Android, и мы использовали Chrome в качестве веб-браузера, который запустит приложение. Режим браузера Kiosk – это режим, в котором вы запускаете приложение в полноэкранном режиме и без какого-либо пользовательского интерфейса браузера или, в нашем случае, без какого-либо пользовательского интерфейса Android.
Намерение состоит в том, чтобы предотвратить работу пользователей ничего, кроме содержимого на основе браузера. Поскольку существуют сотни приложений в режиме киоска, мы решили использовать одну из доступных приложений вместо того, чтобы построить один из заземления.
После некоторых исследований мы решили использовать Киоск Браузер Lockdown приложение. У него есть все функции, которые мы искали:
- Блокировка устройства к одному URL
- Укрытие панели инструментов
- Скрытие экрана уведомлений
- Сокрытие пользовательского интерфейса Android
Следующим шагом было тестирование PWA в среде Android и в приложении браузера киоска. Вот когда мы обнаружили, что все не пошло так гладко, как мы планировали!
Первая проблема, которую мы столкнулись, была на стороне интерфейса – последний веб-сайт казался повышенной версией первоначального дизайна, и это было связано с некоторыми ограничениями экрана и другой средой рендеринга. Поскольку срок приближался, у нас не было достаточно времени, чтобы настроить каждый элемент в CSS, чтобы соответствовать первоначальным контурам дизайна, поэтому мы решили сократить весь документ.
Это был разумный подход, учитывая все входы, которые мы имели. Чтобы проверить все еще раз, было большим недостатком, но мы должны были быть уверены, что все будет работать в этом контексте.
Вторая проблема заключалась в том, что внешние сценарии, такие как Google Maps, не загружались в приложение браузера киоска с PWA, поэтому мы сделали небольшой твик. Мы запустили приложение Browser Kiosk, которое удалил пользовательский интерфейс Android, а затем выручил приложение Browser Kiosk и запустила PWA за пределами приложения Browser Kiosk. Таким образом, нам удалось удалить интерфейс Android со всеми внешними сценариями, поскольку они должны были.
Разработка прогрессивного веб-приложения
После прохождения проекта кратко и спецификации первое, что пришло к нашему мнению, было … Мы должны сделать PWA (Progressive Web App). Progressive Web App – это приложение, которое предоставляет аналогичные возможности и функциональности в качестве собственных мобильных приложений:
- Услуги обслуживания позволяют приложениям показывать содержимое почти мгновенно и надежно, потому что они кэшируют каждый запрос
- Существует возможность добавить приложение на домашний экран, как нормальное нативное приложение
- Push-уведомления могут быть реализованы для многоцелевых использования
- Приложение быстро и гладко
- Он использует HTTPS и легко реализовать.
После оценки запросов клиента все функции PWA соответствуют нашим запросам.
Наши запросы были:
- Чтобы построить приложение, которое можно использовать на интерактивном экране
- Приложение должно использовать существующие API, которые мы создали для нашего мобильного приложения AlseUS
- Используемый устройством будет поле Android
- Доступ в Интернет будет ограничен, потому что приложение будет подключено к публичной сети (это изменится позже)
- Приложение должно иметь дополнительный раздел для баннеров и системы управления баннерами
Мы могли бы создать веб-приложение с нашими существующими API без необходимости реализации дополнительных функций, и мы также могли бы построить простую CMS (систему управления контентом) для управления баннерами и Push-уведомлениями для перезагрузки контента. Поскольку доступ в Интернет будет ограничен и нестабилен, мы могли бы использовать функцию PWA для кэширования страниц и обслуживать их, даже когда приложение не содержит в автономном режиме.
Обязательно проверите это Учебное пособие по глубину и объяснение для обслуживающих работников.
Настройка системы управления баннерами
Приложение разделено на два раздела. Верхняя часть – это секция баннера, а нижняя часть является основным сечением, разделенным на вкладки.
У нас есть два типа баннеров – YouTube видео и изображения. Поскольку баннеры могут быть изменены, нам нужно было разработать CMS. Мы разработали простые CMS, в которых клиент может ввести видео YouTube и изображения в ползунок.
Проблема, которую мы столкнулись здесь, была освежала приложение для перезагрузки нового содержимого баннера. Вы видите, потому что приложение использовало Barba.js, он никогда не был освежающим. Чтобы он работал, мы использовали классную особенность наших PWA – push-сообщений. Push-уведомления – это функция, которая использует API уведомлений и кнопку API для отправки сообщений с сервера на клиент.
Как Push-уведомления помогали решить нашу проблему перезагрузки контента? Решение довольно простое и простое. Когда пользователь меняет содержимое баннера в CMS, мы отправляем подтолкнув к PWA, а затем PWA обновляет два раза. PWA необходимо обновить два раза, чтобы удалить кэш и перезагрузить новый контент.
Работа с внешними препятствиями
Интернет-киоски часто помещают в наружные среды, где подключение к Интернету иногда нестабильно и медленно. Когда подключение к Интернету является общедоступным и на довольно многолюдных улице, вы сталкиваетесь с большим количеством проблем при использовании связи в реальном времени и внешних API.
Общий «хаки» подход – продлить время задержки и надеюсь, что все хорошо работает. Несмотря на то, что это не является предпочтительным способом, он может служить резервным копированием, если все остальное не удается.
Google Maps был одним из внешних API, которые дали нам много головных болей. Нам пришлось перезагрузить и добавлять новые булавки, но на медленном соединении это было иногда невозможно.
Балансировка между фиксированным и динамическим содержанием
Оптимизация не только применяется только в царстве расширенных методов кэширования и сети доставки контента. Умельное расположение макета и понимание элементов, которые могут быть «выдвинутыми» из рассмотрения страницы, могут уменьшить количество запросов и ускорить весь поток навигации.
Рекламный контент в киоске был размещен на YouTube – это был видео-слайдер, который повторял все страницы. Ниже этого у нас было основное содержание встроенной навигацией. При выборе различных навигационных элементов поведение браузера по умолчанию было перезагрузить всю страницу, включая эту фиксированную рекламную область. Это производительность кошмара, особенно при использовании внешних сценариев, таких как API YouTube.
Вопрос здесь – как перезагрузить только одну конкретную часть страницы? Ну, не будет перезагрузки браузера и единственное, что можно сделать, это изменение контента на заднем плане, не выходя из страницы.
Из-за реализованной аналитики нам пришлось соответственно обновить URL. Мы сделали это с помощью технологии PJAX (Push State Ajax). Эта технология обеспечивает предварительную выборку контента и обменивания целевых узлов DOM на заднем плане.
Чтобы избежать мигания контента, создайте простой исчезнутый переход, который пожали при изменении контента. Поскольку потребляемая по времени для вручную управлять всеми состояниями подключения контента, мы использовали внешнюю библиотеку под названием Barba.js. Эта библиотека позволяет расширенному управлению переходом и совместимо со всеми анимационными каркасами.
Barba.js имеет внутреннее кеширование состояния, которое можно использовать для кредитного кэширования браузера и оптимизировать время загрузки. Carba Cache – это глобальный объект JavaScript, где каждое значение – это обещание, которое должно быть решено.
Реализация аналитики и виртуальных страниц
Мы хотели измерить взаимодействие пользователей и просмотров страниц. Поскольку мы используем BARBA.JS, это в основном одностраничное приложение без страниц перезагрузки, поэтому трюк для измерения просмотров страниц в этом типе приложения является использование виртуальных страниц. Это хиты страницы, отправленные в Google Analytics, не перезагружая страницу.
Первый шаг – включить Google Tag Manager код, а затем на самом деле отправлять виртуальные страницы к слое данных. Мы можем сделать это со следующим фрагментом:
dataLayer.push({ 'event': 'VirtualPageview', 'virtualPageURL': currentUrl, 'virtualPageTitle': title });Этот фрагмент должен быть вызван на каждой новой странице. В каждом взаимодействии пользователей, который открывает новую «страницу», мы называем этот фрагмент, который отправляет URL страницы и название страницы в Google Analytics. Таким образом, мы можем отслеживать PageViews в приложениях на одном странице, использующих BARBA.JS или любую другую технологию PJAX.
Заключить
При работе в определенной среде, иногда решение «К книги» не является вашим единственным решением. Обычно существует возможность инновации и использовать некоторые общие инструменты и библиотеки в не очень стандартной среде с определенным набором задач.
Первоначально опубликовано www.bornfight.com .
Оригинал: “https://www.freecodecamp.org/news/how-to-implement-a-pwa-and-barba-js-into-internet-kiosks-854d4895fd04/”