Bagaimana cara menyediakan fallback lokal untuk Font Awesome jika CDN gagal?

Saya mencoba mengembangkan tema Wordpress dan mencari tahu cara menyediakan fallback lokal untuk Font Awesome jika CDN gagal atau saya mengembangkan tema saya di server lokal tanpa koneksi internet.

Solusi yang ada dalam pikiran saya adalah sesuatu seperti ini (kode semu):

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' );
    }

Terima kasih!

Masalahnya adalah saya cukup yakin tidak mungkin untuk memeriksa apakah CSS secara efektif ditambahkan ke halaman melalui PHP: CSS diurai oleh browser, jadi sisi klien, dan sama sekali tidak berpengaruh di sisi server.

Tentu saja, dalam PHP dimungkinkan untuk memeriksa apakah CDN responsif atau tidak ...

Pilihan 1

Kirim permintaan dan jika ia merespons dengan status HTTP 200, gunakan itu. Sesuatu seperti:

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 );
}

yang menghasilkan 2 permintaan HTTP, satu untuk cek, yang kedua untuk embedded CSS: sangat buruk .

pilihan 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 );
    }
}

Ini bahkan lebih buruk :

• Ini merusak wp_enqueue_stylealur kerja: jika sebuah plugin menambahkan Font Awesome, itu akan ditambahkan 2 kali.
• Jumlah permintaan HTTP adalah sama, namun biasanya 2 permintaan berjalan secara paralel , jadi dengan cara ini generasi PHP halaman melambat karena perlu menunggu respons permintaan pertama.
• Ini juga mencegah browser dari caching CSS, jadi jika Anda menggunakan gaya yang sama di halaman yang berbeda, Anda memaksa permintaan CDN pada setiap halaman yang dikunjungi. Saat menggunakan alur kerja normal, halaman setelah CSS pertama diambil dari cache.

Jadi, sungguh, jangan lakukan ini di rumah.

Yang benar-benar penting adalah bahwa menggunakan PHP Anda dapat memeriksa permintaan CDN, tetapi tidak memverifikasi CSS, jadi semua upaya Anda berakhir dengan kinerja yang lebih buruk, bukannya lebih baik.

Hormat kami, jika tema Anda adalah tema publik, saya sarankan Anda hanya menggunakan salinan lokal, memberikan pengguna cara untuk memilih 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 );
    }
}

Jadi pengguna dapat sepenuhnya menimpa fungsi menggunakan tema anak, dan juga dapat menggunakan 'font_awesome css_url'filter untuk mengubah URL.

Juga pertimbangkan bahwa beberapa penyedia hosting kelas atas secara otomatis mengkonversi aset lokal ke yang CDN, dan ada plugin yang memungkinkan CDN semua hal; inilah alasan mengapa tema publik tidak boleh menggunakan CDN sama sekali.

Jika tema itu untuk Anda sendiri, maka buatlah pilihan. Pertimbangkan bahwa CDN paling terkenal memiliki% down time yang sangat rendah (dan bootstrapcdn adalah salah satu yang paling dapat diandalkan, menurut cdnperf.com ). Saya cukup yakin hosting Anda memiliki waktu henti% lebih besar dari bootstrapcdn, sehingga orang-orang memiliki kemungkinan lebih besar untuk tidak melihat situs Anda sama sekali, daripada melihatnya dengan ikon yang rusak.

Cara yang kotor

Seperti yang dikatakan, PHP tidak dapat memeriksa CSS, karena rendering CSS terjadi pada sisi klien, tetapi Anda dapat menggunakan pemeriksaan sisi klien: JavaScript.

Sematkan dulu CSS menggunakan 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 );
} 

Setelah itu, tambahkan beberapa JavaScript ke catatan kaki Anda:

/*
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
});

Kode ini berjalan ketika halaman dimuat dan memeriksa apakah rentang tak terlihat ditambahkan ke footer dengan kelas 'fa' memiliki properti font-family diatur ke 'FontAwesome'. Ini diatur oleh Font Awesome, jadi jika itu tidak benar, itu berarti bahwa CSS tidak dimuat. Jika itu terjadi, kode tersebut menggunakan JavaScript untuk menambahkan CSS lokal ke kepala.

(Untuk menguji kode ini, Anda dapat menyematkan melalui wp_enqueue_styleURL CDN yang salah, dan lihat apa yang terjadi)

Jadi, dalam kasus langka CDN tidak tersedia, semua gaya akan ditampilkan seperti yang diharapkan (untuk beberapa milidetik pengguna akan melihat ikon CSS 'rusak', karena CSS ditambahkan setelah halaman dimuat).

Sekarang, mengingat CDN sangat andal, apakah pantas melakukan peretasan ini untuk <1% orang yang akan melihat ikon rusak? Menjawab pertanyaan ini terserah Anda.

Pemeriksaan sisi server juga tidak tahan peluru. Jika server Anda berlokasi di California, cek Anda akan menggunakan Pusat Data CDN California. Jika pengguna Anda berada di China, mereka kemungkinan akan menggunakan Pusat Data yang sama sekali berbeda. Setidaknya, begitulah menurut saya cara kerjanya.

Bagaimanapun, inilah solusi jquery yang ditingkatkan:

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="/wordpress//css/font-awesome.min.css" rel="stylesheet">');
        }
        $span.remove();
    })(jQuery);
</script>