ย้ายข้อมูลจาก sw-precache หรือ sw-toolbox

นักพัฒนาซอฟต์แวร์ที่เคยใช้ 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