perutean kotak kerja

Pekerja layanan dapat mencegat permintaan jaringan untuk halaman. Aplikasi mungkin merespons browser dengan konten yang di-cache, konten dari jaringan, atau konten yang dihasilkan dalam pekerja layanan.

workbox-routing adalah modul yang memudahkan "rute" permintaan-permintaan ini untuk fungsi berbeda yang memberikan respons.

Bagaimana {i>Routing<i} Dilakukan

Jika permintaan jaringan menyebabkan peristiwa pengambilan pekerja layanan, workbox-routing akan mencoba merespons permintaan menggunakan rute dan handler yang disediakan.

Hal-hal utama yang perlu diperhatikan dari penjelasan di atas adalah:

• Metode permintaan itu penting. Secara {i>default<i}, Rute didaftarkan untuk GET permintaan. Jika ingin mencegat jenis permintaan lain, Anda harus untuk menetapkan metode.

• Urutan pendaftaran Rute penting. Jika ada beberapa Rute terdaftar yang dapat menangani permintaan, Rute yang didaftarkan terlebih dahulu akan digunakan untuk merespons permintaan.

Ada beberapa cara untuk mendaftarkan rute: Anda bisa menggunakan callback, reguler atau Routes.

Pencocokan dan Penanganan dalam Rute

"Rute" dalam kotak kerja tidak lebih dari dua fungsi: "pencocokan" fungsi untuk menentukan apakah rute harus sesuai dengan permintaan dan "penanganan" fungsi, yang harus menangani permintaan dan merespons dengan respons.

{i>Workbox<i} dilengkapi dengan beberapa {i>helper<i} yang akan melakukan pencocokan dan penanganan untuk tetapi jika Anda mendapati diri Anda menginginkan perilaku yang berbeda, menulis pencocokan kustom dan fungsi pengendali adalah opsi terbaik.

J fungsi callback yang cocok diberi akses ExtendableEvent, Request, dan URL objek yang dapat Anda pencocokan dengan menampilkan nilai yang benar. Untuk contoh sederhana, Anda bisa mencocokkan dengan URL tertentu seperti berikut:

const matchCb = ({url, request, event}) => {
  return url.pathname === '/special/url';
};

Sebagian besar kasus penggunaan dapat dicakup dengan memeriksa / menguji url atau request.

J fungsi callback pengendali akan diberikan ExtendableEvent, Request, dan URL objek beserta nilai params, yaitu nilai yang dikembalikan oleh "kecocokan" .

const handlerCb = async ({url, request, event, params}) => {
  const response = await fetch(request);
  const responseBody = await response.text();
  return new Response(`${responseBody} <!-- Look Ma. Added Content. -->`, {
    headers: response.headers,
  });
};

Pengendali Anda harus menampilkan promise yang di-resolve ke Response. Di sini misalnya, kita menggunakan async dan await. Di balik layar, nilai Response yang ditampilkan akan digabungkan dalam promise.

Anda bisa mendaftarkan callback ini seperti:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

Satu-satunya batasan adalah bahwa "kecocokan" callback harus secara sinkron menampilkan kebenaran nilai, Anda tidak dapat melakukan pekerjaan asinkron apa pun. Alasannya adalah karena Router harus merespons peristiwa pengambilan secara sinkron atau memungkinkan penurunan ke peristiwa pengambilan lainnya.

Biasanya "pengendali" akan menggunakan salah satu strategi yang disediakan dengan strategi-workbox seperti itu:

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(matchCb, new StaleWhileRevalidate());

Di halaman ini, kita akan berfokus pada workbox-routing tetapi Anda dapat pelajari strategi-strategi workbox ini lebih lanjut.

Cara Mendaftarkan Rute Ekspresi Reguler

Praktik yang umum adalah menggunakan ekspresi reguler alih-alih "kecocokan" . Workbox memudahkan penerapan seperti berikut:

import {registerRoute} from 'workbox-routing';

registerRoute(new RegExp('/styles/.*\\.css'), handlerCb);

Untuk permintaan dari origin yang sama, ekspresi reguler ini akan cocok selama URL permintaan cocok dengan ekspresi reguler.

• https://example.com/styles/main.css
• https://example.com/styles/nested/file.css
• https://example.com/nested/styles/directory.css

Namun, untuk permintaan lintas origin, ekspresi reguler harus cocok dengan awal URL. Alasannya adalah kemungkinannya adalah dengan ekspresi reguler new RegExp('/styles/.*\\.css') yang ingin Anda cocokkan dengan file CSS pihak ketiga.

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

Jika Anda memang menginginkan perilaku ini, Anda hanya perlu memastikan bahwa cocok dengan bagian awal URL. Jika kita ingin mencocokkan permintaan untuk https://cdn.third-party-site.com, kita dapat menggunakan ekspresi new RegExp('https://cdn\\.third-party-site\\.com.*/styles/.*\\.css').

• https://cdn.third-party-site.com/styles/main.css
• https://cdn.third-party-site.com/styles/nested/file.css
• https://cdn.third-party-site.com/nested/styles/directory.css

Jika Anda ingin mencocokkan pihak lokal dan ketiga, Anda dapat menggunakan karakter pengganti di awal ekspresi reguler, tetapi ini harus dilakukan dengan hati-hati untuk memastikan hal itu tidak menyebabkan perilaku yang tak terduga di aplikasi web Anda.

Cara Mendaftarkan Rute Navigasi

Jika situs Anda adalah aplikasi web satu halaman, Anda dapat menggunakan NavigationRoute ke menampilkan respons spesifik untuk semua permintaan navigasi.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler);
registerRoute(navigationRoute);

Setiap kali pengguna mengunjungi situs Anda di browser, permintaan untuk halaman tersebut akan menjadi permintaan navigasi dan akan menayangkan halaman yang di-cache /app-shell.html. (Catatan: Anda seharusnya memiliki halaman yang di-cache melalui workbox-precaching atau melalui langkah penginstalan sendiri.)

Secara default, opsi ini akan merespons semua permintaan navigasi. Jika Anda ingin membatasinya untuk merespons subkumpulan URL, Anda dapat menggunakan allowlist dan denylist opsi untuk membatasi halaman yang akan cocok dengan rute ini.

import {createHandlerBoundToURL} from 'workbox-precaching';
import {NavigationRoute, registerRoute} from 'workbox-routing';

// This assumes /app-shell.html has been precached.
const handler = createHandlerBoundToURL('/app-shell.html');
const navigationRoute = new NavigationRoute(handler, {
  allowlist: [new RegExp('/blog/')],
  denylist: [new RegExp('/blog/restricted/')],
});
registerRoute(navigationRoute);

Satu-satunya hal yang perlu diperhatikan adalah denylist akan menang jika URL berada di kedua allowlist dan denylist.

Menetapkan Pengendali Default

Jika Anda ingin menyediakan "pengendali" untuk permintaan yang tidak cocok dengan rute, Anda dapat menetapkan pengendali default.

import {setDefaultHandler} from 'workbox-routing';

setDefaultHandler(({url, event, params}) => {
  // ...
});

Menetapkan Pengendali Penangkap

Jika ada kesalahan pada rute Anda, Anda dapat menangkap dan melakukan degradasi secara halus dengan mengatur pengendali tangkapan.

import {setCatchHandler} from 'workbox-routing';

setCatchHandler(({url, event, params}) => {
  ...
});

Menentukan Rute untuk Permintaan Non-GET

Semua rute secara default diasumsikan untuk permintaan GET.

Jika ingin mengarahkan permintaan lain, seperti permintaan POST, Anda harus untuk menentukan metode saat mendaftarkan rute, seperti berikut:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb, 'POST');
registerRoute(new RegExp('/api/.*\\.json'), handlerCb, 'POST');

Logging Router

Anda seharusnya dapat menentukan aliran permintaan menggunakan log dari workbox-routing yang akan menandai URL mana yang sedang diproses melalui Workbox.

Jika memerlukan informasi yang lebih panjang, Anda dapat menyetel level log ke debug untuk melihat log pada permintaan yang tidak ditangani oleh Router. Baca panduan proses debug untuk info selengkapnya tentang mengatur level log.

Penggunaan Lanjutan

Jika Anda ingin memiliki kontrol lebih besar saat Router Workbox diberikan permintaan, Anda dapat membuat Instance Router dan panggilan pukul handleRequest() kapan saja Anda ingin menggunakan {i>router<i} untuk merespons permintaan.

import {Router} from 'workbox-routing';

const router = new Router();

self.addEventListener('fetch', event => {
  const {request} = event;
  const responsePromise = router.handleRequest({
    event,
    request,
  });
  if (responsePromise) {
    // Router found a route to handle the request.
    event.respondWith(responsePromise);
  } else {
    // No route was found to handle the request.
  }
});

Saat menggunakan Router secara langsung, Anda juga perlu menggunakan class Route, atau salah satu class yang diperluas untuk mendaftarkan rute.

import {Route, RegExpRoute, NavigationRoute, Router} from 'workbox-routing';

const router = new Router();
router.registerRoute(new Route(matchCb, handlerCb));
router.registerRoute(new RegExpRoute(new RegExp(...), handlerCb));
router.registerRoute(new NavigationRoute(handlerCb));

workbox-routing.registerRoute(
  capture: string | RegExp | RouteMatchCallback | Route,
  handler?: RouteHandler,
  method?: HTTPMethod,
): Route

workbox-routing.setCatchHandler(
  handler: RouteHandler,
): void

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
): void