Mempercepat pekerja layanan dengan pramuat navigasi

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

Archibald Jake
Jake Archibald

Dukungan Browser

  • 59
  • 18
  • 99
  • 15,4

Sumber

Ringkasan

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...

Sepatu SW
Permintaan navigasi

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:

Sepatu SW
Permintaan navigasi



Dan kami berkata "ya, sepertinya adil".

"Pramuat navigasi" dapat membantu

Pramuat navigasi adalah fitur yang memungkinkan Anda mengucapkan, "Hey, 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.

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 perlu memanfaatkannya, sebaiknya aktifkan/nonaktifkan di 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.

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 {i>header<i}

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

Bagian dari Seri yang baru memiliki interoperabilitas