Hộp làm việc: bộ công cụ trình chạy dịch vụ cấp cao

Jeff Posnick

Có 2 API đóng vai trò quan trọng trong việc xây dựng các ứng dụng web đáng tin cậy: Service Worker và Bộ nhớ đệm. Tuy nhiên, việc sử dụng chúng một cách hiệu quả mà không gây ra các 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ụ: các 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à bộ công cụ trình chạy dịch vụ cấp cao được xây dựng dựa trên Service Worker và API 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 công khai để thêm tính năng hỗ trợ ngoại tuyến vào các ứng dụng web. Bộ công cụ này có cấu trúc gồm 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.

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 mã này chặn các yêu cầu gửi đi và tương tác với API Bộ nhớ đệm. Workbox có tổng cộng rất nhiều mô-đun thư viện, mỗi mô-đun lại 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 (còn gọi là định tuyến) và cách phản hồi (được gọi là chiến lược lưu vào bộ nhớ đệm).

Xây dựng chế độ 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ợ gói web nhằm cung cấp các cách thay thế để thực hiện 2 việc:

  • Tạo một tập lệnh trình chạy dịch vụ dựa trên tập hợp các tuỳ chọn cấu hình. Trình chạy dịch vụ được tạo sẽ sử dụng thư viện thời gian chạy của Workbox "nâng cao" để thực hiện 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 nê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 để bao gồ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 tạo trình chạy dịch vụ – có một số hướng dẫn về các chiến lược lưu vào bộ nhớ đệm phổ biến từ góc nhìn của 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, gắn liền 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 chính sách 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 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 sẵn nào cho thời gian hết hạn bộ nhớ đệm. Những công cụ như Workbox giúp lấp đầy khoảng trống đó.

Ghi nhật ký mở rộng và báo cáo lỗi

Khi bạn bắt đầu sử dụng trình chạy dịch vụ, việc tìm hiểu lý do nội dung nào đó đang được lưu vào bộ nhớ đệm (hoặc cũng thú vị không kém là tại sao 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 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.

Ghi nhật ký hộp công việc vào bảng điều khiển Công cụ cho nhà phát triển

Bằng cách theo dõi thông điệp nhật ký, bạn có thể truy cập vào gốc 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 việc bạn chỉ tự thực hiện.

Cơ sở mã đã kiểm thử trên 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, nên khi có thể, Workbox sẽ tự động quay lại triển khai thay thế cho các tính năng còn 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 đầu 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ì bạn có thể chỉ cần sử dụng dòng lệnh, công cụ mô-đun Node.js hoặc trình bổ trợ gói web thích hợp để 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ộ 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 sau đó:

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 quy trình xây dựng. Xem tài liệu generateSW để 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 thực hiện các thay đổi đối với workbox-config.js. 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 trình chạy dịch vụ hiện có

Nếu bạn hiện có một trình chạy dịch vụ và muốn dùng thử các thư viện thời gian chạy của Workbox, hãy nhập Workbox từ CDN chính thức và bắt đầu sử dụng ngay để lưu vào bộ nhớ đệm trong thời gian chạy. 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 điều này rất tuyệt vời để tạo nguyên mẫu và thử 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',
  })
);