Pramuat navigasi memungkinkan Anda mengatasi waktu startup pekerja layanan dengan membuat permintaan secara paralel.
Ringkasan
- Dalam beberapa situasi, waktu booting layanan dapat menunda respons jaringan.
- Tersedia di tiga mesin browser utama, pramuat navigasi memperbaiki hal ini dengan memungkinkan Anda membuat permintaan secara paralel dengan booting pekerja layanan.
- Anda dapat membedakan permintaan pramuat dari navigasi reguler menggunakan header, dan menayangkan konten yang berbeda.
Permasalahan
Saat Anda membuka situs yang menggunakan pekerja layanan untuk menangani peristiwa pengambilan, browser akan meminta respons kepada pekerja layanan. Hal ini melibatkan booting service worker (jika belum berjalan), dan mengirim peristiwa pengambilan.
Waktu booting bergantung pada perangkat dan kondisi. Biasanya sekitar 50 md. Di ponsel, lebih cepat 250 md. Dalam kasus ekstrem (perangkat lambat, CPU dalam masalah), waktu tonton bisa lebih dari 500 md. Namun, karena pekerja layanan tetap aktif selama waktu yang ditentukan browser di antara acara, Anda hanya mendapatkan penundaan ini sesekali, seperti saat pengguna membuka situs Anda dari tab baru, atau situs lain.
Waktu {i>booting<i} tidak menjadi masalah jika Anda merespons dari cache, karena manfaat melewatkan jaringan lebih besar daripada penundaan {i>boot-up<i}. Tetapi jika Anda merespons menggunakan jaringan...
Permintaan jaringan tertunda oleh proses booting pekerja layanan.
Kami terus mengurangi waktu booting dengan menggunakan penyimpanan kode ke dalam cache di V8, dengan melewati pekerja layanan yang tidak memiliki peristiwa pengambilan, dengan meluncurkan pekerja layanan secara spekulatif, dan pengoptimalan lainnya. Namun, waktu booting akan selalu lebih besar dari nol.
Facebook menyampaikan dampak masalah ini kepada kami, dan meminta cara untuk melakukan permintaan navigasi secara paralel:
Pramuat navigasi dapat membantu
Pramuat navigasi adalah fitur yang memungkinkan Anda mengucapkan, "Saat pengguna membuat permintaan navigasi GET, mulai permintaan jaringan saat pekerja layanan melakukan booting".
Penundaan startup masih ada, tetapi tidak memblokir permintaan jaringan, sehingga pengguna mendapatkan konten lebih cepat.
Berikut adalah video penerapannya, di mana pekerja layanan diberi penundaan startup 500 md yang disengaja menggunakan few-loop:
Inilah demonya. Untuk mendapatkan manfaat pramuat navigasi, Anda memerlukan browser yang mendukungnya.
Aktifkan pramuat navigasi
addEventListener('activate', event => {
event.waitUntil(async function() {
// Feature-detect
if (self.registration.navigationPreload) {
// Enable navigation preloads!
await self.registration.navigationPreload.enable();
}
}());
});
Anda dapat memanggil navigationPreload.enable()
kapan saja, atau menonaktifkannya dengan navigationPreload.disable()
. Namun, karena peristiwa fetch
perlu memanfaatkannya, sebaiknya aktifkan dan nonaktifkan dalam peristiwa activate
pekerja layanan Anda.
Menggunakan respons yang dimuat sebelumnya
Sekarang browser akan melakukan pramuat untuk navigasi, tetapi Anda masih harus menggunakan respons:
addEventListener('fetch', event => {
event.respondWith(async function() {
// Respond from the cache if we can
const cachedResponse = await caches.match(event.request);
if (cachedResponse) return cachedResponse;
// Else, use the preloaded response, if it's there
const response = await event.preloadResponse;
if (response) return response;
// Else try the network.
return fetch(event.request);
}());
});
event.preloadResponse
adalah promise yang di-resolve dengan respons, jika:
- Pramuat navigasi diaktifkan.
- Permintaan adalah permintaan
GET
. - Permintaan tersebut merupakan permintaan navigasi (yang dihasilkan browser saat browser memuat halaman, termasuk iframe).
Jika tidak, event.preloadResponse
tetap ada, tetapi diselesaikan dengan undefined
.
Respons kustom untuk pramuat
Jika halaman Anda memerlukan data dari jaringan, cara tercepat adalah memintanya di pekerja layanan dan membuat satu respons streaming yang berisi bagian dari cache dan bagian dari jaringan.
Misalnya kita ingin menampilkan artikel:
addEventListener('fetch', event => {
const url = new URL(event.request.url);
const includeURL = new URL(url);
includeURL.pathname += 'include';
if (isArticleURL(url)) {
event.respondWith(async function() {
// We're going to build a single request from multiple parts.
const parts = [
// The top of the page.
caches.match('/article-top.include'),
// The primary content
fetch(includeURL)
// A fallback if the network fails.
.catch(() => caches.match('/article-offline.include')),
// The bottom of the page
caches.match('/article-bottom.include')
];
// Merge them all together.
const {done, response} = await mergeResponses(parts);
// Wait until the stream is complete.
event.waitUntil(done);
// Return the merged response.
return response;
}());
}
});
Di atas, mergeResponses
adalah fungsi kecil yang menggabungkan aliran dari setiap permintaan. Artinya, kita dapat menampilkan header yang di-cache saat konten jaringan melakukan streaming.
Proses ini lebih cepat daripada model "shell aplikasi" karena permintaan jaringan dibuat bersama dengan permintaan halaman, dan konten dapat di-streaming tanpa peretasan besar.
Namun, permintaan untuk includeURL
akan tertunda oleh waktu startup pekerja layanan. Kita dapat menggunakan pramuat navigasi untuk memperbaikinya juga, tetapi dalam hal ini kita tidak ingin melakukan pramuat halaman penuh, kita ingin melakukan pramuat yang disertakan.
Untuk mendukung hal ini, header dikirim bersama setiap permintaan pramuat:
Service-Worker-Navigation-Preload: true
Server dapat menggunakan ini untuk mengirim konten yang berbeda untuk permintaan pramuat navigasi daripada untuk permintaan navigasi reguler. Jangan lupa untuk menambahkan header Vary: Service-Worker-Navigation-Preload
, sehingga cache tahu bahwa respons Anda berbeda.
Sekarang kita dapat menggunakan permintaan pramuat:
// Try to use the preload
const networkContent = Promise.resolve(event.preloadResponse)
// Else do a normal fetch
.then(r => r || fetch(includeURL))
// A fallback if the network fails.
.catch(() => caches.match('/article-offline.include'));
const parts = [
caches.match('/article-top.include'),
networkContent,
caches.match('/article-bottom')
];
Mengubah header
Secara default, nilai header Service-Worker-Navigation-Preload
adalah true
, tetapi Anda dapat menetapkannya ke nilai apa pun yang diinginkan:
navigator.serviceWorker.ready.then(registration => {
return registration.navigationPreload.setHeaderValue(newValue);
}).then(() => {
console.log('Done!');
});
Anda dapat, misalnya, menyetelnya ke ID postingan terakhir yang telah Anda simpan dalam cache secara lokal, sehingga server hanya menampilkan data yang lebih baru.
Mendapatkan status
Anda dapat mencari status pramuat navigasi menggunakan getState
:
navigator.serviceWorker.ready.then(registration => {
return registration.navigationPreload.getState();
}).then(state => {
console.log(state.enabled); // boolean
console.log(state.headerValue); // string
});
Terima kasih banyak kepada Matt Falkenhagen dan Tsuyoshi Horo atas upaya mereka dalam fitur ini, serta bantuan dalam artikel ini. Dan terima kasih banyak kepada semua yang terlibat dalam upaya standardisasi