Load device specific HTML | Community
Skip to main content
Level 3
August 9, 2022
Solved

Load device specific HTML

  • August 9, 2022
  • 1 reply
  • 1711 views

Hello Community - We are building a component which has two HTMLs one for desktop and other for mobile devices. Basically we want to render the HTML only based on device type so that only one HTMLs will be loaded for any given device type.

 

This can be achieved using script but we want to handle in server side only and the page should be cacheable. Please let me know your suggestion.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Mohit_KBansal

Basically I wanted to implement/load the selector specific HTML only for the specific component authored on the page and not for the page/page component. Instead of writing apache rewrite rule, is there a way to implement using servlet or sling model for this selctor approach.


@s1101v As you know, for every unique URL, there can be only a single response which will be further cached by Dispatcher. So to get a device-specific response from the publisher, you need to generate different URLs, one for each device. Selector based approach is the best solution in this case.

Now, you do not need to implement a selector in all components. Just implement in the page component, and if you do not need page level changes, call your page.html from mobile.html under the page component. This will enable your selector, and allow you to have selector implementation for your needed components.

 

1 reply

Mohit_KBansal
Adobe Employee
Adobe Employee
August 9, 2022

You need to implement selector-based implementation, one selector for each device type.

Desktop: /content/path/of/your/page.desktop.html
Mobile: /content/path/of/your/page.mobile.html

Now the components you want to have a different response for different devices, implement a selector file for them.

 

The next step will be to handle write the apache rewrite rule to identify the request device type via User-Agent 

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} .html$
    RewriteCond %{HTTP_USER_AGENT} "!(android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos)" [NC]
    RewriteRule ^/(.*)\.html$ /$1.mobile.html [PT,L]
</IfModule>

Make sure to write the pass-through rule only.

 

See this article to identify device type based on user-agent:

https://www.howtoforge.com/apache2-how-to-redirect-users-to-mobile-or-normal-web-site-based-on-device-using-mod_rewrite 

s1101vAuthor
Level 3
August 9, 2022

Thanks for your expedited reply. In our case the domain url remains same for both desktop and mobile. i.e we don't have a  domain called m.website.com. instead of writing the apache rewrite rule, is there a way to determine the user-agent using sling model or some api implementation to determine the user-agent. Please let me know.

Mohit_KBansal
Adobe Employee
Adobe Employee
August 9, 2022

you do not need a mobile domain. For your domain, identify device type using user-agent and Pass Through URI with the correct selector

    RewriteCond %{HTTP_USER_AGENT} "!(android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos)" [NC]