WordPress fallback for Bootstrap's CDN without relying on JavaScript?

Question

Developing a theme for WordPress using Bootstrap 4 I'm familiar with the suggested approach of coding a <div>:

<div id="bootstrapCssTest" class="hidden"></div>

and checking it with JavaScript:

<script type="text/javascript">
    if ($('#bootstrapCssTest').is(':visible') === true) {
        $('<link href="/localcopy/css/bootstrap.css" rel="stylesheet" type="text/css" />').appendTo('head');
    }
</script>

reference: "How to load local copy of bootstrap css when the cdn server is down?" but I would like a way to test the CSS without JavaScript and enqueue Bootstrap's CSS depending on if the CDN is found. Upon research I read that fopen may not be allowed always on the server level so I opted for get_headers, the code:

function bootstrap_css() {
    $bootstrap_cdn   = 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css';
    $cdn_check       =  @get_headers($bootstrap_cdn);

    if ($cdn_check[0] === "HTTP/1.1 200 OK") :
        wp_enqueue_style('bootstrap',$bootstrap_cdn,array(),'4.2.1');

        function add_cross_origin($html,$handle) {
            if ('bootstrap' === $handle) {
                return str_replace("media='all'","media='all' integrity='sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS' crossorigin='anonymous'",$html);
            }
                return $html;
            }
        add_filter('style_loader_tag','add_cross_origin',10,2);
    else :
        wp_enqueue_style('bootstrap',get_site_url() . '/css/bootstrap.min.css',false,'4.2.1');
    endif;
}
add_action('wp_enqueue_scripts','bootstrap_css');

Is there a better approach to checking wether the Bootstrap CSS CDN is available that doesn't use JavaScript to test? Should I be checking anything beyond the "HTTP/1.1 200 OK"? Would cURL be better to use then get_headers?

Mind the status "304 - found" thats the way a cdn should work — john Smith, Jan 17 '19 at 13:55
@johnSmith Why not write an answer explaining what you're referring to? I would upvote it and I think others would too — DᴀʀᴛʜVᴀᴅᴇʀ, Jan 17 '19 at 13:59
well because it´s a comment, i will add another one: if your server successfull tested cdn, it doesn´t mean that when the client requests it is available for client as well, thats why a client-side check makes more sense to me. If you dont want to rely on cdn you could always use your local copy — john Smith, Jan 17 '19 at 14:01
If you want to do that on client side, doing it on service worker would feel like better approach. But I'm not sure about doing it on server. Just because server got success message, doesn't mean that client can download it (although it's a very rare case). — Prajwal, Jan 17 '19 at 14:23

score 0 · Accepted Answer · edited Aug 14 '19 at 18:51

After the first time the php script tries accessing the CSS file, the server returns a status code 304. The easiest implementation to check for this would be the following:

function bootstrap_css() {
$bootstrap_cdn   = 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css';
$cdn_check       =  @get_headers($bootstrap_cdn);

if (strpos($cdn_check[0], "200") !== false || strpos($cdn_check[0], "304") !== false) :
    wp_enqueue_style('bootstrap',$bootstrap_cdn,array(),'4.2.1');

function add_cross_origin($html,$handle) {
    if ('bootstrap' === $handle) {
        return str_replace("media='all'","media='all' integrity='sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS' crossorigin='anonymous'",$html);
    }
        return $html;
    }
add_filter('style_loader_tag','add_cross_origin',10,2);
    else :
        wp_enqueue_style('bootstrap',get_site_url() . '/css/bootstrap.min.css',false,'4.2.1');
    endif;
}
add_action('wp_enqueue_scripts','bootstrap_css');

WordPress fallback for Bootstrap's CDN without relying on JavaScript?

1 Answers1