Khảo sát bằng Workbox

Lưu trước vào bộ nhớ đệm là một trong những việc phổ biến nhất mà bạn sẽ thực hiện trong trình chạy dịch vụ và Workbox giúp bạn linh hoạt hơn trong việc thực hiện tác vụ quan trọng này, bất kể bạn chọn công cụ xây dựng nào của Workbox. Trong hướng dẫn này, bạn sẽ tìm hiểu cách lưu trước tài sản vào bộ nhớ đệm bằng cách sử dụng cả generateSW và injectManifest, cũng như phương thức nào trong số này có thể phù hợp nhất với dự án của bạn.

Khả năng lưu trước trên bộ nhớ đệm bằng generateSW

generateSW là cách dễ nhất để lưu trước tài sản vào bộ nhớ đệm trong Workbox. Điều quan trọng cần nhớ về generateSW là bạn không viết trình chạy dịch vụ của riêng mình — bạn đang yêu cầu Workbox tạo một trình chạy cho mình. Tuy nhiên, bạn có thể tác động đến hành vi của mã thông qua nhiều tuỳ chọn cấu hình.

Theo mặc định, generateSW thực hiện nhiều việc khác nhau tuỳ thuộc vào công cụ bản dựng bạn sử dụng. Khi sử dụng workbox-webpack-plugin, bạn không phải chỉ định bất kỳ tuỳ chọn cấu hình nào. Theo mặc định, trình bổ trợ này sẽ lưu trước mọi thứ có trong biểu đồ phần phụ thuộc vào bộ nhớ đệm của gói web và ghi một trình chạy dịch vụ có tên service-worker.js vào thư mục do output.path chỉ định

Mặt khác, nếu bạn sử dụng workbox-build hoặc workbox-cli, thì theo mặc định, chỉ những nội dung HTML, CSS và JavaScript được đọc từ hệ thống tệp cục bộ sẽ được lưu trước vào bộ nhớ đệm. Đối với cấu hình, bạn phải chỉ định swDest và tuỳ chọn globDirectory trong cấu hình generateSW để tính năng lưu vào bộ nhớ đệm hoạt động. Có thể bạn sẽ muốn định cấu hình các tuỳ chọn bổ sung ảnh hưởng đến hành vi của trình chạy dịch vụ, vì vậy hãy xem kỹ tài liệu.

Cảnh báo: Nếu quá nhiều tài sản trong dự án của bạn được lưu trước vào bộ nhớ đệm với các chế độ cài đặt mặc định, hãy sử dụng một trong các tuỳ chọn toàn cầu để loại trừ tài nguyên trong cấu hình generateSW. Khi sử dụng workbox-webpack-plugin, hãy tham khảo tài liệu về GenerateSW của trình bổ trợ để tìm hiểu cách ngăn việc lưu trước tài sản không mong muốn vào bộ nhớ đệm vì cấu hình của trình bổ trợ này khác với generateSW.

Khả năng lưu trước trên bộ nhớ đệm bằng injectManifest

Việc sử dụng injectManifest không dễ như sử dụng generateSW, nhưng bạn đang đánh đổi tính dễ sử dụng để linh hoạt hơn. Trong trường hợp generateSW xử lý toàn bộ quá trình tạo trình chạy dịch vụ cho bạn, injectManifest sẽ lấy một trình chạy dịch vụ bạn viết làm nguồn và chèn một danh sách URL vào bộ nhớ đệm trước, đồng thời để nguyên phần còn lại của trình chạy dịch vụ đó.

Khi sử dụng injectManifest, bạn có trách nhiệm kết nối logic trước khi lưu vào bộ nhớ đệm. Khi injectManifest kiểm tra trình chạy dịch vụ đầu vào, công cụ này sẽ tìm một biến self.__WB_MANIFEST đặc biệt và thay thế biến đó bằng tệp kê khai bộ nhớ đệm trước. Nếu không có biến này, injectManifest sẽ báo lỗi.

Lưu ý: Nếu cần thay đổi chuỗi injectManifest để tìm giá trị khác với self.__WB_MANIFEST, bạn có thể thực hiện bằng cách chỉ định tuỳ chọn injectionPoint trong cấu hình của chuỗi.

Bạn có thể tinh chỉnh danh sách các mục trong tệp kê khai bộ nhớ đệm bằng tuỳ chọn cấu hình bổ sung.

Thận trọng: Không giống như generateSW, injectManifest sẽ không tự động gói thời gian chạy Workbox cho bạn! Để xem cách quản lý việc này trong các trường hợp sử dụng dựa vào injectManifest, hãy xem thông tin so sánh song song bên dưới.

So sánh song song

Hãy nhấp vào từng thẻ bên dưới để so sánh cách sử dụng phương thức generateSW và injectManifest:

Vì generateSW tạo một trình chạy dịch vụ nên bạn chỉ cần chỉ định một cấu hình. Dưới đây là một ví dụ về cách sử dụng workbox-build:

// build-sw.js
import {generateSW} from 'workbox-build';

generateSW({
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

Sau đó, bạn có thể tạo trình chạy dịch vụ trên dòng lệnh bằng Nút:

node build-sw.js

Vì injectManifest yêu cầu một trình chạy dịch vụ nguồn, nên một ví dụ tối thiểu khả thi sẽ yêu cầu một tệp trình chạy dịch vụ nguồn. Nếu tất cả những gì cần thiết là lưu trước vào bộ nhớ đệm, thì trình chạy dịch vụ đầu vào đó sẽ có dạng như sau:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Lưu ý chuỗi self.__WB_MANIFEST. Đây là phần giữ chỗ mà Workbox sẽ thay thế bằng tệp kê khai bộ nhớ đệm trước. Dưới đây là cấu hình hợp lệ cho trường hợp sử dụng này:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

Bạn nên dùng injectManifest nếu có các yêu cầu phức tạp, chẳng hạn như định tuyến nâng cao, chiến lược lưu vào bộ nhớ đệm tuỳ chỉnh hoặc những vấn đề khác không có trong các tuỳ chọn mà generateSW cung cấp.

Thận trọng: Các ví dụ trên giả định rằng bạn đang sử dụng một môi trường Nút hỗ trợ sẵn các mô-đun ES mà không cần thực hiện bước xây dựng. Trong các phiên bản nút trước phiên bản 16, bạn có thể phải đặt cờ để bật tính năng hỗ trợ mô-đun ES hoặc dựa vào ngữ nghĩa CommonJS bằng cách sử dụng module.exports.

Kết luận

Việc lưu trước vào bộ nhớ đệm trong Workbox đơn giản hơn nhiều so với khi bạn phải tự mình quản lý việc lưu vào bộ nhớ đệm, đặc biệt là khi bạn lo ngại về các thành phần được tạo phiên bản do trình đóng gói tổng hợp. Tuy nhiên, lưu trước vào bộ nhớ đệm không phải là điều duy nhất bạn có thể làm trong một trình chạy dịch vụ. Khi tiếp tục, bạn sẽ tìm hiểu các kỹ thuật khác, chẳng hạn như lưu vào bộ nhớ đệm trong thời gian chạy.