我的缓存 API 在 React PWA 中不起作用

如何解决我的缓存 API 在 React PWA 中不起作用

我已将 API 缓存在我的 sw.js 文件中。在离线模式下，开发人员工具中的“我的网络”选项卡显示未获取我的 API，尽管我的缓存文件中存在我的 API。

我的 sw.js 文件：

console.log("Registered")

//CHACHE ALL FILES
let cacheData = "appv1"
this.addEventListener('install',(event) => {
    event.waitUntil(
        caches.open(cacheData).then((data) => {
            data.addAll([
                '/static/js/bundle.js','/static/js/vendors~main.chunk.js','/static/js/main.chunk.js','/static/js/0.chunk.js','/favicon.ico','/sockjs-node','index.html','/manifest.json','https://opentdb.com/api.PHP?amount=10&difficulty=easy&type=multiple','/','/logo192.png',]).then((succ) => {
                console.log(
                    "Cached All files",succ
                )
            }).catch((err) => {
                console.log('catch Error',err)
            })
        })
    )
})
self.addEventListener('activate',function (event) {
    console.log('[PWA Builder] Claiming clients for current page');
    return self.clients.claim();
});
// //FETCH ALL IN OFFLINE MODE
self.addEventListener('fetch',function (event) {
    console.log(event.request.url);
    if (!navigator.onLine) {


        //FETCHNG IN OFFLINE MODE
        event.respondWith(
            caches.match(event.request).then((response) => {
                if (response) {
                    return response
                }
                let requestUrl = event.request.clone()
                fetch(requestUrl).then((res) => {
                    console.log(res)
                }).catch((err) => {
                    console.log('RES URL',requestUrl)
                    console.log(err)
                })

            })
        )
    }
});

我的缓存文件

离线模式下的我的网络标签

我的 err msg

的响应控制台日志

我无法从 api 获得最终结果，我的应用程序处于加载状态