File: //proc/thread-self/root/usr/share/doc/varnish-6.0.3/html/users-guide/devicedetection.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Device detection — Varnish version 6.0.3 documentation</title>
<link rel="stylesheet" href="../_static/classic.css" type="text/css" />
<link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
<script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
<script type="text/javascript" src="../_static/jquery.js"></script>
<script type="text/javascript" src="../_static/underscore.js"></script>
<script type="text/javascript" src="../_static/doctools.js"></script>
<link rel="index" title="Index" href="../genindex.html" />
<link rel="search" title="Search" href="../search.html" />
<link rel="next" title="Reporting and statistics" href="report.html" />
<link rel="prev" title="Adding WebSockets support" href="vcl-example-websockets.html" />
</head><body>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="../genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="report.html" title="Reporting and statistics"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="vcl-example-websockets.html" title="Adding WebSockets support"
accesskey="P">previous</a> |</li>
<li class="nav-item nav-item-0"><a href="../index.html">Varnish version 6.0.3 documentation</a> »</li>
<li class="nav-item nav-item-1"><a href="index.html" >The Varnish Users Guide</a> »</li>
<li class="nav-item nav-item-2"><a href="vcl.html" accesskey="U">VCL - Varnish Configuration Language</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<div class="section" id="device-detection">
<span id="users-guide-devicedetect"></span><h1>Device detection<a class="headerlink" href="#device-detection" title="Permalink to this headline">¶</a></h1>
<p>Device detection is figuring out what kind of content to serve to a
client based on the User-Agent string supplied in a request.</p>
<p>Use cases for this are for example to send size reduced files to mobile
clients with small screens and on high latency networks, or to
provide a streaming video codec that the client understands.</p>
<p>There are a couple of typical strategies to use for this type of scenario:
1) Redirect to another URL.
2) Use a different backend for the special client.
3) Change the backend request so that the backend sends tailored content.</p>
<p>To perhaps make the strategies easier to understand, we, in this context, assume
that the <cite>req.http.X-UA-Device</cite> header is present and unique per client class.</p>
<p>Setting this header can be as simple as:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">sub</span> <span class="n">vcl_recv</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="n">req</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">User</span><span class="o">-</span><span class="n">Agent</span> <span class="o">~</span> <span class="s2">"(?i)iphone"</span> <span class="p">{</span>
<span class="nb">set</span> <span class="n">req</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">X</span><span class="o">-</span><span class="n">UA</span><span class="o">-</span><span class="n">Device</span> <span class="o">=</span> <span class="s2">"mobile-iphone"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p>There are different commercial and free offerings in doing grouping and
identifying clients in further detail. For a basic and community
based regular expression set, see
<a class="reference external" href="https://github.com/varnishcache/varnish-devicedetect/">https://github.com/varnishcache/varnish-devicedetect/</a>.</p>
<div class="section" id="serve-the-different-content-on-the-same-url">
<h2>Serve the different content on the same URL<a class="headerlink" href="#serve-the-different-content-on-the-same-url" title="Permalink to this headline">¶</a></h2>
<p>The tricks involved are:
1. Detect the client (pretty simple, just include <cite>devicedetect.vcl</cite> and call
it).
2. Figure out how to signal the backend the client class. This
includes for example setting a header, changing a header or even changing the
backend request URL.
3. Modify any response from the backend to add missing ‘Vary’ headers, so
Varnish’ internal handling of this kicks in.
4. Modify output sent to the client so any caches outside our control don’t
serve the wrong content.</p>
<p>All this needs to be done while still making sure that we only get one cached object per URL per
device class.</p>
<div class="section" id="example-1-send-http-header-to-backend">
<h3>Example 1: Send HTTP header to backend<a class="headerlink" href="#example-1-send-http-header-to-backend" title="Permalink to this headline">¶</a></h3>
<p>The basic case is that Varnish adds the ‘X-UA-Device’ HTTP header on the backend
requests, and the backend mentions in the response ‘Vary’ header that the content
is dependant on this header.</p>
<p>Everything works out of the box from Varnish’ perspective.</p>
<p>VCL:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>sub vcl_recv {
# call some detection engine that set req.http.X-UA-Device
}
# req.http.X-UA-Device is copied by Varnish into bereq.http.X-UA-Device
# so, this is a bit counterintuitive. The backend creates content based on
# the normalized User-Agent, but we use Vary on X-UA-Device so Varnish will
# use the same cached object for all U-As that map to the same X-UA-Device.
#
# If the backend does not mention in Vary that it has crafted special
# content based on the User-Agent (==X-UA-Device), add it.
# If your backend does set Vary: User-Agent, you may have to remove that here.
sub vcl_backend_response {
if (bereq.http.X-UA-Device) {
if (!beresp.http.Vary) { # no Vary at all
set beresp.http.Vary = "X-UA-Device";
} elseif (beresp.http.Vary !~ "X-UA-Device") { # add to existing Vary
set beresp.http.Vary = beresp.http.Vary + ", X-UA-Device";
}
}
# comment this out if you don't want the client to know your
# classification
set beresp.http.X-UA-Device = bereq.http.X-UA-Device;
}
# to keep any caches in the wild from serving wrong content to client #2
# behind them, we need to transform the Vary on the way out.
sub vcl_deliver {
if ((req.http.X-UA-Device) && (resp.http.Vary)) {
set resp.http.Vary = regsub(resp.http.Vary, "X-UA-Device", "User-Agent");
}
}
</pre></div>
</div>
</div>
<div class="section" id="example-2-normalize-the-user-agent-string">
<h3>Example 2: Normalize the User-Agent string<a class="headerlink" href="#example-2-normalize-the-user-agent-string" title="Permalink to this headline">¶</a></h3>
<p>Another way of signalling the device type is to override or normalize the
‘User-Agent’ header sent to the backend.</p>
<p>For example:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">User</span><span class="o">-</span><span class="n">Agent</span><span class="p">:</span> <span class="n">Mozilla</span><span class="o">/</span><span class="mf">5.0</span> <span class="p">(</span><span class="n">Linux</span><span class="p">;</span> <span class="n">U</span><span class="p">;</span> <span class="n">Android</span> <span class="mf">2.2</span><span class="p">;</span> <span class="n">nb</span><span class="o">-</span><span class="n">no</span><span class="p">;</span> <span class="n">HTC</span> <span class="n">Desire</span> <span class="n">Build</span><span class="o">/</span><span class="n">FRF91</span><span class="p">)</span> <span class="n">AppleWebKit</span><span class="o">/</span><span class="mf">533.1</span> <span class="p">(</span><span class="n">KHTML</span><span class="p">,</span> <span class="n">like</span> <span class="n">Gecko</span><span class="p">)</span> <span class="n">Version</span><span class="o">/</span><span class="mf">4.0</span> <span class="n">Mobile</span> <span class="n">Safari</span><span class="o">/</span><span class="mf">533.1</span>
</pre></div>
</div>
<p>becomes:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">User</span><span class="o">-</span><span class="n">Agent</span><span class="p">:</span> <span class="n">mobile</span><span class="o">-</span><span class="n">android</span>
</pre></div>
</div>
<p>when seen by the backend.</p>
<p>This works if you don’t need the original header for anything on the backend.
A possible use for this is for CGI scripts where only a small set of predefined
headers are (by default) available for the script.</p>
<p>VCL:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>sub vcl_recv {
# call some detection engine that set req.http.X-UA-Device
}
# override the header before it is sent to the backend
sub vcl_miss { if (req.http.X-UA-Device) { set req.http.User-Agent = req.http.X-UA-Device; } }
sub vcl_pass { if (req.http.X-UA-Device) { set req.http.User-Agent = req.http.X-UA-Device; } }
# standard Vary handling code from previous examples.
sub vcl_backend_response {
if (bereq.http.X-UA-Device) {
if (!beresp.http.Vary) { # no Vary at all
set beresp.http.Vary = "X-UA-Device";
} elseif (beresp.http.Vary !~ "X-UA-Device") { # add to existing Vary
set beresp.http.Vary = beresp.http.Vary + ", X-UA-Device";
}
}
set beresp.http.X-UA-Device = bereq.http.X-UA-Device;
}
sub vcl_deliver {
if ((req.http.X-UA-Device) && (resp.http.Vary)) {
set resp.http.Vary = regsub(resp.http.Vary, "X-UA-Device", "User-Agent");
}
}
</pre></div>
</div>
</div>
<div class="section" id="example-3-add-the-device-class-as-a-get-query-parameter">
<h3>Example 3: Add the device class as a GET query parameter<a class="headerlink" href="#example-3-add-the-device-class-as-a-get-query-parameter" title="Permalink to this headline">¶</a></h3>
<p>If everything else fails, you can add the device type as a GET argument.</p>
<blockquote>
<div><a class="reference external" href="http://example.com/article/1234.html">http://example.com/article/1234.html</a> –> <a class="reference external" href="http://example.com/article/1234.html?devicetype=mobile-iphone">http://example.com/article/1234.html?devicetype=mobile-iphone</a></div></blockquote>
<p>The client itself does not see this classification, only the backend request
is changed.</p>
<p>VCL:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>sub vcl_recv {
# call some detection engine that set req.http.X-UA-Device
}
sub append_ua {
if ((req.http.X-UA-Device) && (req.method == "GET")) {
# if there are existing GET arguments;
if (req.url ~ "\?") {
set req.http.X-get-devicetype = "&devicetype=" + req.http.X-UA-Device;
} else {
set req.http.X-get-devicetype = "?devicetype=" + req.http.X-UA-Device;
}
set req.url = req.url + req.http.X-get-devicetype;
unset req.http.X-get-devicetype;
}
}
# do this after vcl_hash, so all Vary-ants can be purged in one go. (avoid ban()ing)
sub vcl_miss { call append_ua; }
sub vcl_pass { call append_ua; }
# Handle redirects, otherwise standard Vary handling code from previous
# examples.
sub vcl_backend_response {
if (bereq.http.X-UA-Device) {
if (!beresp.http.Vary) { # no Vary at all
set beresp.http.Vary = "X-UA-Device";
} elseif (beresp.http.Vary !~ "X-UA-Device") { # add to existing Vary
set beresp.http.Vary = beresp.http.Vary + ", X-UA-Device";
}
# if the backend returns a redirect (think missing trailing slash),
# we will potentially show the extra address to the client. we
# don't want that. if the backend reorders the get parameters, you
# may need to be smarter here. (? and & ordering)
if (beresp.status == 301 || beresp.status == 302 || beresp.status == 303) {
set beresp.http.location = regsub(beresp.http.location, "[?&]devicetype=.*$", "");
}
}
set beresp.http.X-UA-Device = bereq.http.X-UA-Device;
}
sub vcl_deliver {
if ((req.http.X-UA-Device) && (resp.http.Vary)) {
set resp.http.Vary = regsub(resp.http.Vary, "X-UA-Device", "User-Agent");
}
}
</pre></div>
</div>
</div>
</div>
<div class="section" id="different-backend-for-mobile-clients">
<h2>Different backend for mobile clients<a class="headerlink" href="#different-backend-for-mobile-clients" title="Permalink to this headline">¶</a></h2>
<p>If you have a different backend that serves pages for mobile clients, or any
special needs in VCL, you can use the ‘X-UA-Device’ header like this:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">backend</span> <span class="n">mobile</span> <span class="p">{</span>
<span class="o">.</span><span class="n">host</span> <span class="o">=</span> <span class="s2">"10.0.0.1"</span><span class="p">;</span>
<span class="o">.</span><span class="n">port</span> <span class="o">=</span> <span class="s2">"80"</span><span class="p">;</span>
<span class="p">}</span>
<span class="n">sub</span> <span class="n">vcl_recv</span> <span class="p">{</span>
<span class="c1"># call some detection engine</span>
<span class="k">if</span> <span class="p">(</span><span class="n">req</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">X</span><span class="o">-</span><span class="n">UA</span><span class="o">-</span><span class="n">Device</span> <span class="o">~</span> <span class="s2">"^mobile"</span> <span class="o">||</span> <span class="n">req</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">X</span><span class="o">-</span><span class="n">UA</span><span class="o">-</span><span class="n">device</span> <span class="o">~</span> <span class="s2">"^tablet"</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">set</span> <span class="n">req</span><span class="o">.</span><span class="n">backend_hint</span> <span class="o">=</span> <span class="n">mobile</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="n">sub</span> <span class="n">vcl_hash</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="n">req</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">X</span><span class="o">-</span><span class="n">UA</span><span class="o">-</span><span class="n">Device</span><span class="p">)</span> <span class="p">{</span>
<span class="n">hash_data</span><span class="p">(</span><span class="n">req</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">X</span><span class="o">-</span><span class="n">UA</span><span class="o">-</span><span class="n">Device</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="redirecting-mobile-clients">
<h2>Redirecting mobile clients<a class="headerlink" href="#redirecting-mobile-clients" title="Permalink to this headline">¶</a></h2>
<p>If you want to redirect mobile clients you can use the following snippet.</p>
<p>VCL:</p>
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">sub</span> <span class="n">vcl_recv</span> <span class="p">{</span>
<span class="c1"># call some detection engine</span>
<span class="k">if</span> <span class="p">(</span><span class="n">req</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">X</span><span class="o">-</span><span class="n">UA</span><span class="o">-</span><span class="n">Device</span> <span class="o">~</span> <span class="s2">"^mobile"</span> <span class="o">||</span> <span class="n">req</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">X</span><span class="o">-</span><span class="n">UA</span><span class="o">-</span><span class="n">device</span> <span class="o">~</span> <span class="s2">"^tablet"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span><span class="p">(</span><span class="n">synth</span><span class="p">(</span><span class="mi">750</span><span class="p">,</span> <span class="s2">"Moved Temporarily"</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="n">sub</span> <span class="n">vcl_synth</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="n">obj</span><span class="o">.</span><span class="n">status</span> <span class="o">==</span> <span class="mi">750</span><span class="p">)</span> <span class="p">{</span>
<span class="nb">set</span> <span class="n">obj</span><span class="o">.</span><span class="n">http</span><span class="o">.</span><span class="n">Location</span> <span class="o">=</span> <span class="s2">"http://m.example.com"</span> <span class="o">+</span> <span class="n">req</span><span class="o">.</span><span class="n">url</span><span class="p">;</span>
<span class="nb">set</span> <span class="n">obj</span><span class="o">.</span><span class="n">status</span> <span class="o">=</span> <span class="mi">302</span><span class="p">;</span>
<span class="k">return</span><span class="p">(</span><span class="n">deliver</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<h3><a href="../index.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Device detection</a><ul>
<li><a class="reference internal" href="#serve-the-different-content-on-the-same-url">Serve the different content on the same URL</a><ul>
<li><a class="reference internal" href="#example-1-send-http-header-to-backend">Example 1: Send HTTP header to backend</a></li>
<li><a class="reference internal" href="#example-2-normalize-the-user-agent-string">Example 2: Normalize the User-Agent string</a></li>
<li><a class="reference internal" href="#example-3-add-the-device-class-as-a-get-query-parameter">Example 3: Add the device class as a GET query parameter</a></li>
</ul>
</li>
<li><a class="reference internal" href="#different-backend-for-mobile-clients">Different backend for mobile clients</a></li>
<li><a class="reference internal" href="#redirecting-mobile-clients">Redirecting mobile clients</a></li>
</ul>
</li>
</ul>
<h4>Previous topic</h4>
<p class="topless"><a href="vcl-example-websockets.html"
title="previous chapter">Adding WebSockets support</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="report.html"
title="next chapter">Reporting and statistics</a></p>
<div role="note" aria-label="source link">
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="../_sources/users-guide/devicedetection.rst.txt"
rel="nofollow">Show Source</a></li>
</ul>
</div>
<div id="searchbox" style="display: none" role="search">
<h3>Quick search</h3>
<div class="searchformwrapper">
<form class="search" action="../search.html" method="get">
<input type="text" name="q" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="../genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="report.html" title="Reporting and statistics"
>next</a> |</li>
<li class="right" >
<a href="vcl-example-websockets.html" title="Adding WebSockets support"
>previous</a> |</li>
<li class="nav-item nav-item-0"><a href="../index.html">Varnish version 6.0.3 documentation</a> »</li>
<li class="nav-item nav-item-1"><a href="index.html" >The Varnish Users Guide</a> »</li>
<li class="nav-item nav-item-2"><a href="vcl.html" >VCL - Varnish Configuration Language</a> »</li>
</ul>
</div>
<div class="footer" role="contentinfo">
© Copyright 2010-2014, Varnish Software AS.
Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.7.6.
</div>
</body>
</html>