почему не работают мои собственные события работника службы, настроенные в файле config-workbox в swSr c?

Question

Я использую рабочий ящик с реагировать. js для сборки PWA. сначала я помещаю конфигурацию в scripts/build.js примерно так

const buildSW = () => {
  return workboxBuild
    .injectManifest({
      swSrc: 'src/sw-base.js',
      swDest: 'build/service-worker.js',
      globDirectory: 'build',
      globPatterns: ['**/*.{json,png,svg,jpg,html,js}'],
    })
    .then(({ count, size, warnings }) => {
      // Optionally, log any warnings and details.
      warnings.forEach(console.warn);
      console.log(`${count} files will be precached, totaling ${size} bytes.`);
    });
};

, когда я запускаю yarn build новый предварительный sh манифест и service-worker.js созданные файлы.

my service-worker.js файл успешно зарегистрирован в public/index.html, и с кэшированием на рабочем столе все идет хорошо.

проблема здесь в том, что когда я пытался добавить новый кеш в свой собственный файл sw-base.js, я не могу найти этот кеш в Обнаружен только кеш браузера, созданный с рабочим окном

Я хочу добавить свою собственную реализацию кеша в свой sw-base.js, и это мой собственный сервисный работник в src/sw-base.js

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
import * as googleAnalytics from 'workbox-google-analytics';

registerRoute(new RegExp('/styles/'), new CacheFirst());

googleAnalytics.initialize({
  parameterOverrides: {
    cd1: 'offline',
  },
});

registerRoute(
  /\.(?:png|gif|jpg|svg)$/,
  new CacheFirst({
    cacheName: 'image-cache',
  }),
);

registerRoute('http://localhost:5000/images/flags/egy.svg', new StaleWhileRevalidate());


registerRoute(new RegExp('/(.*)'), new StaleWhileRevalidate());

precacheAndRoute(self.__WB_MANIFEST);