định tuyến hộp công việc

Trình chạy dịch vụ có thể chặn các yêu cầu mạng cho một trang. Dịch vụ này có thể phản hồi trình duyệt bằng nội dung được lưu vào bộ nhớ đệm, nội dung từ mạng hoặc nội dung được tạo trong trình chạy dịch vụ.

workbox-routing là một mô-đun giúp bạn dễ dàng "định tuyến" những yêu cầu này đến các hàm cung cấp phản hồi.

Cách thực hiện việc định tuyến

Khi yêu cầu mạng gây ra một sự kiện tìm nạp trình chạy dịch vụ, workbox-routing sẽ cố gắng phản hồi yêu cầu bằng cách sử dụng các tuyến và trình xử lý đã cung cấp.

Những điều chính cần lưu ý về những điều trên là:

• Phương thức của yêu cầu rất quan trọng. Theo mặc định, Tuyến đường được đăng ký cho các yêu cầu GET. Nếu muốn chặn các loại yêu cầu khác, bạn cần chỉ định phương thức.

• Thứ tự đăng ký Tuyến đường là quan trọng. Nếu bạn đăng ký nhiều Tuyến đường có thể xử lý một yêu cầu, thì Tuyến được đăng ký trước sẽ được dùng để phản hồi yêu cầu.

Có một số cách để đăng ký tuyến: bạn có thể dùng lệnh gọi lại, biểu thức chính quy hoặc thực thể Tuyến đường.

So khớp và xử lý trên tuyến đường

"Tuyến" trong hộp công việc chỉ có hai chức năng: hàm "phù hợp" để xác định xem tuyến có khớp với một yêu cầu và chức năng "xử lý" hay không. Hàm này sẽ xử lý yêu cầu và phản hồi bằng một phản hồi.

Workbox đi kèm với một số trình trợ giúp sẽ thực hiện việc so khớp và xử lý cho bạn, nhưng nếu bạn thấy mình muốn có hành vi khác, thì tốt nhất là viết hàm so khớp và trình xử lý tuỳ chỉnh.

Hàm callback so khớp được truyền ExtendableEvent, Request và URL đối tượng mà bạn có thể so khớp bằng cách trả về một giá trị trung thực. Ví dụ đơn giản, bạn có thể so khớp với một URL cụ thể như sau:

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

Bạn có thể xử lý hầu hết các trường hợp sử dụng bằng cách kiểm tra / kiểm thử url hoặc request.

Hàm gọi lại trình xử lý sẽ được cung cấp cùng một ExtendableEvent, Request và URL đối tượng cùng với giá trị params. Đây là giá trị được hàm "match" trả về.

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,
  });
};

Trình xử lý của bạn phải trả về một lời hứa phân giải thành Response. Trong ví dụ này, chúng tôi sẽ sử dụng async và await. Trong trường hợp này, giá trị trả về Response sẽ được gói trong một lời hứa.

Bạn có thể đăng ký các lệnh gọi lại này như sau:

import {registerRoute} from 'workbox-routing';

registerRoute(matchCb, handlerCb);

Hạn chế duy nhất là lệnh gọi lại "match" (khớp) phải đồng bộ trả về một giá trị đáng tin cậy, bạn không thể thực hiện bất kỳ thao tác không đồng bộ nào. Lý do là vì Router phải phản hồi đồng bộ sự kiện tìm nạp hoặc cho phép chuyển sang các sự kiện tìm nạp khác.

Thông thường, lệnh gọi lại "xử lý" sẽ sử dụng một trong các chiến lược do chiến lược hộp công việc cung cấp như sau:

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

registerRoute(matchCb, new StaleWhileRevalidate());

Trên trang này, chúng ta sẽ tập trung vào workbox-routing. Tuy nhiên, bạn có thể tìm hiểu thêm về các chiến lược này trong các chiến lược hộp công việc.

Cách đăng ký tuyến biểu thức chính quy

Một phương pháp phổ biến là sử dụng biểu thức chính quy thay vì lệnh gọi lại "khớp". Workbox giúp bạn dễ dàng triển khai như sau:

import {registerRoute} from 'workbox-routing';

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

Đối với các yêu cầu từ cùng một nguồn gốc, biểu thức chính quy này sẽ khớp, miễn là URL của yêu cầu khớp với biểu thức chính quy.

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

Tuy nhiên, đối với các yêu cầu nhiều nguồn gốc, biểu thức chính quy phải khớp với phần đầu của URL. Lý do là vì không có khả năng biểu thức chính quy new RegExp('/styles/.*\\.css') mà bạn định so khớp với các tệp CSS của bên thứ ba.

• 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

Nếu đã muốn có hành vi này, bạn chỉ cần đảm bảo rằng biểu thức chính quy khớp với phần đầu của URL. Nếu muốn so khớp các yêu cầu cho https://cdn.third-party-site.com, chúng ta có thể sử dụng biểu thức chính quy 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

Nếu muốn so khớp cả bên cục bộ và bên thứ ba, bạn có thể sử dụng ký tự đại diện ở đầu biểu thức chính quy, nhưng bạn nên thận trọng khi thực hiện để đảm bảo không gây ra các hành vi không mong muốn trong ứng dụng web của mình.

Cách đăng ký tuyến điều hướng

Nếu trang web của bạn là ứng dụng trang đơn, bạn có thể dùng NavigationRoute để trả về một phản hồi cụ thể cho tất cả yêu cầu điều hướng.

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);

Bất cứ khi nào người dùng truy cập vào trang web của bạn trong trình duyệt, yêu cầu đối với trang sẽ là một yêu cầu điều hướng và sẽ được phân phát đến trang đã lưu trong bộ nhớ đệm /app-shell.html. (Lưu ý: Bạn nên lưu trang vào bộ nhớ đệm qua workbox-precaching hoặc qua bước cài đặt của riêng bạn.)

Theo mặc định, thao tác này sẽ phản hồi tất cả các yêu cầu chỉ đường. Nếu muốn hạn chế URL này phản hồi một nhóm nhỏ URL, bạn có thể sử dụng các tuỳ chọn allowlist và denylist để hạn chế những trang sẽ khớp với tuyến này.

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);

Điều duy nhất cần lưu ý là denylist sẽ thắng nếu một URL nằm trong cả allowlist và denylist.

Đặt trình xử lý mặc định

Nếu muốn cung cấp "trình xử lý" cho các yêu cầu không khớp với tuyến đường, bạn có thể đặt trình xử lý mặc định.

import {setDefaultHandler} from 'workbox-routing';

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

Thiết lập Trình xử lý bắt (catch Handler)

Trong trường hợp bất kỳ tuyến nào của bạn gặp lỗi, bạn có thể nắm bắt và xuống cấp nhẹ bằng cách thiết lập trình xử lý phát hiện.

import {setCatchHandler} from 'workbox-routing';

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

Xác định tuyến cho các yêu cầu không GET

Tất cả các tuyến theo mặc định đều được giả định là dành cho các yêu cầu GET.

Nếu muốn định tuyến các yêu cầu khác, chẳng hạn như yêu cầu POST, bạn cần xác định phương thức khi đăng ký tuyến, như sau:

import {registerRoute} from 'workbox-routing';

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

Ghi nhật ký bộ định tuyến

Bạn có thể xác định luồng yêu cầu bằng cách sử dụng nhật ký từ workbox-routing, nhật ký này sẽ làm nổi bật URL nào đang được xử lý thông qua Workbox.

Nếu cần thông tin chi tiết hơn, bạn có thể đặt cấp độ nhật ký thành debug để xem nhật ký về các yêu cầu không do Bộ định tuyến xử lý. Xem hướng dẫn gỡ lỗi của chúng tôi để biết thêm thông tin về cách đặt cấp độ nhật ký.

Cách sử dụng nâng cao

Nếu muốn có thêm quyền kiểm soát đối với thời điểm Bộ định tuyến Workbox được đưa ra yêu cầu, bạn có thể tạo thực thể Router riêng và gọi phương thức handleRequest() của nó bất cứ khi nào bạn muốn dùng bộ định tuyến để phản hồi yêu cầu.

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.
  }
});

Khi sử dụng trực tiếp Router, bạn cũng cần dùng lớp Route hoặc bất kỳ lớp mở rộng nào để đăng ký các tuyến.

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,
)

workbox-routing.setCatchHandler(
  handler: RouteHandler,
)

workbox-routing.setDefaultHandler(
  handler: RouteHandler,
)