Responsive Web Filter

In this section we will explain how to use FIT to filter content dynamically. We assume that you have successfully integrated a website with FIT as shown earlier.

Setup

Let’s create a minimal “Hello World” HTML in public/hello.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

The URL map we’ve defined in conf/urlmap.xml maps local documents in the public/ directory to /local/ URIs:

<urlmap>
  <map path="/local/" source="fit://site/public/" />
  <map path="/" source="//example.com/" />
</urlmap>

Thus, you can access the “Hello World” document under http://local14.sevenval-fit.com/local/hello.html

Let’s define another mapping rule to shorten that URL a bit:

<urlmap>
  <map path="/hello.html" source="fit://site/public/hello.html" />
  ...
</urlmap>

“Hello World” is now accessible under http://local14.sevenval-fit.com/hello.html

Adaptation Instructions

Not very impressive so far. Let’s do something useful with FIT. One of the interesting RESS features is dynamic content filtering.

Enable DOM and text filtering in the site configuration (conf/config.xml):

<config>
  <ress>
    <dom-filter/>
    <text-filter/>
  </ress>
</config>

Now, add some dynamic content to public/hello.html:

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>

    <p>Your browser is <ai-value-of select="client/name"/>.</p>
    <p>
      Viewport dimensions:
      <!-- ai-replace="concat(viewport/width,' &times; ',viewport/height)"-->
      THIS CONTENT WILL BE REPLACED
      <!-- ai-end -->
    </p>
  </body>
</html>

Note the ai- filter instructions in the HTML. Reload the site in your browser to see what they do.

Exercise

Read more about adaptation instructions and browse through the Delivery Context Properties and do some magic yourself.

Dynamic URL Map

The URL map may also be filtered with Adaptation Instructions. This allows us to request different resources dependent on the Delivery Context.

The following snippet shows a URL map that makes FIT fetch files from a different subdomain if the client is a mobile phone:

<urlmap>
  <choose>
    <when test="client/hw/type = 'mobile'">
      <!-- Fetch mobile resources if client is a mobile phone -->
      <map path="/" source="//m.example.com/" />
    </when>
    <otherwise>
      <!-- Fetch default resources for requests from 'desktop' or 'tablet'. -->
      <map path="/" source="//www.example.com/" />
    </otherwise>
  </choose>
</urlmap>

For clients with high-resolution displays FIT will fetch high DPI images according to these URL map rules:

<urlmap>
  <choose>
    <when test="viewport/device-pixel-ratio > 1">
      <map path="/images/" source="//example.com/images/hi-res/" />
    </when>
    <otherwise>
      <map path="/images/" source="//example.com/images/lo-res/" />
    </otherwise>
  </choose>
  ...
</urlmap>

Header Enrichment

In the last tutorial we’ve already used the sources configuration to modify the way FIT handles cookies.

Now let’s add some HTTP headers to the backend requests. The headers option in conf/sources.xml can be used to send a Via header in order to mark requests coming from FIT (send-via="true"). Additional HTTP client request headers like User-Agent and Referer will be forwarded to the origin if pass="_auto_" is set:

<sources>
  <source host="example.com">
    <headers send-via="true" pass="_auto_" />
    ...
  </source>
</sources>

Debugging

To get some debug information you can add for example ;d=pagejs-_all_-debug/ to the URL, and watch the JavaScript console of your browser:

http://local14.sevenval-fit.com/hello-world/;d=pagejs-_all_-debug/

More…