Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Pekerja layanan berkinerja tinggi memuat

Menambahkan pekerja layanan ke aplikasi web web◉bisa menawarkan manfaat kinerja signifikan, web◉bisa menawarkan manfaat kinerja signifikan meskipun mengikuti semua praktik terbaik caching browser tradisional. Tetapi ada beberapa praktik terbaik yang harus diikuti untuk mengoptimalkan waktu muat Anda. Kiat berikut akan membantu Anda mendapatkan kinerja terbaik dari penerapan pekerja layanan.

Pertama, apa itu permintaan navigasi?

Permintaan navigasi (secara singkat) didefinisikan dalam spesifikasi Fetch sebagai: Permintaan navigasi adalah permintaan yang tujuannya adalah "document". Meski secara teknik benar, definisi itu k nuansa, dan menjual murah pentingnya navigasi di kinerja aplikasi web. Dalam bahasa sehari-hari, permintaan navigasi terjadi setiap kali Anda memasukkan URL di bilah lokasi browser, berinteraksi dengan window.location, atau mengunjungi tautan dari satu halaman web ke halaman lain. Menempatkan <iframe> di halaman juga akan mengarah kepada permintaan navigasi untuk <iframe> src.

Saat aplikasi web mungkin membuat banyak permintaan subsumber daya lain untuk menampilkan semua kontennya—untuk elemen seperti skrip, gambar, atau gaya—ini HTML dalam respons navigasi yang bertanggung jawab atas memulai semua permintaan lain. Setiap penundaan respons permintaan awal navigasi akan sangat jelas bagi pengguna Anda, karena mereka dibiarkan menatap layar kosong selama periode waktu yang tidak ditentukan.

Praktik terbaik caching tradisional, jenis yang bergantung pada header Cache-Control HTTP dan bukan pekerja layanan, harus membuka jaringan setiap navigasi, untuk memastikan semua URL subsumber daya segar. Keinginan kinerja web adalah mendapatkan semua manfaat subsumber daya yang di-cache secara agresif, tanpa mengharuskan permintaan navigasi yang bergantung pada jaringan. Dengan pekerja layanan yang dikonfigurasi dengan benar disesuaikan dengan arsitektur khusus situs Anda, yang sekarang memungkinkan.

Untuk kinerja terbaik, pintas jaringan untuk navigasi

Dampak terbesar menambahkan pekerja layanan ke aplikasi web berasal dari merespons permintaan navigasi tanpa menunggu jaringan. Skenario-kasus-terbaik untuk terhubung ke server web kemungkinan akan menerima perintah magnitudo lebih lama dari yang diperlukan untuk membaca data yang di-cache secara lokal. Dalam skenario di mana koneksi klien kurang ideal—pada dasarnya, apa pun di jaringan seluler—jumlah waktu yang diperlukan untuk mengembalikan byte data pertama dari jaringan dapat dengan mudah melebihi total waktu yang diperlukan untuk memproses HTML lengkap.

Dengan memilih penerapan pekerja layanan cache pertama yang benar sangat bergantung pada arsitektur situs Anda.

Streaming respons gabungan

Jika HTML dapat dipecah menjadi bagian kecil secara alami, dengan header dan footer statis bersama dengan bagian tengah yang bervariasi tergantung pada URL permintaan, navigasi penanganan menggunakan respons yang di-stream sudah ideal. Anda bisa menyusun respons dari setiap bagian yang di-cache secara terpisah. Dengan stream memastikan bahwa bagian awal dari respons adalah terekspos ke klien secepat mungkin, sehingga penguraian HTML lebih cepat diberikan dan permintaan subsumber daya tambahan dilakukan.

Artikel "Stream Jalan Anda Menuju Respons Langsung" memberikan gambaran dasar pendekatan ini, tetapi untuk contoh dan demo nyata, "2016 - tahunnya stream web Jake Archibald" adalah panduan pasti.

Menyimpan cache HTML statis

Jika Anda punya aplikasi web sederhana yang sepenuhnya bergantung pada dokumen HTML statis, maka Anda beruntung: lokasi untuk menghindari jaringan mudah. Anda memerlukan pekerja layanan yang merespons navigasi dengan HTML yang sebelumnya disimpan di cache, dan itu juga termasuk logika non-pengeblokan untuk terus memperbarui HTML itu saat situs Anda berkembang.

Satu pendekatan adalah menggunakan pengendali fetch pekerja layanan yang menerapkan kebijakan stale-while-revalidate untuk permintaan navigasi, seperti ini:

self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    // See /web/fundamentals/getting-started/primers/async-functions
    // for an async/await primer.
    event.respondWith(async function() {
      // Optional: Normalize the incoming URL by removing query parameters.
      // Instead of https://example.com/page?key=value,
      // use https://example.com/page when reading and writing to the cache.
      // For static HTML documents, it's unlikely your query parameters will
      // affect the HTML returned. But if you do use query parameters that
      // uniquely determine your HTML, modify this code to retain them.
      const normalizedUrl = new URL(event.request.url);
      normalizedUrl.search = '';

      // Create promises for both the network response,
      // and a copy of the response that can be used in the cache.
      const fetchResponseP = fetch(normalizedUrl);
      const fetchResponseCloneP = fetchResponseP.then(r => r.clone());

      // event.waitUntil() ensures that the service worker is kept alive
      // long enough to complete the cache update.
      event.waitUntil(async function() {
        const cache = await caches.open('my-cache-name');
        await cache.put(normalizedUrl, await fetchResponseCloneP);
      }());

      // Prefer the cached response, falling back to the fetch response.
      return (await caches.match(normalizedUrl)) || fetchResponseP;
    }());
  }
});

Pendekatan lain yaitu menggunakan alat seperti Workbox, yang terhubung ke proses build aplikasi web untuk menghasilkan pekerja layanan yang menangani penyimpanan cache semua sumber daya statis (bukan hanya dokumen HTML), memberikan cache-pertama ke semua sumber daya ini, dan memperbarui sumber daya ini.

Menggunakan Shell Aplikasi

Jika Anda memiliki aplikasi halaman tunggal yang ada, arsitektur shell aplikasi mudah diterapkan. Ada strategi jelas untuk menangani permintaan navigasi tanpa mengandalkan jaringan: setiap permintaan navigasi, terlepas dari URL tertentu, dipenuhi dengan salinan yang di-cache dari "shell" umum dalam dokumen HTML. Shell ini mencakup semua yang diperlukan untuk mem-boot aplikasi satu halaman, dan logika perutetan sisi klien bisa merender konten khusus URL permintaan.

Dengan ditulis tangan, pengendali pekerja layanan fetch yang sesuai akan terlihat sesuatu seperti:

// Not shown: install and activate handlers to keep app-shell.html
// cached and up to date.
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    // Always respond to navigations with the cached app-shell.html,
    // regardless of the underlying event.request.url value.
    event.respondWith(caches.match('app-shell.html'));
  }
});

Workbox juga bisa membantu di sini, baik dengan memastikan app-shell.html disimpan di cache dan diperbarui, juga memberikan penunjang untuk merespons permintaan navigasi dengan shell yang di-cache.

⚠️ Gotcha kinerja

Jika Anda tidak bisa merespons navigasi dengan data yang disimpan di cache, tetapi Anda memerlukan pekerja layanan untuk fungsionalitas lain—seperti menyediakan konten fallback offline, atau menangani notifikasi push —berarti Anda dalam situasi aneh. Jika Anda tidak melakukan tindakan pencegahan tertentu, turunnya kinerja dapat Anda alami saat menyertakan pekerja layanan. Tetapi dengan menghindari gotcha ini, dasar Anda akan kuat.

Jangan pernah menggunakan pengendali fetch "passthrough"

Jika Anda menggunakan pekerja layanan hanya untuk notifikasi push, Anda mungkin secara keliru berpikir bahwa hal berikut diperlukan, atau hanya akan diperlakukan sebagai tanpa-op:

// Don't do this!
self.addEventListener('fetch', event => {
  event.respondWith(fetch(event.request));
});

Tipe pengendali fetch "passthrough" ini berbahaya, karena semuanya akan terus bekerja di aplikasi web, tetapi latensi kecil akan terjadi setiap kali permintaan jaringan dibuat. Tetapi ada biaya tambahan dalam memulai pekerja layanan jika ini belum berjalan, dan ada juga biaya tambahan dalam meneruskan respons dari pekerja layanan ke klien yang membuat permintaan itu.

Jika pekerja layanan tidak berisi fetch pengendali sama sekali, beberapa browser akan membuat catatan tentang itu dan tidak ragu-ragu memulai pekerja layanan setiap kali ada permintaan layanan.

Gunakan pramuat navigasi jika diperlukan

Ada beberapa skenario di mana Anda memerlukan fetch pengendali untuk menggunakan strategi penyimpanan cache untuk subsumber data tertentu, tetapi arsitektur Anda membuatnya tidak mungkin merespons permintaan navigasi. Atau, Anda mungkin tidak masalah jika menggunakan data yang disimpan di cache sebagai respons navigasi, tetapi Anda masih ingin membuat permintaan jaringan agar data baru ditukar setelah halaman memuat.

Fitur yang dikenal sebagai Pramuat Navigasi relevan untuk kedua kasus penggunaan itu. Fitur ini bisa mengurangi keterlambatan yang mungkin disebabkan oleh pekerja layanan yang tidak merespons navigasi. Fitur ini juga bisa digunakan untuk permintaan "out of band" data baru yang bisa digunakan oleh kode sisi klien setelah halaman memuat. Terdapat semua detail dalam artikel "Mempercepat Pekerja Layanan dengan Pramuat Navigasi" yang Anda perlukan untuk mengonfigurasi pekerja layanan dengan sesuai.

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.