Если вы являетесь техническим руководителем или аналитиком цифрового маркетинга, заинтересованным в предоставлении современного веб-интерфейса своему веб-приложению Adobe Experience Manager (AEM) и ищете варианты для этого, то вы попали на нужную статью. Здесь будет рассказано, что такое прогрессивные веб-приложения (PWA) и что вам нужно для создания PWA в AEM с использованием библиотеки WorkBox посредством настройки без написания кода.
Почему ПВА?
Прогрессивные веб-приложения используют возможности современной сети. Они устанавливаются на ваше устройство, быстро загружаются, а последующие посещения загружаются мгновенно. Они быстро реагируют на вводимые данные. Они хорошо работают при ненадежном соединении или в автономном режиме. PWA используют современные API-интерфейсы, чтобы обеспечить удобство работы с приложениями с дополнительным полноэкранным пользовательским интерфейсом, фоновым обновлением и автономным доступом к данным.
Чтобы превратить веб-приложение в прогрессивное веб-приложение, необходимо добавить два артефакта:
- Манифест веб-приложения : файл конфигурации JSON, который определяет URL-адрес точки входа приложения, значок, используемый для представления PWA, и другую конфигурацию, описывающую, как приложение выглядит и ведет себя.
- Сервисный работник : сценарий, который предоставляет фоновые службы, которые обогащают ваш PWA, определяя ресурсы, которые использует ваш PWA, и стратегии доступа к ним.
Что такое сервисный работник?
По своей сути сервис-воркер — это просто сценарий, который ваш браузер запускает независимо при взаимодействии с вашим веб-приложением. Активный сервис-воркер предоставляет такие услуги, как интеллектуальное кэширование с использованием API Cache , обновление данных с помощью API фоновой синхронизации и интеграцию с push-уведомлениями. Сервис-воркер с правильной стратегией кэширования обеспечивает стабильное и надежное взаимодействие с пользователем в различных сценариях, мгновенно возвращая предварительно кэшированные ресурсы, сохраняя данные в кэше и обновляя ресурсы при подключении к Интернету.
Сервис-работников может быть сложно написать с нуля. Workbox был создан, чтобы упростить эту задачу. Workbox — это набор библиотек, которые помогут вам писать сервис-воркеры и управлять ими, а также кэшировать с помощью Cache Storage API . Сервис-воркеры и API хранилища кэша при совместном использовании контролируют, как ресурсы (HTML, CSS, JS, изображения и т. д.) запрашиваются из сети или кеша, даже позволяя вам возвращать кэшированный контент в автономном режиме. С помощью Workbox вы можете быстро настроить и управлять и тем, и другим, используя готовый к использованию код.
Обновление сайта AEM до PWA
Adobe Experience Manager (AEM) — это комплексное решение для управления контентом для создания веб-сайтов, мобильных приложений, форм и цифровых вывесок. Это упрощает управление вашим маркетинговым контентом и активами.
Хотя AEM предоставляет богатую библиотеку для создания веб-приложений, до сих пор было сложно создать PWA, добавив сервис-воркера и манифест.
Сайты Adobe Experience Manager — это инструмент создания пользовательского интерфейса, входящий в состав Adobe Experience Manager. При использовании с Adobe Experience Manager в качестве облачной службы AEM Sites позволяет легко преобразовать любой существующий веб-сайт AEM или одностраничное приложение в устанавливаемое автономное прогрессивное веб-приложение с поддержкой простой настройки и без написания кода. Он использует Workbox для предоставления лучших практик для прогрессивных веб-приложений и абстрагирует сложности написания шаблонных манифестов и сервисных работников.
AEM поддерживает локализацию контента, что означает, что вы можете использовать разный брендинг и даже разный офлайн-контент для разных регионов. Для этого создайте разные конфигурации PWA для каждого мастера языка.
Начало работы с настройкой PWA в AEM
Войдите в Adobe Experience Manager как облачную службу, выберите любую страницу сайтов Adobe Experience Manager или мастер языка и нажмите «Свойства». Вы должны увидеть вкладку под названием Progressive Web App. (Примечание: если вы не видите эту вкладку, свяжитесь с Adobe, чтобы включить эту функцию.) Вы можете настроить установку, а также внешний вид ваших прогрессивных веб-приложений всего несколькими щелчками мыши.
Если вы прошли учебные пособия по сайтам AEM, вы, вероятно, уже видели сайт WKND. В этой статье в качестве отправной точки используется демо-версия WKND . Когда вы закончите, вы обновите WKND из веб-приложения до PWA с помощью WorkBox.
Настройка манифеста
Манифест веб-приложения — это файл JSON, содержащий свойства, описывающие внешний вид и поведение PWA. Сайты Adobe Experience Manager предоставляют удобный пользовательский интерфейс для настройки свойств.
Начальный URL-адрес — это точка входа вашего PWA. Когда пользователь нажимает значок PWA на своем телефоне, он получает доступ к URL-адресу запуска. Режим отображения определяет, будет ли приложение работать в оконном или полноэкранном режиме. Вы также можете указать ориентацию экрана приложения. Цвет темы — это цвет окна и панели инструментов, а цвет фона — это цвет заставки при запуске приложения. Значок — это изображение, которое отображается на главном экране устройства или в панели приложений, когда приложение установлено на устройстве. Конфигурация, показанная на изображении, генерирует JSON-манифест, показанный ниже.
{
"name": "WKND Adventures and Travel",
"short_name": "WKND Adventures and Travel",
"start_url": "/content/wknd/us/en.html",
"display": "standalone",
"theme_color": "#FFDC00",
"background_color": "#FF851B",
"orientation": "any",
"icons": [
{
"src": "/content/dam/wknd/pwa-logo.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any maskable"
}
]
}
Начальный URL-адрес может отличаться от целевой страницы по умолчанию для вашего домена. Изменяя параметр start_url , вы можете отправлять своих пользователей непосредственно на страницу взаимодействия с приложением, а не на страницу по умолчанию, которая будет представлена неаутентифицированному или новому пользователю. Это обеспечивает пользователям PWA более плавную работу, более похожую на работу с приложениями.
AEM понимает, что разные регионы могут иметь разный внешний вид. Вы можете настроить разные свойства, цвета и значки для разных локалей или языков, а затем синхронизировать конфигурацию со связанными страницами.
После доступа к PWA в браузере вы можете щелкнуть правой кнопкой мыши и проверить, чтобы открыть DevTools и просмотреть манифест на панели «Приложения».
Настройка сервисного работника
Вы можете настроить содержимое для кэширования и стратегию кэширования.
Если вы использовали сервис-воркеров, возможно, вы знакомы со стратегиями кэширования . Стратегии кэширования определяют, какие ресурсы кэшировать и следует ли искать эти ресурсы сначала в кеше, сначала в сети или в кеше с резервной сетью. Затем вы можете выбрать ресурсы для предварительного кэширования при установке сервис-воркера. Работники службы приложений AEM реализуют стратегию «теплого» кэширования , что означает, что работа пользователя не будет нарушена, даже если вы укажете отсутствующий или поврежденный путь.
В AEM термин «клиентские библиотеки» относится к библиотекам на стороне клиента: комбинации связанных JavaScript, CSS и статических ресурсов, добавленных в ваш проект, которые обслуживаются и используются клиентским веб-браузером. Вы можете легко настроить клиентские библиотеки для использования в автономном режиме, указав эти библиотеки в пользовательском интерфейсе.
Вы также можете включить сторонние ресурсы, такие как шрифты. Эта конфигурация автономного кэша предоставляет сервисному работнику информацию о конфигурации, созданную для вашего приложения, которое внутренне использует рабочую область. Это почти все, что нужно для установки вашего приложения. После установки значок приложения появится на главном экране вашего мобильного устройства, как приложение платформы. Нажав на значок, вы получите доступ к сайту wknd.
Обратите внимание, что вы можете изменить свой контент или эти настройки в любое время. Когда вы публикуете изменения, сервис-воркер будет обновляться на клиенте браузером, и пользователю будет представлено сообщение о том, что доступна более новая версия PWA. Пользователь может щелкнуть сообщение, чтобы перезагрузить приложение и получить последние обновления. Вы можете открыть панель инструментов и приложений разработчика браузера, чтобы просмотреть сведения о сервисном работнике.
Вы можете расширить хранилище кэша, чтобы просмотреть содержимое, кэшированное локально:
Результаты
Пришло время взглянуть на результаты вашего упорного труда. Всего лишь настроив и не кодируя, вы только что усовершенствовали свой сайт AEM и превратили его в прогрессивное веб-приложение.
Инструменты разработчика Chrome предоставляют маяковый аудит, который позволяет вам проверить, насколько ваше веб-приложение и конфигурация соответствуют стандартам Progressive Web App.
Заключение
Прогрессивные веб-приложения обеспечивают работу вашего веб-сайта как приложение, которое использует кроссплатформенную и открытую природу Интернета с меньшими затратами на разработку и обслуживание, обеспечивая при этом контроль над распространением. Это повышает вовлеченность, удержание и, самое главное, повышает коэффициент конверсии. AEM в сочетании с Workbox позволяет легко превратить существующий сайт в PWA с помощью простой настройки и без кодирования.