ย้ายข้อมูลจาก 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

จาก CLI ของ sw-precache ไปยัง workbox-cli

นักพัฒนาซอฟต์แวร์ที่ใช้อินเทอร์เฟซบรรทัดคำสั่ง sw-precache ไม่ว่าจะเป็นการเรียกใช้คําสั่งด้วยตนเองหรือเป็นส่วนหนึ่งของกระบวนการบิลด์ตาม npm scripts จะพบว่าการใช้โมดูล workbox-cli เป็นวิธีที่ง่ายที่สุดในการย้ายข้อมูล การติดตั้ง workbox-cli จะทำให้คุณมีสิทธิ์เข้าถึงไบนารีชื่อ workbox

แม้ว่า sw-precache CLI จะรองรับการกำหนดค่าผ่าน Flag บรรทัดคำสั่งหรือไฟล์การกําหนดค่า แต่ 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 node ไปยังโมดูล workbox-build node

นักพัฒนาแอปที่ใช้ 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 ไปยังปลั๊กอิน Workbox webpack

นักพัฒนาแอปที่ใช้ 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

ย้ายข้อมูลจาก 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