Những nhà phát triển từng sử dụng sw-precache và/hoặc sw-toolbox có thể dễ dàng nâng cấp 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 cùng với khả năng gỡ lỗi và công thái học cho nhà phát triển được cải thiện.
Nội dung sửa đổi đối với cấu hình hiện có
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 cân nhắc những thay đổi sau khi di chuyển sang Workbox.
Các tuỳ chọn đã đổi tên
Đổi tên tham số cấu hình dynamicUrlToDependencies thành templatedURLs.
Đổi tên tham số cấu hình staticFileGlobs thành globPatterns.
Tham số cấu hình runtimeCaching sẽ lấy một tập hợp các tuỳ chọn đã cập nhật, tương ứng với tên được sử dụng trong các mô-đun Workbox cơ bản. Để minh hoạ những phần đã được đổ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 này:
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 Express không còn được hỗ trợ. Nếu bạn đang sử dụng các tuyến đường 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 đường biểu thức chính quy tương đương khi sử dụng Workbox.
Di chuyển sw-precache
Từ CLI sw-precache đến 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 trong quy trình xây dựng dựa trên npm scripts, sẽ thấy việc sử dụng mô-đun workbox-cli là cách dễ 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 một tệp nhị phân có tên là workbox.
Mặc dù sw-precache CLI được hỗ trợ định cấu hình thông qua cờ dòng lệnh hoặc tệp cấu hình, nhưng CLI workbox yêu cầu tất cả các tuỳ chọn cấu hình đều phải được cung cấp trong tệp cấu hình bằng cách sử dụng CommonJS module.exports.
CLI workbox hỗ trợ một số chế độ khác nhau. (Sử dụng workbox --help để xem tất cả các lớp 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 thị dưới dạng
$ workbox generateSW workbox-config.js
Từ mô-đun nút sw-precache đến mô-đun nút workbox-build
Những nhà phát triển sử dụng API node cho sw-precache, theo quy trình làm việc gulp/Grunt hoặc ngay trong tập lệnh bản dựng node tuỳ chỉnh, đều có thể di chuyển bằng cách chuyển sang mô-đun node workbox-build.
Hàm generateSW() của mô-đun workbox-build gần khớp với hàm write() của mô-đun sw-precache nhất. Một điểm khác biệt chính là generateSW() luôn trả về một Lời hứa, trong khi hàm write() cũ hỗ trợ cả lệnh gọi lại và giao diện dựa trên Lời hứa.
Cách sử dụng gulp theo hướng
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ừ trình bổ trợ sw-precache-webpack-plugin sang trình bổ trợ webpack Workbox
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 tạo bản dựng webpack và "biết" về tất cả các thành phần do một quá 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, sau đó tải một trình chạy dịch vụ tương đương cho những gì 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ể được 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ừ hộp công cụ sw-toolbox được tạo thủ công sang workbox-sw
Nếu bạn đang sử dụng sw-toolbox trực tiếp (thay vì sử dụng ngầm ẩn thông qua tuỳ chọn runtimeCaching của sw-precache), thì việc di chuyển sang Workbox sẽ yêu cầu một số điều chỉnh 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êm thông tin.
Dưới đây là một số đoạn mã giúp hướng dẫn 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 sau:
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 các quá trình di chuyển sang Workbox sẽ diễn ra suôn sẻ. Nếu bạn gặp phải 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.