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 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 cách hoàn thành công việc quan trọng này, bất kể bạn chọn công cụ nào trong công cụ xây dựng của Hộp công việc. Trong hướng dẫn này, bạn sẽ tìm hiểu cách lưu trước tài sản trong bộ nhớ đệm bằng cả generateSW và injectManifest, cũng như phương pháp nào trong số này phù hợp nhất với dự án của bạn.

Đang lưu vào bộ nhớ đệm với generateSW

generateSW là cách dễ nhất để lưu trước tài sản trong 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 mà bạn đang yêu cầu Workbox tạo một trình chạy dịch vụ cho mình. Tuy nhiên, bạn có thể tác động đến hành vi của ứng dụng thông qua nhiều lựa chọn cấu hình.

Theo mặc định, generateSW sẽ thực hiện nhiều việc khác nhau tuỳ thuộc vào công cụ xây dựng bạn sử dụng. Khi sử dụng workbox-webpack-plugin, bạn không phải chỉ định tuỳ chọn cấu hình. Theo mặc định, trình bổ trợ này sẽ lưu trước mọi nội dung webpack có trong biểu đồ phần phụ thuộc vào bộ nhớ đệm 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ì chỉ những thành phần HTML, CSS và JavaScript được đọc từ hệ thống tệp cục bộ mới được lưu trước vào bộ nhớ đệm theo mặc định. Ngoài ra, 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 cũng 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 qua tài liệu.

Cảnh báo: Nếu có quá nhiều thành phần trong dự án của bạn được lưu trước vào bộ nhớ đệm theo chế độ cài đặt mặc định, hãy sử dụng một trong các lựa 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ợ này để tìm hiểu cách ngăn thành phần không mong muốn được lưu trước vào bộ nhớ đệm, vì cấu hình của trình bổ trợ này khác với generateSW.

Đang lưu vào bộ nhớ đệm với 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ụ mà 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 giữ 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 lưu trữ trước. Khi kiểm tra trình chạy dịch vụ đầu vào của bạn, injectManifest sẽ tìm một biến self.__WB_MANIFEST đặc biệt và thay thế bằng tệp kê khai trước trong bộ nhớ đệm. Nếu không có biến này, injectManifest sẽ gửi một lỗi.

Lưu ý: Nếu cần thay đổi chuỗi mà injectManifest tìm kiếm thành một chuỗi 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.

Bạn có thể điều chỉnh danh sách các mục trong tệp kê khai trước 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 nhóm thời gian chạy Workbox cho bạn! Để xem cách quản lý điều này trong các trường hợp sử dụng dựa vào injectManifest, hãy xem bảng so sánh song song bên dưới.

So sánh song song

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ể xây dựng 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ụ khả thi tối thiểu yêu cầu tệp trình chạy dịch vụ nguồn. Nếu tất cả những gì cần thiết là thao tác lưu 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);

Hãy lưu ý chuỗi self.__WB_MANIFEST. Đây là một phần giữ chỗ mà Workbox thay thế bằng tệp kê khai trước trong bộ nhớ đệm. 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 yêu cầu 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 ở trong một môi trường Nút hỗ trợ sẵn các mô-đun ES mà không cần bước tạo bản 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 module.exports.

Kết luận

Việc chuẩn bị trước trong Workbox đơn giản hơn nhiều so với khi bạn phải tự quản lý việc lưu vào bộ nhớ đệm, đặc biệt là khi bạn cần quan tâm đến những thành phần có phiên bản do trình gói biên dịch. Tuy nhiên, việc lưu vào bộ nhớ đệm không phải là việc duy nhất mà 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.