Load device specific HTML

[s1101v]

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.

[Mohit_KBansal]

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-devic... 

[s1101v]

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]

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]

[s1101v]

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.

[Mohit_KBansal · Accepted solution]

@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.

[HeenaMadan]

domain would be same, device specific html would be loaded on basis of detected user-agent- mobile/desktop. Use selector base approach to load page.

try this for mobile device types. If user agent matches with mobile device type then page with selector "mobile" would get loaded.

<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>

Similar for desktop

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

Hope this helps!

[s1101v]

Thanks for your reply. 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. I prefer to handle this selector based content loading using sling model or servlet rather than writing apache rewrite rule, is there a way to implement ?