Dùng API Định tuyến tĩnh cho Service Worker để bỏ qua trình chạy dịch vụ đối với các đường dẫn cụ thể

Rachel Andrew

Kể từ Chrome 123, bạn có thể sử dụng Service Worker Static Routing API. API này cho phép bạn khai báo cách tìm nạp một số đường dẫn tài nguyên nhất định, tức là trình duyệt không cần chạy trình chạy dịch vụ chỉ để tìm nạp các phản hồi từ bộ nhớ đệm hoặc trực tiếp từ mạng. API này đã được dùng thử theo nguyên gốc kể từ Chrome 116 và bài đăng này trình bày chi tiết về việc ra mắt API trong Chrome 123.

Sử dụng API

Để sử dụng lệnh gọi API event.addRoutes trên sự kiện install của worker dịch vụ. Truyền cho phương thức này một danh sách các tuyến đường, với các thuộc tính sau:

condition
Chỉ định thời điểm áp dụng quy tắc. Chấp nhận các thuộc tính sau:
  • urlPattern: Một thực thể URLPattern hoặc một chuỗi đại diện cho URLPattern hợp lệ có thể được truyền vào hàm khởi tạo URLPattern.
  • requestMethod: Một chuỗi chứa phương thức Yêu cầu.
  • requestMode: Một chuỗi chứa chế độ Yêu cầu.
  • requestDestination: Một chuỗi chứa đích đến của Yêu cầu.
  • runningStatus: một chuỗi, có thể là "running" hoặc "not-running". Trạng thái này cho biết trạng thái đang chạy của trình chạy dịch vụ.
source
Chỉ định cách tải các tài nguyên khớp với condition. Một trong những chuỗi sau:
  • "network"
  • "cache"
  • "fetch-event"
  • "race-network-and-fetch-handler"

Trong ví dụ sau, những URL bắt đầu bằng "/articles" sẽ được chuyển đến trình thực thi dịch vụ nếu trình thực thi này đang chạy. Khi có nhiều điều kiện, ví dụ: urlPattern và runningStatus, tất cả điều kiện phải được đáp ứng thì tuyến đường mới được sử dụng.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {

          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

Trong ví dụ sau, các bài đăng vào biểu mẫu sẽ được gửi trực tiếp đến mạng và bỏ qua worker dịch vụ.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/form/*",
          requestMethod: "post"
    },
    source: "network"
  });
});

Trong ví dụ sau, bộ nhớ đệm có tên "pictures" được dùng để tìm nạp các tệp có đuôi .png hoặc .jpg.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
      or: [
        {urlPattern: "*.png"},
        {urlPattern: "*.jpg"}
      ]
    },
    source: {
      cacheName: "pictures"
    }
  });
});

Các thay đổi so với bản dùng thử theo nguyên gốc

Thử nghiệm nguồn gốc ban đầu dùng InstallEvent.registerRouter() thay vì InstallEvent.addRoutes(), phương thức registerRouter() chỉ có thể được gọi một lần. Thay đổi này dựa trên ý kiến phản hồi của cộng đồng về thử nghiệm nguồn gốc.

API mới này cũng tận dụng các thay đổi đối với URLPattern được giới thiệu trong Chrome 121, bổ sung khả năng chỉ định phương thức, chế độ và đích đến của yêu cầu, đồng thời bổ sung các lựa chọn khác về nguồn.

Hỗ trợ trong Công cụ của Chrome cho nhà phát triển

Các quy tắc về bộ định tuyến đã đăng ký sẽ xuất hiện trong thẻ Service Worker của bảng Application (Ứng dụng).

Các quy tắc về bộ định tuyến được làm nổi bật trong bảng điều khiển Ứng dụng.

Trong bảng điều khiển Mạng, nếu yêu cầu khớp với quy tắc đã đăng ký, thì điều này sẽ được chỉ ra trong cột kích thước. Khi giữ con trỏ trên cột kích thước, mã nhận dạng bộ định tuyến đã đăng ký sẽ xuất hiện. Các quy tắc tương ứng sẽ xuất hiện trong thẻ ứng dụng.

Mã nhận dạng bộ định tuyến xuất hiện trong bảng điều khiển Mạng.