Workbox

Việc duy trì trình chạy dịch vụ và logic bộ nhớ đệm có thể là một thách thức khi PWA của bạn phát triển. Workbox là một tập hợp các thư viện nguồn mở giúp bạn làm việc đó. Workbox đóng gói các API cấp thấp, chẳng hạn như API Trình chạy dịch vụ và API Bộ nhớ đệm, đồng thời hiển thị thêm nhiều giao diện thân thiện với nhà phát triển hơn.

Một số nhiệm vụ có thể hỗ trợ là so khớp chiến lược lưu vào bộ nhớ đệm với đường dẫn (hoặc mẫu định tuyến), xử lý luồng và sử dụng các tính năng như đồng bộ hoá trong nền với phương án dự phòng phù hợp.

Workbox có thể giúp bạn quản lý nhu cầu phân phát và lưu nội dung vào bộ nhớ đệm. Đây cũng là thư viện được sử dụng nhiều nhất cho trình chạy dịch vụ; được 54% các trang web dành cho thiết bị di động sử dụng và được sử dụng trong nhiều công cụ xây dựng và CLI, bao gồm cả Angular CLI, Create-React-App và Vue CLI. Hầu hết các thư viện và khung khác cũng có các trình bổ trợ, chẳng hạn như Next.js.

54_%

Các trang web dành cho thiết bị di động có trình chạy dịch vụ sẽ sử dụng thư viện Workbox

Lưu ý: Mặc dù Workbox là bộ thư viện phổ biến nhất dành cho trình chạy dịch vụ trong cộng đồng PWA, nhưng vẫn có các giải pháp khác như sw-tools và UpUp

Mô-đun hộp công việc

Workbox bao gồm một số thư viện (gọi là mô-đun nội bộ) mỗi thư viện tập trung vào một khía cạnh khác trong việc quản lý tài sản và hành vi của trình chạy dịch vụ.

Mô-đun hộp công việc hoạt động trong nhiều ngữ cảnh, chẳng hạn như:

• Trong ngữ cảnh trình chạy dịch vụ: bạn nhập các mô-đun mình cần và sử dụng các mô-đun đó từ tệp trình chạy dịch vụ, chẳng hạn như để giúp quản lý việc lưu vào bộ nhớ đệm và phân phát tệp bằng nhiều chiến lược.
• Trong ngữ cảnh window chính: giúp đăng ký một nhân viên dịch vụ và giao tiếp với nhân viên đó
• Là một phần của hệ thống xây dựng: chẳng hạn như gói web để tạo tệp kê khai tài sản hoặc thậm chí là tạo toàn bộ trình chạy dịch vụ.

Một số mô-đun phổ biến là:

• định tuyến hộp công việc: Khi trình chạy dịch vụ chặn các yêu cầu, mô-đun này sẽ chuyển những yêu cầu đó đến nhiều hàm cung cấp phản hồi; đó là cách triển khai trình xử lý sự kiện fetch như đã đề cập trong Chương phân phối.
• chiến lược hộp công việc: Một nhóm các chiến lược lưu vào bộ nhớ đệm trong thời gian chạy giúp xử lý việc phản hồi một yêu cầu, chẳng hạn như lưu vào bộ nhớ đệm trước và lỗi thời trong khi xác thực lại. Đây là cách triển khai các chiến lược khác nhau được đề cập trong chương Phân phát.
• Workbox-precaching: Đây là cách triển khai các tệp lưu vào bộ nhớ đệm trong trình xử lý sự kiện install của trình chạy dịch vụ (còn gọi là lưu trước vào bộ nhớ đệm), như đã đề cập trong chương vào Bộ nhớ đệm. Với mô-đun này, bạn có thể dễ dàng lưu trước một tập hợp tệp vào bộ nhớ đệm và quản lý hiệu quả các bản cập nhật cho những tài sản đó. Chúng ta sẽ đề cập đến việc cập nhật tài sản trong chương Cập nhật.
• workbox-expiration (hết hạn hộp công việc): Đây là một trình bổ trợ được dùng cùng với các chiến lược lưu vào bộ nhớ đệm để xoá các yêu cầu đã lưu vào bộ nhớ đệm dựa trên số lượng mục trong bộ nhớ đệm hoặc dựa trên thời gian của yêu cầu được lưu vào bộ nhớ đệm. Dịch vụ này giúp quản lý bộ nhớ đệm của bạn và đặt giới hạn về thời gian cũng như số mục trong mỗi bộ nhớ đệm.
• workbox-window (cửa sổ hộp công việc): Một tập hợp các mô-đun dự định chạy trong ngữ cảnh cửa sổ, tức là bên trong trang web PWA. Bạn có thể đơn giản hoá quá trình đăng ký và cập nhật trình chạy dịch vụ, đồng thời cho phép việc giao tiếp dễ dàng hơn giữa mã chạy trong ngữ cảnh trình chạy dịch vụ và trong ngữ cảnh cửa sổ.

Sử dụng Workbox

Workbox cung cấp nhiều cách để tích hợp vào PWA của bạn. Bạn có thể chọn kiểu phù hợp nhất với cấu trúc ứng dụng của mình:

• Workbox CLI: Một tiện ích dòng lệnh giúp tạo một trình chạy dịch vụ hoàn chỉnh, chèn một tệp kê khai trước bộ nhớ đệm hoặc sao chép các tệp Workbox cần thiết.
• Workbox Build: Một mô-đun npm tạo ra một trình chạy dịch vụ hoàn chỉnh, chèn một tệp kê khai bộ nhớ đệm trước và sao chép các tệp Workbox. Thư viện này được tích hợp với quy trình xây dựng của riêng bạn.
• workbox-sw: Một cách để tải các gói trình chạy dịch vụ Workbox từ CDN mà không sử dụng quy trình xây dựng.

Workbox CLI cung cấp trình hướng dẫn để hướng dẫn bạn từng bước tạo trình chạy dịch vụ. Để chạy trình hướng dẫn, hãy nhập nội dung sau vào dòng lệnh:

npx workbox-cli wizard

Lưu vào bộ nhớ đệm và phân phát bằng Workbox

Workbox có một cách sử dụng phổ biến là dùng các mô-đun định tuyến và chiến lược cùng lúc để lưu tệp vào bộ nhớ đệm và phân phát tệp.

Chiến lược hộp công cụ của học phần này cung cấp ngay các chiến lược lưu vào bộ nhớ đệm được thảo luận trong các chương Tài sản và dữ liệu và Phân phát.

Mô-đun định tuyến hộp công việc giúp sắp xếp các yêu cầu gửi đến cho trình chạy dịch vụ và so khớp chúng với chiến lược hoặc hàm lưu vào bộ nhớ đệm để nhận được phản hồi cho các yêu cầu đó.

Sau khi so khớp các tuyến đến các chiến lược, Workbox cũng cung cấp khả năng lọc xem phản hồi nào sẽ được thêm vào bộ nhớ đệm bằng trình bổ trợ workbox-cacheable-response. Với trình bổ trợ này, bạn có thể chỉ lưu các phản hồi trả về mà không có lỗi vào bộ nhớ đệm.

Chú ý: Mặc dù Workbox được phân phối dưới dạng mô-đun npm, nhưng bản thân trình chạy dịch vụ không hỗ trợ cú pháp mô-đun ES trong mọi trình duyệt. Vì vậy, bạn nên biên dịch mã mẫu này bằng trình đóng gói trước khi triển khai.

Mã mẫu sau đây sử dụng chiến lược ưu tiên bộ nhớ đệm (thông qua mô-đun CacheFirst) để lưu vào bộ nhớ đệm và phân phát các thao tác điều hướng trang.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

Trình bổ trợ này cho phép bạn truy cập vào vòng đời giải quyết yêu cầu và lưu vào bộ nhớ đệm của Workbox. Ở đây, CacheableResponsePlugin được dùng để chỉ lưu các yêu cầu có trạng thái 200 vào bộ nhớ đệm, giúp ngăn các yêu cầu không hợp lệ được lưu vào bộ nhớ đệm.

Sau khi tạo chiến lược, đã đến lúc đăng ký một tuyến để sử dụng chiến lược đó. Ví dụ sau đây gọi registerRoute(), truyền đối tượng Yêu cầu đến lệnh gọi lại. Nếu request.mode là "navigate", thì thao tác này sẽ sử dụng chiến lược CacheFirst (ở đây gọi là pageStrategy) được xác định trong ví dụ về mã ở trên.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

Hãy đọc tài liệu về Hộp công việc để biết thêm ví dụ và các phương pháp hay nhất.

Dự phòng ngoại tuyến

Mô-đun định tuyến hộp công việc cũng có setCatchHandler() đã xuất, cung cấp khả năng xử lý nếu một tuyến gửi lỗi. Bạn có thể sử dụng tính năng này để thiết lập một phương án dự phòng ngoại tuyến nhằm thông báo cho người dùng rằng tuyến đường mà họ yêu cầu hiện không có sẵn.

Ở đây, sự kết hợp giữa Workbox và Cache Storage API cung cấp tính năng dự phòng ngoại tuyến bằng cách sử dụng chiến lược chỉ sử dụng bộ nhớ đệm. Trước tiên, trong vòng đời cài đặt của trình chạy dịch vụ, bộ nhớ đệm offline-fallbacks sẽ được mở và mảng dự phòng ngoại tuyến được thêm vào bộ nhớ đệm.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

Sau đó, trong setCatchHandler(), đích đến của yêu cầu gửi ra lỗi được xác định và bộ nhớ đệm offline-fallbacks sẽ được mở. Nếu đích đến là một tài liệu, thì nội dung của bản dự phòng ngoại tuyến sẽ được trả về cho người dùng. Nếu tệp đó không tồn tại hoặc đích không phải là tài liệu (chẳng hạn như hình ảnh hoặc biểu định kiểu), thì phản hồi lỗi sẽ được trả về. Bạn có thể mở rộng mẫu này không chỉ cho tài liệu mà còn cho hình ảnh, video, phông chữ, thực sự là bất kỳ thứ gì mà bạn muốn cung cấp dưới dạng phương án dự phòng ngoại tuyến.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

Recipe

Một số mẫu định tuyến và lưu vào bộ nhớ đệm, chẳng hạn như điều hướng NetworkFirst và dự phòng ngoại tuyến, đủ phổ biến để được đóng gói vào các công thức có thể sử dụng lại. Chọn workbox-recipes (công thức hộp công việc) vì chúng có thể giúp bạn nếu chúng cung cấp giải pháp phù hợp với cấu trúc của bạn. Các hàm này thường có sẵn dưới dạng một dòng mã mà bạn cần thêm vào mã của trình chạy dịch vụ.

Lưu vào bộ nhớ đệm và cập nhật tài sản

Việc lưu tài sản vào bộ nhớ đệm cũng liên quan đến việc cập nhật các tài sản đó. Workbox giúp cập nhật nội dung theo bất kỳ cách nào bạn cho là tốt nhất. Bạn có thể cập nhật các chế độ cài đặt này nếu các thay đổi trên máy chủ hoặc chờ cho đến khi bạn có phiên bản mới của ứng dụng. Bạn sẽ tìm hiểu thêm về việc cập nhật trong chương Cập nhật.

Play với Workbox

Bạn có thể thử nghiệm với Workbox ngay lập tức bằng cách sử dụng lớp học lập trình sau đây:

Thực hành: Làm việc với Workbox.

Tài nguyên

• Làm quen với Workbox
• Mô-đun hộp làm việc
• Cách thức của Workbox