addEventListener ('fetch', callback) никогда не запускает обратный вызов в ReactJS

Question

Я пытаюсь перехватить fetch в своем приложении React с кодом из этого ответа

window.addEventListener('fetch', event => { console.log("FETCH CAPTURED"); } );

Но я никогда не вижу журнал FETCH CAPTURED. Можно ли перехватить fetch , а не у обслуживающего работника?

Answer 1

Вам нужно будет использовать cra-append-sw для автоматического добавления вашего кода в Service Worker.

---

Из документации:

Утилита для добавления пользовательского кода в ServiceWorker, созданный приложением Create React.
Позволяет сохранить конфигурацию CRA по умолчанию (без извлечения). Он просто добавляет пользовательский код в файл ServiceWorker, созданный сценариями сборки CRA. По умолчанию он связывает код с использованием очень простой конфигурации Webpack + Babel (это можно не указывать; см. Параметры).

Использование : $ cra-append-sw [options] <file>

Использование с create-реагировать-приложение :

"start": "react-scripts start && cra-append-sw --mode dev ./custom-sw.js",
"build": "react-scripts build && cra-append-sw ./custom-sw.js", 

---

Вы также можете добавить свой код вручную в сгенерированный файл (без использования cra-append-sw), но вы 'Я должен делать это каждый раз, когда вы хотите построить свой проект.

Answer 2

'fetch' - это поддерживаемое событие / аргумент методом ServiceWorker#addEventListener. Похоже, это событие не имеет никакого значения для метода ElementTarget#addEventListener, который вызывается при вызове document.addEventListener. Здесь - список поддерживаемых методов.