Workbox: Bộ công cụ trình chạy dịch vụ cấp cao

Jeff Posnick

Hai API đóng vai trò quan trọng trong việc xây dựng ứng dụng web đáng tin cậy: Trình chạy dịch vụ và Bộ nhớ đệm. Tuy nhiên, việc sử dụng các coroutine một cách hiệu quả (mà không gây ra lỗi nhỏ hoặc gặp phải trường hợp hiếm gặp) có thể là một thách thức. Ví dụ: lỗi trong mã của trình chạy dịch vụ có thể gây ra sự cố lưu vào bộ nhớ đệm; người dùng có thể thấy nội dung đã lỗi thời hoặc đường liên kết bị hỏng.

Workbox là một bộ công cụ trình chạy dịch vụ cấp cao được xây dựng dựa trên API Trình chạy dịch vụ và Bộ nhớ đệm. Workbox cung cấp một bộ thư viện sẵn sàng cho môi trường thực tế để thêm tính năng hỗ trợ ngoại tuyến vào ứng dụng web. Bộ công cụ này được chia thành hai tập hợp: các công cụ giúp quản lý mã chạy bên trong trình chạy dịch vụ và các công cụ tích hợp với quy trình xây dựng của bạn.

Mã thời gian chạy

Đây là mã chạy bên trong tập lệnh trình chạy dịch vụ và kiểm soát cách tập lệnh này chặn các yêu cầu gửi đi và tương tác với Cache Storage API. Workbox có tổng cộng khoảng mười hai mô-đun thư viện, mỗi mô-đun xử lý nhiều trường hợp sử dụng chuyên biệt. Các mô-đun quan trọng nhất xác định liệu trình chạy dịch vụ có phản hồi hay không (gọi là định tuyến) và cách trình chạy dịch vụ phản hồi (gọi là chiến lược lưu vào bộ nhớ đệm).

Tạo mối liên kết tích hợp

Workbox cung cấp các công cụ dòng lệnh, mô-đun Node.js và trình bổ trợ webpack, mang đến những cách khác để thực hiện hai việc:

  • Tạo tập lệnh trình chạy dịch vụ dựa trên một nhóm các tuỳ chọn cấu hình. Trình chạy dịch vụ được tạo sử dụng thư viện thời gian chạy của Workbox "ngầm" để áp dụng các chiến lược lưu vào bộ nhớ đệm mà bạn định cấu hình.
  • Tạo danh sách các URL cần được "lưu trước vào bộ nhớ đệm", dựa trên các mẫu có thể định cấu hình để thêm và loại trừ các tệp được tạo trong quá trình xây dựng.

Tại sao bạn nên sử dụng Workbox?

Bạn không bắt buộc phải sử dụng Workbox khi xây dựng trình chạy dịch vụ. Có một số hướng dẫn trình bày các chiến lược lưu vào bộ nhớ đệm phổ biến từ góc độ trình chạy dịch vụ "vanilla". Nếu bạn quyết định sử dụng Workbox, sau đây là một số lợi ích của Workbox.

Quản lý bộ nhớ đệm

Workbox xử lý các bản cập nhật bộ nhớ đệm cho bạn, liên kết với quy trình xây dựng khi sử dụng tính năng lưu trước vào bộ nhớ đệm hoặc thông qua các chính sách về kích thước/độ tuổi có thể định cấu hình khi sử dụng tính năng lưu vào bộ nhớ đệm trong thời gian chạy. API Cache Storage cơ bản rất mạnh mẽ, nhưng không có bất kỳ tính năng hỗ trợ tích hợp nào cho việc hết hạn bộ nhớ đệm. Các công cụ như Workbox sẽ lấp đầy khoảng trống đó.

Ghi nhật ký và Error Reporting toàn diện

Khi bạn bắt đầu sử dụng trình chạy dịch vụ, việc tìm hiểu lý do một nội dung nào đó đang được lưu vào bộ nhớ đệm (hoặc lý do nội dung đó không được lưu vào bộ nhớ đệm) là một thách thức. Workbox tự động phát hiện khi bạn đang chạy phiên bản đang phát triển của trang web trên localhost và bật tính năng ghi nhật ký gỡ lỗi trong Bảng điều khiển JavaScript của trình duyệt.

Workbox ghi nhật ký vào bảng điều khiển Công cụ cho nhà phát triển

Bằng cách theo dõi các thông điệp nhật ký, bạn có thể tìm ra nguyên nhân gốc rễ của mọi vấn đề về cấu hình hoặc vô hiệu hoá nhanh hơn nhiều so với khi bạn tự tìm hiểu.

Một toàn bộ mã nguồn đã được kiểm thử, tương thích với nhiều trình duyệt

Workbox được phát triển dựa trên một bộ kiểm thử trên nhiều trình duyệt và khi có thể, Workbox sẽ tự động quay lại các phương thức triển khai thay thế cho những tính năng bị thiếu trong một số trình duyệt.

Bạn nên sử dụng Workbox như thế nào?

Tích hợp khung

Nếu đang bắt đầu một dự án mới từ đầu, bạn có thể tận dụng tính năng tích hợp Workbox có trong nhiều bộ công cụ khởi động và trình bổ trợ bổ sung phổ biến:

Thêm Workbox vào quy trình xây dựng hiện có

Nếu bạn đã có quy trình xây dựng cho trang web của mình, thì việc sử dụng dòng lệnh, mô-đun Node.js hoặc công cụ trình bổ trợ webpack thích hợp có thể là tất cả những gì bạn cần để bắt đầu sử dụng Workbox.

Cụ thể, giao diện dòng lệnh Workbox giúp bạn dễ dàng thiết lập và chạy, có chế độ wizard sẽ kiểm tra môi trường phát triển cục bộ của bạn và đề xuất cấu hình mặc định hợp lý mà bạn có thể sử dụng trong tương lai:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

Để tạo trình chạy dịch vụ, hãy chạy workbox generateSW workbox-config.js trong quá trình tạo. Vui lòng xem tài liệugenerateSW này để biết thông tin chi tiết. Bạn có thể tuỳ chỉnh thêm trình chạy dịch vụ bằng cách thay đổi workbox-config.js. Hãy xem tài liệu về các lựa chọn để biết thông tin chi tiết.

Sử dụng Workbox trong thời gian chạy trong một trình chạy dịch vụ hiện có

Nếu bạn đã có một trình chạy dịch vụ và muốn dùng thử thư viện thời gian chạy của Workbox, hãy nhập Workbox từ CDN chính thức của Workbox và bắt đầu sử dụng Workbox để lưu vào bộ nhớ đệm trong thời gian chạy ngay lập tức. Trường hợp sử dụng này có nghĩa là bạn sẽ không thể tận dụng tính năng lưu trước vào bộ nhớ đệm (yêu cầu tích hợp thời gian xây dựng), nhưng rất phù hợp để tạo nguyên mẫu và thử nghiệm các chiến lược lưu vào bộ nhớ đệm khác nhau một cách nhanh chóng.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);