Условно включить разные клиентские библиотеки в зависимости от браузера в AEM?

Question

Можно ли условно включить различные клиентские библиотеки в зависимости от пользовательского агента браузера?

IE
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='a'}"/>

Modern Browsers
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='b'}"/>

Версия AEM: 6,3

Если нет, каковы другие альтернативы для достижения то же самое?

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

Answer 1

Для этого вы должны написать собственные шаблоны clientlibs, как описано здесь: https://github.com/nateyolles/aem-clientlib-async.

И затем в классе WCMUse вы можете проверить пользовательский агент и соответственно включить клиентские библиотеки.

Answer 2

Прежде всего, как вы уже правильно указали, вам нужно решение, которое работает с кешем диспетчера. Так что Sightly - это не вариант.

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

Наличие в вашем хранилище AEM файлов stati c CSS и JS и ссылки на них на стороне клиента на основе JS сниппет сделает свое дело и - в большинстве случаев - вы не купите никаких побочных эффектов при таком подходе.

Answer 3

Вы можете использовать <script module> и <script nomodule> для достижения этой цели. Первый игнорируется старыми браузерами, а второй - современными. Похоже на Vue х Modern Mode. Проверьте: https://cli.vuejs.org/guide/browser-compatibility.html#modern -режим

Скорее всего, вам понадобится какой-нибудь сервер для создания собственного шаблона clientlib.

Answer 4

Вы можете либо:

• Обернуть свои клиентские библиотеки условными комментариями: { ссылка }
• Создать объект использования, который проверяет заголовок User-Agent и предоставляет метод isIE, который можно использовать для условного включения клиентских библиотек с data-sly-test. В качестве альтернативы ваш Use-Object может просто возвращать правильные категории на основе пользовательского агента, чтобы вы могли иметь только один вызов clientlib.