đị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. Trợ lý có thể phản hồi với trình duyệt có 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 khác nhau cung cấp phản hồi.

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

Khi một yêu cầu mạng gây ra 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ác tuyến và trình xử lý được cung cấp.

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

• Phương thức của yêu cầu là một yếu tố quan trọng. Theo mặc định, Tuyến đường được đăng ký cho GET yêu cầu. 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à rất quan trọng. Nếu có nhiều Tuyến đường đã đăng ký có thể xử lý yêu cầu, 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ý một tuyến: bạn có thể sử dụng các lệnh gọi lại, biểu thức hoặc bản sao Tuyến đường.

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

Một "tuyến đường" trong hộp công việc chỉ là hai chức năng: "phù hợp" hàm để xác định xem tuyến đường có phù hợp với yêu cầu và "xử lý" không hàm, 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ý bạn, nhưng nếu bạn muốn có một hành vi khác, hãy viết kết hợp tuỳ chỉnh và chức năng trình xử lý là lựa chọn tốt nhất.

Đáp khớp hàm callback được truyền một ExtendableEvent! Request và một URL đối tượng bạn có thể 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ể, chẳng hạn như:

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

Hầu hết các trường hợp sử dụng đều có thể được kiểm tra bằng cách kiểm tra / kiểm thử url hoặc request

Đáp hàm callback xử lý sẽ được cấp cùng một ExtendableEvent! Request và URL đối tượng cùng với giá trị params, là giá trị được lệnh "khớp" 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 phần này Ví dụ: chúng tôi đang sử dụng async và await. Về sau, giá trị Response trả về sẽ được gói gọn 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à "sự trùng khớp" lệnh gọi lại phải đồng bộ trả về giá trị trung thực , bạn không thể thực hiện bất kỳ công việc không đồng bộ nào. Lý do là Router phải phản hồi một cách đồng bộ với sự kiện tìm nạp hoặc cho phép rơi đến các sự kiện tìm nạp khác.

Thường là "handler" lệnh gọi lại sẽ sử dụng một trong các chiến lược được cung cấp theo workbox-strategy như sau:

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

registerRoute(matchCb, new StaleWhileRevalidate());

Trong trang này, chúng tôi sẽ tập trung vào workbox-routing nhưng bạn có thể tìm hiểu thêm về các chiến lược này đối với 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

Phương pháp phổ biến là sử dụng biểu thức chính quy thay vì "so 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 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 trên 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 chắc chắn rằng với biểu thức chính quy new RegExp('/styles/.*\\.css') mà bạn dự đị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 có muốn hành vi này, bạn chỉ cần đảm bảo rằng quy tắc khớp với phần đầu của URL. Nếu chúng tôi muốn phù hợp với cho https://cdn.third-party-site.com, chúng ta có thể sử dụng toán tử thông thường biểu thức 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 với cả bên địa phương 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 thao tác này để đảm bảo không gây ra hành vi không mong muốn trong ứng dụng web của bạn.

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

Nếu trang web của bạn là ứng dụng trang đơn, bạn có thể sử dụng NavigationRoute đến trả về một phản hồi cụ thể cho tất cả yêu cầu chỉ đườ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 cho trang đó sẽ là yêu cầu điều hướng và nó sẽ được phân phát trang được lưu vào 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 riêng).

Theo mặc định, lệnh này sẽ phản hồi tất cả các yêu cầu điều hướng. Nếu bạn muốn để hạn chế lệnh đó phản hồi một nhóm nhỏ URL, bạn có thể sử dụng allowlist và denylist để hạn chế những trang nào 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ẽ giành chiến thắng nếu một URL nằm trong cả hai allowlist và denylist.

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

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

import {setDefaultHandler} from 'workbox-routing';

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

Đặt trình xử lý bắt

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

import {setCatchHandler} from 'workbox-routing';

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

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

Theo mặc định, tất cả các tuyến đều 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 phải xác định được luồng yêu cầu bằng cách sử dụng nhật ký từ workbox-routing sẽ đánh dấu những URL đ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 thành xem nhật ký trên các yêu cầu không được Bộ định tuyến xử lý. Xem hướng dẫn gỡ lỗi để biết thêm thông tin về đặt cấp độ nhật ký.

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

Nếu bạn muốn có nhiều quyền kiểm soát hơn đối với thời điểm Bộ định tuyến hộp làm việc được cung cấp các yêu cầu của riêng mình, bạn có thể tạo Thực thể và lệnh gọi Router thời điểm hiện tại là handleRequest() bất cứ khi nào bạn muốn sử dụng bộ định tuyến để phản hồi một 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ý 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,
)