นักพัฒนาซอฟต์แวร์ที่เคยใช้ sw-precache
และ/หรือ sw-toolbox
ก่อนหน้านี้จะมีเส้นทางการอัปเกรดไปยังกลุ่มไลบรารี Workbox ได้อย่างง่ายดาย การอัปเกรดเป็น Workbox ได้มอบประสบการณ์การใช้งาน Service Worker ที่ทันสมัยและยืดหยุ่น พร้อมการแก้ไขข้อบกพร่องและหลักการยศาสตร์สำหรับนักพัฒนาซอฟต์แวร์ที่ได้รับการปรับปรุงให้ดีขึ้น
การแก้ไขการกำหนดค่าที่มีอยู่
หากใช้ sw-precache
ที่กำหนดค่าไว้ด้วยตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้ คุณจะต้องพิจารณาการเปลี่ยนแปลงต่อไปนี้เมื่อย้ายข้อมูลไปยัง Workbox
ตัวเลือกที่มีการเปลี่ยนชื่อ
เปลี่ยนพารามิเตอร์การกําหนดค่า dynamicUrlToDependencies
เป็น templatedURLs
แล้ว
เปลี่ยนพารามิเตอร์การกําหนดค่า staticFileGlobs
เป็น globPatterns
แล้ว
พารามิเตอร์การกำหนดค่า runtimeCaching
จะใช้ชุดตัวเลือกที่อัปเดตแล้ว ซึ่งสอดคล้องกับชื่อที่ใช้ในโมดูล Workbox ที่สำคัญ เพื่อให้เห็นภาพสิ่งที่เปลี่ยนชื่อใหม่ การกำหนดค่า sw-precache
นี้จะดำเนินการดังนี้
runtimeCaching: [{
urlPattern: /api/,
handler: 'fastest',
options: {
cache: {
name: 'my-api-cache',
maxEntries: 5,
maxAgeSeconds: 60,
},
},
}],
เทียบเท่ากับการกำหนดค่า Workbox นี้
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,
},
},
}],
ตัวเลือกที่เลิกใช้งานแล้ว
ไม่รองรับเส้นทางไวลด์การ์ดรูปแบบ Express อีกต่อไป หากคุณใช้เส้นทางไวลด์การ์ดรูปแบบด่วนในการกำหนดค่า runtimeCaching
หรือใน sw-toolbox
โดยตรง ให้ย้ายข้อมูลไปยังเส้นทางนิพจน์ทั่วไปที่เทียบเท่าเมื่อใช้ Workbox
การย้ายข้อมูล sw-precache
จาก sw-precache CLI ไปยัง workbox-cli
นักพัฒนาซอฟต์แวร์ที่ใช้อินเทอร์เฟซบรรทัดคำสั่ง sw-precache
ไม่ว่าจะเรียกใช้คำสั่งด้วยตนเองหรือด้วยกระบวนการบิลด์แบบ npm scripts
จะพบว่าการใช้โมดูล workbox-cli
เป็นวิธีที่ง่ายที่สุดในการย้ายข้อมูล การติดตั้ง workbox-cli
จะทำให้คุณเข้าถึงไบนารีชื่อ workbox
ได้
แม้ว่า sw-precache
CLI รองรับ ซึ่งกำหนดค่าผ่านแฟล็กบรรทัดคำสั่งหรือไฟล์การกำหนดค่า แต่ workbox
CLI จำเป็นต้องระบุตัวเลือกการกำหนดค่าทั้งหมดไว้ในไฟล์การกำหนดค่า โดยใช้ CommonJS module.exports
workbox
CLI รองรับโหมดต่างๆ หลายโหมด (ใช้ workbox --help
เพื่อดูรายการทั้งหมด) แต่โหมดที่ตรงกับฟังก์ชันของ sw-precache
มากที่สุดคือ generateSW
โทรหา
$ sw-precache --config='sw-precache-config.js'
สามารถแสดงเป็น
$ workbox generateSW workbox-config.js
จากโมดูลโหนด sw-precache ไปยังโมดูลโหนด Workbox-build
นักพัฒนาซอฟต์แวร์ที่ใช้ node
API สำหรับ sw-precache
ซึ่งอาจเป็นส่วนหนึ่งของเวิร์กโฟลว์ gulp
/Grunt
หรือเพียงในสคริปต์บิลด์ node
ที่กำหนดเอง จะย้ายข้อมูลได้โดยเปลี่ยนไปใช้โมดูล workbox-build
node
ฟังก์ชัน generateSW()
ของโมดูล workbox-build
ตรงกับฟังก์ชัน write()
ของโมดูล sw-precache
มากที่สุด ความแตกต่างที่สำคัญอย่างหนึ่งคือ generateSW()
จะแสดงผล Promise เสมอ ในขณะที่ฟังก์ชัน write()
แบบเก่ารองรับทั้งอินเทอร์เฟซแบบ Callback และ Promise
การใช้งานgulp
ตามแนวของ
const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
return swPrecache.write('service-worker.js', {
// Config options.
});
});
สามารถเปลี่ยนเป็น
const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
return workboxBuild.generateSW({
// Config options.
});
});
จากปลั๊กอิน sw-precache-webpack-plugin ไปจนถึงปลั๊กอิน Webpack ของ Workbox
นักพัฒนาแอปที่ใช้ sw-precache-webpack-plugin
เป็นส่วนหนึ่งของกระบวนการบิลด์ Webpack จะย้ายข้อมูลได้โดยเปลี่ยนไปใช้คลาส GenerateSW
ภายในโมดูล workbox-webpack-plugin
workbox-webpack-plugin
ผสานรวมกับกระบวนการบิลด์ Webpack โดยตรงและ "รู้" เกี่ยวกับชิ้นงานทั้งหมดที่สร้างขึ้นจากการรวบรวมคลิปที่กำหนด ซึ่งหมายความว่าใน Use Case ต่างๆ จำนวนมาก คุณสามารถใช้ลักษณะการทำงานเริ่มต้นของ workbox-webpack-plugin
ได้โดยไม่ต้องกำหนดค่าเพิ่มเติม และได้ Service Worker ที่เทียบเท่ากับที่ sw-precache-webpack-plugin
มีให้
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new SWPrecacheWebpackPlugin({
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
}),
],
};
สามารถเปลี่ยนเป็น
const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
// ...
plugins: [
new GenerateSW({
// Config options, if needed.
}),
],
};
การย้ายข้อมูล sw-toolbox
เปลี่ยนจาก sw-toolbox ที่ทำขึ้นเองไปยัง workbox-sw
หากคุณใช้ sw-toolbox
โดยตรง (แทนที่จะใช้โดยปริยายผ่านตัวเลือก runtimeCaching
ของ sw-precache
) คุณจะต้องปรับการย้ายข้อมูลไปยัง Workbox ด้วยตนเองเล็กน้อยเพื่อให้ได้ลักษณะการทำงานที่เทียบเท่ากัน โปรดอ่านเอกสารประกอบสำหรับโมดูล workbox-routing
และ workbox-strategies
เพื่อให้ทราบบริบทเพิ่มเติม
ลองดูข้อมูลโค้ดต่อไปนี้ที่จะช่วยแนะนำการย้ายข้อมูล โค้ด sw-toolbox
นี้
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;
เทียบเท่ากับโค้ด Workbox นี้:
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());
การขอความช่วยเหลือ
เราคาดว่าการย้ายข้อมูลส่วนใหญ่ไปยัง Workbox จะไม่ซับซ้อน หากพบปัญหาที่ไม่ได้กล่าวถึงในคู่มือนี้ โปรดแจ้งให้เราทราบโดยเปิดปัญหาใน GitHub