How to i make working SPF? #698

SPF requests are performed by YouTube's JavaScript client on HTML5-compatible browsers (so IE9+) on click events to all anchor elements with a same-domain origin featuring an spf-link class, as well as in some other special cases. In such cases, the request has a parameter spf=navigate inserted into the URL parameters.

We only account for the following cases:

The SPF response contains the same exact HTML as a regular response in almost all cases (on real YouTube, feed pages leaked the InternalTube debugger for YEARS), but only including the requested fragments. Usually, it's just the page content which updates, so it doesn't really save on anything, but it does look nicer. SPF is also used for loading the initial comments view on the watch page since a rewrite in 2016.

Basically, you need to return JSON (with the Content-Type: application/json response header) with the new element HTML content and attributes mapped to the IDs of the updated elements. Most requests on YouTube are very consistent. Please note that you only want to capture the inner HTML of your nodes, otherwise you'll place a copy of the outer element inside of itself and cause problems on subsequent navigations due to duplicate element IDs and such.

Here's a tip for integrating things into existing code which likely doesn't account for SPF's different markup: use output buffering to capture the desired bits of HTML and store it in a string instead of outputting to the browser:

<div id="content">
    <?php ob_start() ?>
    <some-content></some-content>
    <?php $contentBody = ob_get_clean() ?>
</div>

or with Twig, you can use set blocks to capture content:

<div id="content">
    {% set content_body %}
    <some-content></some-content>
    {% endset %}
</div>

SPF is actually open source and you can learn a lot from their GitHub and homepage:

• https://github.com/youtube/spfjs
• https://youtube.github.io/spfjs/

Here's the single template we use for the majority of SPF requests; all standard pages: https://github.com/Rehike/Rehike/blob/master/template/hitchhiker/core/core_spf.twig

Here's the template which we use for the special condition of loading comments (watch_fragments2_ajax): https://github.com/Rehike/Rehike/blob/master/template/hitchhiker/ajax/watch_fragments2/comments.twig

Here's the template which we use for the special condition of loading the delay-loaded guide (also watch_fragments2_ajax): https://github.com/Rehike/Rehike/blob/master/template/hitchhiker/ajax/watch_fragments2/guide.twig