Comment fournir une solution de secours locale à Font Awesome en cas d'échec de CDN?

11

J'essaie de développer un thème Wordpress et de trouver une solution de remplacement locale pour Font Awesome en cas d'échec du CDN ou si je développe mon thème sur un serveur local sans connexion Internet.

La solution à laquelle je pense est quelque chose comme ceci (pseudo-code):

if ( $CDN_IS_AVAILABLE ) { 
        wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', false );
    } else {
        wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css', false, '4.0.3' );
    }

Merci!

    
posée Knott 24.04.2014 - 09:58

2 réponses

14

Le problème est que je suis presque sûr qu'il est impossible de vérifier si le code CSS est effectivement ajouté à une page via PHP: CSS est analysé par le navigateur, donc le côté client, et n'a aucun effet côté serveur.

Bien sûr, en PHP, il est possible de vérifier si le CDN est réactif ou non ...

Option 1

Envoyez une demande et si elle répond avec le statut HTTP 200, utilisez-la. Quelque chose comme:

function font_awesome_css() {
    $url = 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
    $cdn = wp_remote_get( $url );
    if ( (int) wp_remote_retrieve_response_code( $cdn) !== 200 ) {
        $url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
    }
    wp_enqueue_style( 'font-awesome', $url, false );
}

qui donne lieu à 2 requêtes HTTP, une pour la vérification, la seconde pour le CSS intégré: vraiment mauvais .

Option 2

function font_awesome_css() {
    $url = 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
    $cdn = wp_remote_get( $url );
    if ( (int) wp_remote_retrieve_response_code( $cdn ) === 200 ) {
        $css = wp_remote_retrieve_body( $cdn );
        add_action( 'wp_head', function() use( $css ) {
            $absolute = "//netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/";
            $css = str_replace( "../fonts/", $absolute, $css );
            echo '<style type="text/css">' . $css . '</style>';
        } );
    } else {
        $url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
        wp_enqueue_style( 'font-awesome', $url, false );
    }
}

C'est encore pire :

  • Cela ruine le workflow wp_enqueue_style : si un plugin ajoute Font Awesome, il sera ajouté 2 fois.
  • Le nombre de requêtes HTTP est le même, mais normalement les 2 requêtes sont exécutées en parallèle . Ainsi, la génération de page PHP ralentit car elle doit attendre la première réponse à la requête.
  • Cela empêche également le navigateur de mettre en cache le code CSS. Par conséquent, si vous utilisez le même style dans différentes pages, vous forcez la requête CDN sur chaque page visitée. Lorsque vous utilisez le flux de travail normal, les pages après le premier CSS sont extraites du cache.

Alors, vraiment, ne faites pas cela à la maison.

Ce qui compte vraiment, c’est qu’en utilisant PHP, vous pouvez vérifier les requêtes CDN, mais pas les CSS, de sorte que tous vos efforts aboutissent à de plus mauvaises performances, au lieu de meilleures.

Cordialement, si votre thème est un thème public, je vous suggère d'utiliser uniquement la copie locale, ce qui permet aux utilisateurs de choisir un CDN:

if ( ! function_exists( 'font_awesome_css' ) ) {
    function font_awesome_css() {
        $_url = get_template_directory_uri() . '/css/font-awesome/css/font-awesome.min.css';
        $url = apply_filters( 'font_awesome_css_url', $_url );
        wp_enqueue_style( 'font-awesome', $url, false );
    }
}

Ainsi, les utilisateurs peuvent complètement remplacer la fonction à l'aide d'un thème enfant et utiliser le filtre 'font_awesome css_url' pour modifier l'URL.

Sachez également que certains fournisseurs d’hébergement haut de gamme convertissent automatiquement les ressources locales en ressources CDN. Il existe des plugins qui permet à CDN toutes les choses; C’est la raison pour laquelle un thème public ne doit pas du tout utiliser CDN.

Si le thème est pour vous, faites votre choix. Considérez que les CDN les plus célèbres ont un très faible pourcentage de temps d’arrêt (et que bootstrapcdn est l’un des plus fiables, selon cdnperf.com ). . Je suis presque sûr que votre hébergement a un temps d'arrêt% supérieur à celui de bootstrapcdn, donc les gens ont plus de chances de ne pas voir votre site que de le voir avec des icônes cassées.

Le sale chemin

Comme dit, PHP ne peut pas vérifier les CSS, car le rendu CSS a lieu côté client, mais vous pouvez utiliser la vérification côté client: JavaScript.

Intégrez tout d'abord CSS à l'aide du CDN:

function font_awesome_css() {
    $url =  '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css';
    wp_enqueue_style( 'font-awesome', $url, false );
} 

Après cela, ajoutez du JavaScript à votre pied de page:

/*
Normally the JS should be properly enqueued and the URL
passed via wp_enqueue_script, but this is a proof of concept,
more than real code.
*/
add_action( 'wp_footer', function() {
    $cssurl = get_template_directory_uri() . '/css/';
    ?>
    <span id="facheck" data-cssuri="<?php echo $cssurl; ?>" class="fa" style="display:none">
    </span>
    <script>
        jQuery(document).ready(function($) {
            var $check = $('#facheck');
            if ( $check.css('fontFamily') !== 'FontAwesome' ) {
                // Font Awesome not loaded!
                // Remove current CSS link
                $('#font-awesome-css').remove;
                // Add the local version
                var local = '<link rel="stylesheet" type="text/css" href="' +
                    $check.data('cssuri') + // This is the theme CSS folder URL
                    'font-awesome/css/font-awesome.min.css" />';
                $('head').append( local );
            }
        });
    </script>
    <?php
});

Ce code est exécuté lorsque la page est chargée et vérifie si la plage invisible située dans le pied de page avec la classe 'fa' a la propriété font-family définie sur 'FontAwesome'. Ceci est défini par Font Awesome, donc si ce n'est pas vrai, cela signifie que CSS n'est pas chargé. Si cela se produit, le code utilise JavaScript pour ajouter le code CSS local à la tête.

(Pour tester ce code, vous pouvez intégrer via wp_enqueue_style une mauvaise URL de CDN et voir ce qu'il se passe.)

Ainsi, dans les rares cas où un CDN n'est pas disponible, tous les styles seront affichés comme prévu (pour certaines millisecondes, les utilisateurs verront des icônes CSS "brisées", car CSS est ajouté après le chargement de la page).

Maintenant, étant donné que les CDN sont très fiables, vaut-il la peine de faire ce hack pour le < 1% des personnes qui verront des icônes cassées? Il vous reste à répondre à cette question.

    
réponse donnée gmazzap 24.04.2014 - 21:52
1

Une vérification côté serveur n'est pas non plus à l'épreuve des balles. Si votre serveur est situé en Californie, votre chèque utilisera le centre de données California CDN. Si votre utilisateur est situé en Chine, il utilisera probablement un centre de données complètement différent. Au moins, c’est comme ça que ça fonctionne.

Quoi qu'il en soit, voici une solution JQuery améliorée:

enlace

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
    (function($){
        var $span = $('<span class="fa" style="display:none"></span>').appendTo('body');
        if ($span.css('fontFamily') !== 'FontAwesome' ) {
            // Fallback Link
            $('head').append('<link href="/css/font-awesome.min.css" rel="stylesheet">');
        }
        $span.remove();
    })(jQuery);
</script>
    
réponse donnée skibulk 14.10.2014 - 17:28

Lire d'autres questions sur les étiquettes