Mempercepat pekerja layanan dengan pramuat navigasi

Pemuatan ulang navigasi memungkinkan Anda mengatasi waktu startup pekerja layanan dengan membuat permintaan secara paralel.

Jake Archibald

Ringkasan

• Dalam beberapa situasi, waktu booting pekerja 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 dari pekerja layanan. Hal ini melibatkan booting pekerja layanan (jika belum berjalan), dan mengirim peristiwa pengambilan.

Waktu booting bergantung pada perangkat dan kondisi. Biasanya sekitar 50 md. Di perangkat seluler, waktunya lebih dari 250 md. Dalam kasus ekstrem (perangkat lambat, CPU dalam masalah), waktunya dapat lebih dari 500 md. Namun, karena pekerja layanan tetap aktif selama waktu yang ditentukan browser di antara peristiwa, Anda hanya akan mengalami penundaan ini sesekali, seperti saat pengguna membuka situs Anda dari tab baru, atau situs lain.

Waktu booting tidak menjadi masalah jika Anda merespons dari cache, karena manfaat melewati jaringan lebih besar daripada penundaan booting. Namun, jika Anda merespons menggunakan jaringan…

Permintaan jaringan tertunda oleh booting pekerja layanan.

Kami terus mengurangi waktu booting dengan menggunakan cache kode 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 untuk membantu

Pemuatan data navigasi adalah fitur yang memungkinkan Anda mengatakan, "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 cara kerjanya, dengan pekerja layanan diberi penundaan startup 500 md yang disengaja menggunakan while-loop:

Berikut demonya. Untuk mendapatkan manfaat pramuat navigasi, Anda memerlukan browser yang mendukungnya.

Mengaktifkan 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 Anda perlu menggunakannya, sebaiknya aktifkan dan nonaktifkan di peristiwa activate pekerja layanan Anda.

Menggunakan respons yang dimuat sebelumnya

Sekarang browser akan melakukan pramuat untuk navigasi, tetapi Anda masih perlu 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 diselesaikan dengan respons, jika:

• Pramuat navigasi diaktifkan.
• Permintaannya adalah permintaan GET.
• Permintaan ini adalah permintaan navigasi (yang dibuat browser saat memuat halaman, termasuk iframe).

Jika tidak, event.preloadResponse masih ada, tetapi di-resolve dengan undefined.

Respons kustom untuk pramuat

Jika halaman Anda memerlukan data dari jaringan, cara tercepat adalah memintanya di service worker 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 setiap permintaan. Artinya, kita dapat menampilkan header yang di-cache saat konten jaringan di-streaming.

Proses ini lebih cepat daripada model "shell aplikasi" karena permintaan jaringan dibuat bersama dengan permintaan halaman, dan konten dapat di-streaming tanpa hack besar.

Namun, permintaan untuk includeURL akan tertunda oleh waktu startup pekerja layanan. Kita juga dapat menggunakan pramuat navigasi untuk memperbaiki hal ini, tetapi dalam hal ini kita tidak ingin memuat halaman lengkap, kita ingin memuat menyertakan.

Untuk mendukung hal ini, header dikirim dengan setiap permintaan pramuat:

Service-Worker-Navigation-Preload: true

Server dapat menggunakannya untuk mengirim konten yang berbeda untuk permintaan pramuat navigasi daripada untuk permintaan navigasi reguler. Ingatlah untuk menambahkan header Vary: Service-Worker-Navigation-Preload, sehingga cache mengetahui 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 Anda inginkan:

navigator.serviceWorker.ready.then(registration => {
  return registration.navigationPreload.setHeaderValue(newValue);
}).then(() => {
  console.log('Done!');
});

Misalnya, Anda dapat menetapkannya 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 kerja keras mereka dalam mengembangkan fitur ini, dan bantuan mereka dalam membuat artikel ini. Dan terima kasih banyak kepada semua orang yang terlibat dalam upaya standardisasi