Facebook Pixel и Workbox в NextJS с использованием next-pwa Cannot Trigger Event

Question

В настоящее время я использую Facebook Pixel в своем коде для обработки дедупликации событий. Все функции инициализации и отслеживания были успешно отправлены и зарегистрированы в Facebook.

Но когда я использую next-pwa для создания PWA, пиксель Facebook выходит из строя. Событие Facebook Pixel срабатывает только при жесткой перезагрузке (Ctrl + F5), но когда я обновляю страницу или повторно посещаю страницу, пиксель Facebook не срабатывает. Я использую Facebook Pixel Helper, чтобы узнать, произошло ли событие или нет.

Увидев вкладку «Сеть» и журнал консоли Workbox, я заметил, что Workbox, возможно, перехватывает запрос к Facebook.Журнал рабочего ящика для вкладки «
Сеть Facebook» для «Добавить в корзину»

Мой код для внедрения Facebook Pixel Script:

      export const InjectFBQ = (
  f?: any,
  b?: any,
  e?: any,
  v?: any,
  n?: any,
  t?: any,
  s?: any
) => {
  if (!f.fbq && typeof window !== 'undefined') {
    n = f.fbq = function () {
      n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
    };
    if (!f._fbq) f._fbq = n;
    n.push = n;
    n.loaded = !0;
    n.version = '2.0';
    n.queue = [];
    t = b.createElement(e);
    t.async = !0;
    t.src = v;
    s = b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t, s);
  }
};

export const InitializeFBQ = (pixelID: string) => {
  if (typeof window !== 'undefined') {
    window.fbq('init', pixelID);
    window.fbq.disablePushState = true;
    window.fbq.allowDuplicatePageViews = true;
  }
};

затем в моем index.js я вызываю его с помощью useEffect Hook. Обратите внимание, что PixelID извлекается из GraphQL:

          useEffect(() => {
      if (typeof window !== 'undefined' && PixelID) {
        if (
          !localStorage.getItem('PixelID') ||
          localStorage.getItem('PixelID') === undefined
        ) {
          localStorage.setItem('PixelID', PixelID);
        }
      }
      
      if(typeof window !== 'undefined'){
        InjectFBQ(
          typeof window !== 'undefined' && window,
          typeof window !== 'undefined' && document,
          'script',
          'https://connect.facebook.net/en_US/fbevents.js'
        );
        InitializeFBQ(PixelID)
      }

    }, [PixelID]);

Мой следующий.config.js

      const withPWA = require('next-pwa');

module.exports = withPWA({
  target: 'server',
  pwa: {
    dest: 'public',
    // disable: process.env.NODE_ENV === 'development',
    maximumFileSizeToCacheInBytes: 10000000,
  },
})

Я пытался инициализировать пиксель Facebook при каждой перезагрузке страницы, но, к сожалению, это не сработало. Я думаю, что это как-то связано с тем, как Workbox обрабатывает сторонний запрос. Уже читал об обработке сторонних запросов от Google, но тоже не работает. Любая помощь в этом?

Благодарю вас!