pramuat-navigasi kotak kerja

"Mempercepat Pekerja Layanan dengan Pramuat Navigasi" berhasil menjelaskan apa itu pramuat navigasi, dan manfaat yang ditawarkannya untuk aplikasi web yang pekerja layanannya 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. Jika mendukung, browser akan otomatis membuat pengendali peristiwa activate untuk mengaktifkannya.

Kode bersama di dalam workbox-core yang menangani pembuatan permintaan jaringan di semua Workbox juga telah diupdate untuk memanfaatkan respons pramuat secara otomatis, jika tersedia. Artinya, 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 menggunakan HTML yang telah di-cache (kemungkinan dikonfigurasi dengan penggantian App Shell) 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 caching aset lain di situs mereka.

Misalnya, jika Anda mengikuti pola App Shell, dan sudah menyiapkan rute navigasi untuk menggunakan HTML yang telah di-cache, mengaktifkan pramuat navigasi akan sia-sia. Respons jaringan yang terkait dengan permintaan pramuat tidak akan pernah digunakan, karena HTML yang di-cache 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 kisah dukungan browser?

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

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

Metode

disable()

workbox-navigation-preload.disable()

Jika browser mendukung Pramuat Navigasi, tindakan ini akan menonaktifkannya.

enable()

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

Jika browser mendukung Pramuat Navigasi, tindakan ini akan mengaktifkannya.

Parameter

• headerValue

  string opsional

isSupported()

workbox-navigation-preload.isSupported()

Hasil

• boolean

  Apakah browser saat ini mendukung pengaktifan pramuat navigasi atau tidak.