InstallEvent: addRoutes() method

Cú pháp

addRoutes(routerRules)

Tham số

routerRules

Một đối tượng đơn lẻ, hoặc một mảng gồm một hoặc nhiều đối tượng, đại diện cho các quy tắc về cách tải một số tài nguyên nhất định. Mỗi đối tượng routerRules chứa các thuộc tính sau:

condition

Một đối tượng định nghĩa một hoặc nhiều điều kiện chỉ định tài nguyên nào khớp với quy tắc này. Các thuộc tính sau có thể được bao gồm; nếu nhiều thuộc tính được sử dụng, tài nguyên phải đáp ứng tất cả các điều kiện được chỉ định để khớp với quy tắc.

not Optional

Một đối tượng condition định nghĩa các điều kiện không được đáp ứng để khớp với quy tắc. Các điều kiện định nghĩa bên trong điều kiện not loại trừ lẫn nhau với các điều kiện khác.

or Optional

Một mảng các đối tượng condition. Một tập hợp các điều kiện được định nghĩa phải được đáp ứng để khớp với quy tắc. Các điều kiện định nghĩa bên trong điều kiện or loại trừ lẫn nhau với các điều kiện khác.

requestMethod Optional

Một chuỗi đại diện cho phương thức HTTP mà yêu cầu phải được gửi để khớp với quy tắc, ví dụ "get", "put", hoặc "head".

requestMode Optional

Một chuỗi đại diện cho chế độ mà yêu cầu phải có để khớp với quy tắc, ví dụ "same-origin", "no-cors", hoặc "cors".

requestDestination Optional

Một chuỗi đại diện cho đích của yêu cầu, tức là loại nội dung được yêu cầu, để khớp với quy tắc. Ví dụ bao gồm "audio", "document", "script", và "worker".

runningStatus Optional

Một giá trị liệt kê đại diện cho trạng thái chạy cần thiết của service worker để yêu cầu khớp với quy tắc. Các giá trị có thể là "running" hoặc "not-running".

urlPattern Optional

Một đối tượng URLPattern, hoặc mẫu input của hàm khởi tạo URLPattern() đại diện cho các URL khớp với quy tắc. Không cho phép nhóm biểu thức chính quy, vì vậy URLPattern.hasRegExpGroups phải là false.

source

Một giá trị liệt kê hoặc một đối tượng chỉ định nguồn mà tài nguyên phù hợp sẽ được tải. Các giá trị liệt kê có thể là:

"cache"

Tài nguyên sẽ được tải từ Cache của trình duyệt.

"fetch-event"

Tài nguyên sẽ được tải qua trình xử lý sự kiện fetch của service worker. Có thể kết hợp với điều kiện "runningStatus" để tải tài nguyên từ service worker nếu đang chạy và chuyển sang tuyến tĩnh trên mạng nếu không chạy.

"network"

Tài nguyên sẽ được tải từ mạng.

"race-network-and-fetch-handler"

Các lần thử tải tài nguyên từ mạng và từ trình xử lý sự kiện fetch của service worker được thực hiện đồng thời. Cái nào hoàn thành trước sẽ được sử dụng.

Giá trị source cũng có thể được đặt thành một đối tượng chứa một thuộc tính duy nhất, cacheName, có giá trị là một chuỗi đại diện cho tên của Cache của trình duyệt. Tài nguyên phù hợp sẽ được tải từ cache được đặt tên cụ thể này nếu tồn tại.

Giá trị trả về

Một Promise thực hiện với undefined.

Ngoại lệ

TypeError DOMException

Ném ra nếu một hoặc nhiều đối tượng quy tắc bên trong routerRules không hợp lệ, hoặc có giá trị source là "fetch-event" khi service worker liên quan không có trình xử lý sự kiện fetch. Cũng ném ra nếu bạn cố kết hợp or với loại điều kiện khác.

Ví dụ

Định tuyến các yêu cầu cụ thể đến mạng nếu service worker không chạy

Trong ví dụ sau, các URL bắt đầu bằng /articles được định tuyến đến mạng nếu service worker hiện không chạy:

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      urlPattern: "/articles/*",
      runningStatus: "not-running",
    },
    source: "network",
  });
});

Định tuyến các yêu cầu POST của biểu mẫu đến mạng

Trong ví dụ sau, các yêu cầu POST đến một biểu mẫu được gửi trực tiếp đến mạng và bỏ qua service worker:

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

Định tuyến các yêu cầu loại hình ảnh nhất định đến cache được đặt tên

Trong ví dụ sau, Cache của trình duyệt tên "pictures" được sử dụng để tải các tệp có phần mở rộng .png hoặc .jpg:

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

Bạn không thể kết hợp or với điều kiện khác, vì điều này dẫn đến TypeError. Ví dụ, nếu bạn muốn khớp các tệp có phần mở rộng .png hoặc .jpg nhưng chỉ khi requestMethod là get, bạn cần chỉ định hai điều kiện riêng biệt:

addEventListener("install", (event) => {
  event.addRoutes(
    {
      condition: {
        urlPattern: "*.png",
        requestMethod: "get",
      },
      source: {
        cacheName: "pictures",
      },
    },
    {
      condition: {
        urlPattern: "*.jpg",
        requestMethod: "get",
      },
      source: {
        cacheName: "pictures",
      },
    },
  );
});

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• InstallEvent
• sự kiện install
• Service Worker API
• Use the Service Worker Static Routing API to bypass the service worker for specific paths on developer.chrome.com (2024)