Mengukur Performa pada Pekerja Layanan

Paul Kinlan

Selain Jake Archibald yang mengkhawatirkan keterampilan Developer-nya yang tidak berfungsi sebagaimana mestinya, ia membuat kasus yang kuat bahwa dengan menggunakan pekerja layanan secara cerdas, Anda dapat meningkatkan performa situs atau aplikasi Anda secara drastis. Tonton video untuk ringkasannya.

Jika ingin meningkatkan waktu muat Halaman seperti saran Jake, Anda harus benar-benar dapat memahami pengaruh pekerja layanan terhadap permintaan halaman.

Resource Timing dan User Timing API adalah komponen penting di banyak infrastruktur RUM (Real User Monitoring) situs karena memungkinkan Anda memahami secara menyeluruh cara semua pengguna melihat performa situs (Kasus penggunaan lainnya mendeteksi injeksi konten). Singkatnya, Anda dapat memahami hampir setiap aspek dari setiap permintaan web yang dibuat dari situs Anda, kecuali jika Anda memiliki pekerja layanan atau pekerja Web.

Berikut ini contoh singkat cara menggunakannya untuk mendapatkan daftar semua permintaan yang dibuat ke domain yang bukan domain saat ini.

var getThirdPartyRequests = function() {
    var thirdPartyRequests = [];
    var requests = window.performance.getEntriesByType("resource");
    
    var currentHost = window.location.host

    for(var requestIdx = 0; requestIdx < requests.length; requestIdx++) {
    var request = requests[requestIdx];
    var url = new URL(request.name);
    var host = url.host;

    if(host != currentHost) {
        thirdPartyRequests.push(request);
    }
    }
    
    return thirdPartyRequests;
};

API Resource Timing dan User Timing dibuat dan diimplementasikan sebelum pekerja layanan menjadi sorotan di mata engineer, dan kode di atas tidak akan dapat memahami bagaimana Pekerja Layanan memengaruhinya.

Serangkaian perubahan terbaru di Chrome 45 (Beta pada Juli 2015) akan membantu Anda dengan memperkenalkan kemampuan bagi semua bentuk pekerja (Web dan pekerja layanan) untuk memiliki akses ke API Waktu Sumber Daya dan Waktu Pengguna, sehingga Anda dapat terus memantau performa jaringan untuk semua pengguna Anda.

Mengakses Metrik Performa dari Service Worker

Perubahan terbesar adalah penambahan objek performance ke dalam konteks Pekerja (Web dan ServiceWorkers) yang kini akan memungkinkan Anda memahami waktu performa semua permintaan yang dibuat dalam konteks pekerja dan juga memungkinkan Anda menetapkan tanda Anda sendiri untuk pengukuran eksekusi JS. Jika hanya dapat melihat apa yang terjadi dari konteks jendela saat ini, Anda akan melewatkan informasi waktu penting dari:

  • Permintaan fetch() dibuat dalam peristiwa oninstall dari pekerja layanan
  • Permintaan fetch() yang dibuat saat meng-cache data dalam peristiwa onpush sekarang dapat dilacak untuk memahami performa yang dilihat pengguna Anda.
  • Terakhir, permintaan fetch() yang dibuat dan dicegat oleh pengendali onfetch.

Poin terakhir ini penting. Pekerja layanan bisa diartikan sebagai proxy yang berada di antara UI web dan jaringan. Objek performance pada window hanya melihat pengaturan waktu dan informasi untuk bagian permintaan yang dipanggil, tidak memiliki pengetahuan tentang pekerja layanan yang berada di antara klien dan jaringan sehingga tidak dapat memahami dampak pekerja layanan.

Bagaimana cara menggunakannya?

Pekerja layanan standar yang terlebih dahulu mendukung offline memiliki langkah penginstalan, yaitu proses mendownload dan menyimpan semua aset untuk digunakan nanti

Contoh penggunaan fitur ini adalah untuk merekam dan mencatat data waktu dari langkah penginstalan sehingga Anda dapat membuat beberapa keputusan terukur tentang cara meningkatkan performa penginstalan berdasarkan penggunaan nyata oleh pengguna di dunia nyata.

self.addEventListener("install", function() {
    var urls = [
    '/',
    '/images/chrome-touch-icon-192x192.png',
    '/images/ic_add_24px.svg',
    '/images/side-nav-bg@2x.jpg',
    '/images/superfail.svg',
    '/scripts/voicememo-core.js',
    '/styles/voicememo-core.css',
    '/third_party/Recorderjs/recorder.js',
    '/third_party/Recorderjs/recorderWorker.js',
    '/third_party/Recorderjs/wavepcm.js',
    '/third_party/moment.min.js',
    '/favicon.ico',
    '/manifest.json'
    ];

    urls = urls.map(function(url) {
    return new Request(url, {credentials: 'include'});
    });

    event.waitUntil(
    caches
        .open(CACHE_NAME + '-v' + CACHE_VERSION)
        .then(function(cache) {
        // Fetch all the URL's and store in the cache
        return cache.addAll(urls);
        })
        .then(function () {
        // Analyze all the requests
        var requests = self.performance.getEntriesByType("resource");
        
        // Loop across all the requests and save the timing data.
        return;
        })
    );
});

Saat ini, banyak situs menggunakan RUM untuk memahami cara sebagian besar pengguna menggunakan situs mereka. Alat seperti Google Analytics telah melaporkan data kecepatan situs menggunakan Navigation Timing API, tetapi harus diperbarui untuk menyertakan analisis performa dari konteks Pekerja.

Apakah Navigation Timing API akan tersedia untuk Pekerja Layanan

Saat ini, tidak ada rencana untuk menambahkan Navigation Timing API ke konteks pekerja layanan, karena tidak ada navigasi tradisional dalam pekerja layanan. Menariknya, bagi pekerja layanan, setiap navigasi di rangkaian halaman yang dikontrol pekerja layanan akan terlihat seperti pengambilan resource. Hal ini saja membuat pekerja layanan menjadi cara yang sangat menarik untuk memusatkan sebagian besar logika performa di aplikasi web Anda.

Dapatkah saya melihat perubahan yang terjadi?

Saya tertarik dengan diskusi dan spesifikasinya