Hai API đóng vai trò quan trọng trong việc xây dựng các ứ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 tính năng này một cách hiệu quả mà không gây ra lỗi nhỏ hoặc gặp phải các trường hợp hiếm gặp có thể là một thách thức. Ví dụ: lỗi trong mã 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 các API Trình chạy dịch vụ và Bộ nhớ đệm. Thư viện này cung cấp một bộ thư viện sẵn sàng phát hành để 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 cấu trúc thành hai bộ sưu tập: các công cụ giúp quản lý mã chạy bên trong worker dịch vụ và các công cụ tích hợp với quy trình xây dựng.
Mã thời gian chạy
Đây là mã chạy bên trong tập lệnh worker của dịch vụ và kiểm soát cách mã này chặn các yêu cầu đi và tương tác với API Bộ nhớ đệm. Workbox có tổng cộng khoảng một chục 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 worker dịch vụ có phản hồi hay không (được gọi là định tuyến) và cách worker dịch vụ phản hồi (được gọi là chiến lược lưu vào bộ nhớ đệm).
Tích hợp bản dựng
Workbox cung cấp các công cụ dòng lệnh, mô-đun Node.js và trình bổ trợ webpack để 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 tập hợp các tuỳ chọn cấu hình. Worker dịch vụ được tạo sử dụng các thư viện thời gian chạy của Workbox "ở chế độ nền" để triển khai 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 URL cần "lưu vào bộ nhớ đệm trước", dựa trên các mẫu có thể định cấu hình để đưa vào và loại trừ các tệp được tạo trong quá trình tạo bản 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 worker dịch vụ. Có một số hướng dẫn trình bày về các chiến lược lưu vào bộ nhớ đệm phổ biến từ góc độ worker dịch vụ "thông thường". Nếu bạn quyết định sử dụng Workbox, sau đây là một số lợi ích của công cụ này.
Quản lý bộ nhớ đệm
Workbox xử lý các bản cập nhật bộ nhớ đệm cho bạn, được liên kết với quy trình xây dựng khi sử dụng tính năng lưu vào bộ nhớ đệm trước hoặc thông qua các chính sách về kích thước/thời gian 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 Bộ nhớ đệm cơ bản rất mạnh mẽ, nhưng không có 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ẽ giúp bạn giải quyết vấn đề này.
Ghi nhật ký và báo cáo lỗi chi tiết
Khi bắt đầu sử dụng trình chạy dịch vụ, bạn sẽ gặp khó khăn trong việc tìm hiểu lý do một nội dung nào đó được lưu vào bộ nhớ đệm (hoặc cũng khó chịu không kém là lý do nội dung đó không được lưu vào bộ nhớ đệm).
Workbox tự động phát hiện thời điểm bạn đang chạy phiên bản 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.
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 tự mình tìm hiểu.
Cơ sở mã được kiểm thử, đa trình duyệt
Workbox được phát triển dựa trên bộ kiểm thử trên nhiều trình duyệt và khi có thể, sẽ tự động quay lại phương thức triển khai thay thế cho các tính năng bị thiếu trên một số trình duyệt nhất định.
workbox-broadcast-cache-update modulesử dụng Broadcast Channel API (API kênh truyền tin) khi có sẵn và quay lại phương thức triển khai dựa trênpostMessage()trên các trình duyệt không hỗ trợ.- Mô-đun workbox-background-sync sử dụng Background Sync API nếu có thể. Nếu không, mô-đun này sẽ quay lại thử lại các sự kiện trong hàng đợi mỗi khi worker dịch vụ khởi động.
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ộ khởi động và trình bổ trợ phổ biến:
Thêm Workbox vào quy trình xây dựng hiện có
Nếu đã có quy trình xây dựng cho trang web, bạn chỉ cần thêm dòng lệnh, mô-đun Node.js hoặc trình bổ trợ webpack thích hợp là có thể 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, với chế độ wizard sẽ kiểm tra môi trường phát triển cục bộ và đề xuất mộ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 worker dịch vụ, hãy chạy workbox generateSW workbox-config.js trong quá trình xây dựng. Hãy xem tài liệu về generateSW để biết thông tin chi tiết.
Bạn có thể tuỳ chỉnh thêm worker dịch vụ bằng cách thực hiện các thay đổi đối với workbox-config.js.
Hãy xem tài liệu về các tuỳ chọn để biết thông tin chi tiết.
Sử dụng Workbox trong thời gian chạy trong một worker dịch vụ hiện có
Nếu bạn đã có một worker 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 thư viện này và bắt đầu sử dụng thư viện này để lưu vào bộ nhớ đệm 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 vào bộ nhớ đệm trước (yêu cầu tích hợp tại thời điểm tạo bản dựng), nhưng rất phù hợp để tạo bản minh hoạ và thử nghiệm nhiều chiến lược lưu vào bộ nhớ đệm 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',
})
);