Những nhà phát triển từng sử dụng sw-precache và/hoặc sw-toolbox sẽ có lộ trình nâng cấp đơn giản lên nhóm thư viện Workbox. Việc nâng cấp lên Workbox sẽ mang đến trải nghiệm trình chạy dịch vụ hiện đại, có thể mở rộng, với tính năng gỡ lỗi được cải tiến và hiệu quả công thái học cho nhà phát triển.
Sửa đổi cấu hình hiện tại của bạn
Nếu đang sử dụng sw-precache được định cấu hình bằng bất kỳ tuỳ chọn nào sau đây, bạn cần xem xét những thay đổi sau đây khi di chuyển sang Workbox.
Tuỳ chọn đã đổi tên
Tham số cấu hình dynamicUrlToDependencies đổi tên thành templatedURLs.
Tham số cấu hình staticFileGlobs đổi tên thành globPatterns.
Tham số cấu hình runtimeCaching nhận một tập hợp các tuỳ chọn đã cập nhật, tương ứng với tên được dùng trong các mô-đun Workbox cơ bản. Để minh hoạ nội dung đã đổi tên, cấu hình sw-precache này:
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
tương đương với cấu hình Workbox sau:
runtimeCaching: [{
urlPattern: /api/,
// 'fastest' is now 'StaleWhileRevalidate'
handler: 'StaleWhileRevalidate',
options: {
// options.cache.name is now options.cacheName
cacheName: 'my-api-cache',
// options.cache is now options.expiration
expiration: {
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
Tuỳ chọn không dùng nữa
Các tuyến ký tự đại diện kiểu nhanh không còn được hỗ trợ. Nếu bạn đang sử dụng các tuyến ký tự đại diện kiểu Express trong cấu hình runtimeCaching hoặc trực tiếp trong sw-toolbox, hãy di chuyển sang tuyến biểu thức chính quy tương đương khi sử dụng Workbox.
di chuyển sw-precache
Từ sw-precache CLI sang workbox-cli
Các nhà phát triển sử dụng giao diện dòng lệnh sw-precache, chạy lệnh theo cách thủ công hoặc như một phần của quy trình xây dựng dựa trên npm scripts, sẽ thấy rằng việc sử dụng mô-đun workbox-cli là cách dễ dàng nhất để di chuyển. Việc cài đặt workbox-cli sẽ cấp cho bạn quyền truy cập vào tệp nhị phân có tên là workbox.
Trong khi CLI sw-precache được hỗ trợ định cấu hình qua cờ dòng lệnh hoặc tệp cấu hình, CLI workbox yêu cầu cung cấp tất cả các tuỳ chọn cấu hình trong tệp cấu hình, bằng cách sử dụng CommonJS module.exports.
Giao diện dòng lệnh (CLI) workbox hỗ trợ một số chế độ. (Sử dụng workbox --help để xem tất cả các giá trị này.) Tuy nhiên, chế độ phù hợp nhất với chức năng của sw-precache là generateSW. Vì vậy, một cuộc gọi đến
$ sw-precache --config='sw-precache-config.js'
có thể được biểu diễn dưới dạng
$ workbox generateSW workbox-config.js
Từ mô-đun nút sw-precache đến mô-đun nút xây dựng hộp công việc
Các nhà phát triển sử dụng API node cho sw-precache, theo quy trình gulp/Grunt hoặc chỉ trong tập lệnh bản dựng node tuỳ chỉnh, có thể di chuyển bằng cách chuyển sang mô-đun workbox-build node.
Hàm generateSW() của mô-đun workbox-build phù hợp nhất với hàm write() của mô-đun sw-precache. Một điểm khác biệt chính là generateSW() luôn trả về một Promise, trong khi hàm write() cũ hỗ trợ cả lệnh gọi lại và giao diện dựa trên Promise.
Mức sử dụng gulp theo các dòng của
const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
return swPrecache.write('service-worker.js', {
// Config options.
});
});
có thể thay đổi thành
const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
return workboxBuild.generateSW({
// Config options.
});
});
Từ sw-precache-webpack-plugin đến trình bổ trợ webpack của Workbox
Các nhà phát triển sử dụng sw-precache-webpack-plugin trong quy trình xây dựng webpack có thể di chuyển bằng cách chuyển sang lớp GenerateSW trong mô-đun workbox-webpack-plugin.
workbox-webpack-plugin tích hợp trực tiếp với quy trình xây dựng gói web và "biết" về tất cả tài sản do một trình biên dịch nhất định tạo ra. Điều này có nghĩa là trong nhiều trường hợp sử dụng, bạn có thể dựa vào hành vi mặc định của workbox-webpack-plugin mà không cần cấu hình bổ sung và nhận một trình chạy dịch vụ tương đương với nội dung mà sw-precache-webpack-plugin cung cấp.
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
}),
],
};
có thể thay đổi thành
const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new GenerateSW({
// Config options, if needed.
}),
],
};
Di chuyển sw-toolbox
Di chuyển từ sw-toolbox thủ công sang workbox-sw
Nếu bạn đang sử dụng trực tiếp sw-toolbox (thay vì sử dụng ngầm thông qua tuỳ chọn runtimeCaching của sw-precache), thì quá trình di chuyển sang Workbox sẽ yêu cầu bạn điều chỉnh theo cách thủ công để có được hành vi tương đương. Để biết thêm thông tin, hãy đọc tài liệu về các mô-đun workbox-routing và workbox-strategies có thể giúp cung cấp thêm bối cảnh.
Dưới đây là một số đoạn mã giúp hướng dẫn quá trình di chuyển. Mã sw-toolbox này:
importScripts('path/to/sw-toolbox.js');
// Set up a route that matches HTTP 'GET' requests.
toolbox.router.get(
// Match any URL that contains 'ytimg.com', regardless of
// where in the URL that match occurs.
/\.ytimg\.com\//,
// Apply a cache-first strategy to anything that matches.
toolbox.cacheFirst,
{
// Configure a custom cache name and expiration policy.
cache: {
name: 'youtube-thumbnails',
maxEntries: 10,
maxAgeSeconds: 30,
},
}
);
// Set a default network-first strategy to use when
// there is no explicit matching route:
toolbox.router.default = toolbox.networkFirst;
tương đương với mã Workbox này:
importScripts('path/to/workbox-sw.js');
workbox.routing.registerRoute(
// Match any URL that contains 'ytimg.com'.
// Unlike in sw-toolbox, in Workbox, a RegExp that matches
// a cross-origin URL needs to include the initial 'https://'
// as part of the match.
new RegExp('^https://.*.ytimg.com'),
// Apply a cache-first strategy to anything that matches.
new workbox.strategies.CacheFirst({
// Configuration options are passed in to the strategy.
cacheName: 'youtube-thumbnails',
plugins: [
new workbox.expiration.ExpirationPlugin({
maxEntries: 10,
maxAgeSeconds: 30,
}),
// In Workbox, you must explicitly opt-in to caching
// responses with a status of 0 when using the
// cache-first strategy.
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
],
})
);
// Set a default network-first strategy to use when
// there is no explicit matching route:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkFirst());
Nhận trợ giúp
Chúng tôi dự kiến hầu hết quá trình di chuyển sang Workbox sẽ đơn giản. Nếu bạn gặp các vấn đề không được đề cập trong hướng dẫn này, vui lòng cho chúng tôi biết bằng cách mở một vấn đề trên GitHub.