How to set different cache mobile and desktop based on header HTTP for one URL?
You have to add a cache context to the page:

/**
 * Implements hook_preprocess_HOOK() for the page template.
 */
function mymodule_preprocess_page(&amp;$variables) {
  if ( ... ) {  // check if this is the page
    $variables['#cache']['contexts'][] = 'headers:X-Something';
  }
}


This adds probably too many variations, so you might need a custom cache context to only vary by two conditions, mobile or desktop. Extend RequestStackCacheContextBase, so that the request stack is already injected and return either 'dc.mobile' or 'dc.desktop':

  public function getContext() {
    $request = $this-&gt;requestStack-&gt;getCurrentRequest();
    $header = $request-&gt;headers-&gt;get('HTTP_X_AKAMAI_DEVICE_CHARACTERISTICS');
    if (...) {   // check $header for mobile
      return 'dc.mobile';
    }
    else {
      return 'dc.desktop';
    }
  }


This is a tagged service (tag name: cache.context). See the documentation for more information https://www.drupal.org/docs/8/api/cache-api/cache-contexts, especially the warning about the Internal Page Cache in the last chapter concerning anonymous traffic. In most cases it should be a better option anyway to handle this edge side or even better client side in js, not server side.