为什么我会收到一条错误消息，指出 CacheFirst 未定义？

Question

我正在使用工作箱为 React 项目构建服务工作者，我不确定出了什么问题，但我在控制台中不断收到错误消息 Cannot读取未定义的属性 'CacheFirst'。

我正在获取的路由来自带有 sqlite 数据库的 nodejs 后端，它 returns 的数据来自数据库中列出的日期。我不确定这是否与它有关或它只是一个 Workbox 问题。每次更新此文件后，我都会执行 workbox injectManifest 然后使用 serve -s -p3000 build 在浏览器中为应用程序提供服务。

importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"
);

if (workbox) {
  console.log(`Yay! Workbox is loaded `);
} else {
  console.log(`Boo! Workbox didn't load `);
}

let d = new Date();

let year = d.getFullYear();
let month = d.getMonth() + 1;
let day = d.getDate();

if (month < 10) {
  month = "0" + month;
}
if (day < 10) {
  day = "0" + day;
}

let today = `${year}-${month}-${day}`;

workbox.routing.registerRoute(
  new RegExp(`http://localhost:5000/routes/${today}`),
  new workbox.stategies.CacheFirst()
);


workbox.routing.registerRoute(
  /^https:\/\/fonts\.googleapis\.com/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: "google-fonts-stylesheets"
  })
);


workbox.routing.registerRoute(
  /^https:\/\/fonts\.gstatic\.com/,
  new workbox.strategies.CacheFirst({
    cacheName: "google-fonts-webfonts",
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200]
      }),
      new workbox.expiration.Plugin({
        maxAgeSeconds: 60 * 60 * 24 * 365,
        maxEntries: 30
      })
    ]
  })
);

workbox.precaching.precacheAndRoute([]);

Answer 1

stategies拼错了，应该是strategies.

为什么我会收到一条错误消息，指出 CacheFirst 未定义？

Why am i getting an error saying CacheFirst is not defined?

reactjs

service-worker

workbox

workbox-webpack-plugin