Cảm ơn bạn đã theo dõi Google I/O! Xem nội dung theo yêu cầu.

Trang này được dịch bởi Cloud Translation API.

Workbox

Khi PWA của bạn phát triển, bạn có thể gặp nhiều khó khăn trong việc duy trì trình chạy dịch vụ và logic lưu trữ bộ nhớ đệm. Workbox (Hộp làm việc) là một tập hợp các thư viện nguồn mở giúp thực hiện việc đó. Workbox đóng gói các API cấp thấp, như API Service Worker và API Lưu trữ bộ nhớ đệm, đồng thời hiển thị nhiều giao diện thân thiện với nhà phát triển hơn.

Một số nhiệm vụ mà công cụ này 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á ở chế độ nền với tính năng 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 tài sản vào bộ nhớ đệm. Đây cũng là thư viện được dùng nhiều nhất cho trình chạy dịch vụ; được 54% trang web dành cho thiết bị di động sử dụng và ngôn ngữ này được dùng trong nhiều công cụ xây dựng và CLI, bao gồm Angular CLI, Create-React-App và Vue CLI. Hầu hết các thư viện và khung khác cũng 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ử dụng thư viện Workbox

(Lên)

Mô-đun hộp làm việc

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

Mô-đun hộp làm 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 bạn cần và sử dụng các mô-đun đó từ tệp trình chạy dịch vụ của mình, chẳng hạn như để giúp quản lý bộ nhớ đệm và phân phối tệp bằng các chiến lược khác nhau.
Trong ngữ cảnh window chính: giúp đăng ký và giao tiếp với một trình chạy dịch vụ
Dưới dạng một phần của hệ thống xây dựng: ví dụ như webpack cho các mục đích như tạo tệp kê khai cho các tài sản của bạn hay 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 làm việc: Khi trình chạy dịch vụ chặn các yêu cầu, mô-đun này sẽ định tuyến các yêu cầu đó đến các hàm khác nhau 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ục vụ.
workbox-metadata: Một tập hợp các chiến lược lưu vào bộ nhớ đệm trong thời gian chạy xử lý việc phản hồi một yêu cầu, chẳng hạn như bộ nhớ đệm đầu tiên và lỗi thời trong khi xác thực lại; đó 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.
chuẩn bị hộp làm việc: Đây là việc triển khai việc lưu các tệp 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 vào bộ nhớ đệm), như đã đề cập trong chương Lưu 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 nội dung đó. Chúng tôi sẽ đề cập đến việc cập nhật tài sản trong Chương cập nhật.
workbox-expiration: Đây là một trình bổ trợ được sử dụng với 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 tuổi của yêu cầu được lưu vào bộ nhớ đệm. 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ố lượng mục trong mỗi bộ nhớ đệm.
workbox-window: Một tập hợp mô-đun dự định chạy trong bối cảnh cửa sổ, tức là bên trong trang web PWA của bạn. Bạn có thể đơn giản hoá quy trình đăng ký và cập nhật của trình chạy dịch vụ, đồng thời cho phép giao tiếp dễ dàng hơn giữa mã đang chạy trong ngữ cảnh trình chạy dịch vụ và 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 nào phù hợp nhất với cấu trúc của ứng dụng:

CLI hộp làm việc: Một tiện ích dòng lệnh tạo ra một trình chạy dịch vụ hoàn chỉnh, chèn tệp kê khai trước trong bộ nhớ đệm hoặc sao chép các tệp Hộp làm việc cần thiết.
Bản dựng hộp công việc: Một mô-đun npm tạo ra một trình chạy dịch vụ hoàn chỉnh, chèn tệp kê khai trước trong bộ nhớ đệm và sao chép các tệp Hộp làm việc. Tính năng này được tích hợp với quy trình xây dựng của riêng bạn.
workbox-sw: Cách tải các gói trình chạy dịch vụ của Workbox từ một CDN 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ạo trình chạy dịch vụ. Để chạy trình hướng dẫn, nhập nội dung sau vào dòng lệnh:

npx workbox-cli wizard

Giao diện dòng lệnh (CLI) hộp làm việc đang hoạt động trên thiết bị đầu cuối

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

Cách sử dụng phổ biến của Workbox là sử dụng kết hợp các mô-đun định tuyến và chiến lược để lưu tệp vào bộ nhớ đệm và phân phối tệp.

Mô-đun workbox-solutions của mô-đun này cung cấp ngay những chiến lược lưu vào bộ nhớ đệm mà chúng ta đã thảo luận trong các chương Thành phần và dữ liệu cũng như chương Phân phát.

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

Sau khi so khớp các tuyến đến các chiến lược, Workbox cũng có thể lọc những phản hồi 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 vào bộ nhớ đệm các phản hồi không có lỗi.

Mã mẫu sau đây sử dụng chiến lược lưu trước vào 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 bộ nhớ đệm của Workbox và yêu cầu vòng đời giải quyết. Ở đây, CacheableResponsePlugin chỉ dùng để lưu các yêu cầu vào bộ nhớ đệm dẫn đến trạng thái 200, 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 tuyến đường đó. Ví dụ sau 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ì hệ thống sẽ sử dụng chiến lược CacheFirst (ở đây gọi là pageStrategy) được xác định trong đoạn mã ví dụ trước.

// 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 để có 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 làm việc cũng có setCatchHandler() đã xuất, cung cấp khả năng xử lý nếu một tuyến đường gây ra lỗi. Bạn có thể sử dụng đường dẫn này để thiết lập bản sao lưu ngoại tuyến nhằm thông báo cho người dùng rằng tuyến yêu cầu của họ hiện không có sẵn.

Ở đây, sự kết hợp giữa Workbox và API Lưu trữ bộ nhớ đệm sẽ 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. Đầu 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ột mảng bản dự phòng ngoại tuyến sẽ đượ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 có báo 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 đích đến không tồn tại hoặc đích đến không phải là một 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à mọi thứ mà bạn muốn cung cấp dưới dạng 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();
});

Công thức nấu ăn

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 gói gọn vào các công thức có thể sử dụng lại. Đánh dấu workbox-recipes 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 kiến trúc của bạn. Các 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 các thành phần vào bộ nhớ đệm cũng bao gồm việc cập nhật chúng. Workbox giúp bạn cập nhật các thành phần theo bất cứ cách nào mà bạn cho là phù hợp nhất. Có thể là cập nhật các ứng dụng đó nếu chúng thay đổi trên máy chủ hoặc chờ cho đến khi bạn có phiên bản ứng dụng mới. 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ể chơi ngay cùng Workbox bằng lớp học lập trình sau: