web-dev-qa-db-fra.com

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

J'essaie de développer un thème Wordpress et de trouver une solution de remplacement pour Font Awesome si le CDN échoue 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' );
    }

Je vous remercie!

cdn
11
Knott

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

Bien sûr, dans 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 );
}

il en résulte 2 demandes 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 même 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 s'exécutent en parallèle, donc la génération de pages 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. Ainsi, 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.

Donc, vraiment, ne pas le faire à la maison.

Ce qui compte vraiment, c’est que, si vous utilisez PHP, vous pouvez vérifier la demande CDN, mais pas la vérification de CSS, de sorte que tous vos efforts aboutissent à une performance moins bonne qu’à une meilleure.

Cordialement, si votre thème est 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.

Notez également que certains fournisseurs d’hébergement haut de gamme convertissent automatiquement les ressources locales en ressources CDN, et il existe des plugins qui autorisent toutes les fonctionnalités de CDN; C'est la raison pour laquelle un thème public ne doit pas utiliser du tout CDN.

Si le thème est pour vous, faites un 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, de sorte que 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 CSS, car le rendu CSS a lieu côté client, mais vous pouvez utiliser la vérification côté client: JavaScript.

Commencez par intégrer CSS à l'aide de 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 s'exécute lorsque la page est chargée et vérifie si la plage invisible ajoutée au 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 URL de CDN erronée 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, cela vaut-il la peine de le faire pour les <1% des personnes qui verront des icônes brisées? Répondre à cette question vous est laissé.

14
gmazzap

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:

http://jsfiddle.net/skibulk/fp1gqnyc/

<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>
1
skibulk