pramuat-navigasi kotak kerja

"Mempercepat Pekerja Layanan dengan Pramuat Navigasi" melakukan baik dalam menjelaskan apa itu pramuat navigasi, dan manfaatnya bagi aplikasi web yang pekerja layanan tidak secara eksplisit menangani permintaan navigasi.

Apa fungsi modul ini?

workbox-navigation-preload akan menangani pemeriksaan saat runtime untuk melihat apakah browser saat ini mendukung pramuat navigasi, dan jika mendukung, browser akan otomatis membuat pengendali peristiwa activate untuk mengaktifkannya.

Kode bersama di dalam workbox-core yang menangani pembuatan permintaan jaringan di seluruh Workbox juga telah diperbarui untuk secara otomatis memanfaatkan respons pramuat, jika tersedia. Ini berarti salah satu strategi bawaan dapat secara otomatis memanfaatkan pramuat navigasi, setelah diaktifkan.

Siapa yang harus mengaktifkan pramuat navigasi?

Developer yang sudah menangani navigasi dengan merespons dengan HTML yang di-cache sebelumnya (yang berpotensi dikonfigurasi dengan penggantian Shell Aplikasi) tidak perlu mengaktifkan pramuat navigasi. Fitur ini dimaksudkan untuk mengurangi latensi navigasi bagi developer yang tidak dapat melakukan pra-cache HTML, tetapi masih ingin menggunakan Workbox untuk menangani penyimpanan dalam cache aset lain di situs mereka.

Misalnya, jika Anda mengikuti pola App Shell, dan memiliki rute navigasi sudah diatur untuk menggunakan HTML yang telah di-{i>precache<i}, mengaktifkan pramuat navigasi akan sia-sia. Respons jaringan yang terkait dengan permintaan pramuat tidak akan pernah digunakan, karena HTML yang di-cache sebelumnya akan digunakan tanpa syarat.

Penggunaan Dasar

import * as navigationPreload from 'workbox-navigation-preload';
import {NetworkFirst} from 'workbox-strategies';
import {registerRoute, NavigationRoute} from 'workbox-routing';

// Enable navigation preload.
navigationPreload.enable();

// Swap in NetworkOnly, CacheFirst, or StaleWhileRevalidate as needed.
const strategy = new NetworkFirst({
  cacheName: 'cached-navigations',
  plugins: [
    // Any plugins, like `ExpirationPlugin`, etc.
  ],
});

const navigationRoute = new NavigationRoute(strategy, {
  // Optionally, provide a allow/denylist of RegExps to determine
  // which paths will match this route.
  // allowlist: [],
  // denylist: [],
});

registerRoute(navigationRoute);

Bagaimana cerita dukungan browser?

Saat ini, Google Chrome adalah satu-satunya browser yang mendukung pramuat navigasi. enable() akan memeriksa dukungan browser saat runtime, dan hanya mencoba mengaktifkan pramuat navigasi jika browser saat ini mendukungnya. Oleh karena itu, aman untuk memanggil enable() tanpa syarat di pekerja layanan Anda.

Anda harus menyadari bahwa browser tersebut tidak akan mendapatkan manfaat dari pengurangan latensi navigasi, dan sebaiknya Anda mengukur dengan cermat implikasi performa pengiriman pekerja layanan yang tidak menangani permintaan navigasi, dan tidak menggunakan pramuat navigasi.

workbox-navigation-preload.disable()

workbox-navigation-preload.enable(
  headerValue?: string,
)

workbox-navigation-preload.isSupported()