Service Worker - 无法获取文件答案

【问题标题】：Service Worker - Failed to fetch filesService Worker - 无法获取文件
【发布时间】：2020-06-18 06:46:06
【问题描述】：

Service Worker 已集成在应用中。当 CSS 请求 Poppins-Regular.ttf 文件服务工作者不发送缓存文件。控制台“抛出”错误 [url] 的 FetchEvent 导致网络错误响应

但当我第一次运行应用程序时，这些文件会与其他文件一起被缓存

这是我添加字体文件的 CSS 文件的代码


@font-face {
    font-family: Poppins-Regular;
    src: url('../fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: Poppins-Medium;
    src: url('../fonts/Poppins-Medium.ttf');
}

这是服务工作者代码

const __cacheName = 'MyCache';
const __precacheResources = [
    
    //fonts
    '/inv/fonts/Segoe-UI.ttf',
    '/inv/fonts/Segoe-UI-Bold.ttf',
    '/inv/fonts/Poppins-Medium.ttf',
    '/inv/fonts/Poppins-Regular.ttf',

];

var isFileLoadFinished = false;

self.addEventListener('install', event => {
    isFileLoadFinished = false;
    console.log('Service worker :', __sw_version, 'is installed!');
    self.skipWaiting();
    caches.delete(__cacheName);

    event.waitUntil(
        caches.open(__cacheName)
            .then(cache => {
                return cache.addAll(__precacheResources)
                    .then(() => {
                        isFileLoadFinished = true;
                    })
            })
    );
});

/*
    this will send the object to the client via a message
    @param {msg_} is an object to send to 
    @return null
*/
function sendMessagetoClients(msg_) {
    console.log('sending msg to client. msg id is:', msg_.id)
    self.clients.matchAll({
        includeUncontrolled: true,  //returns only the service worker clients controlled by the current service worker. The default is false.
        type: "all"// "window"
    }

    ).then(clients => {
        if (clients.length == 0) {
            console.log('No clients');

        }
        clients.forEach(client => {
            console.log('the client is ', client);
            client.postMessage(msg_);
        });
    });
}

self.addEventListener('activate', event => {
    console.log('%s : Service worker :', (new Date()).toISOString(), __sw_version, ' is active! ');
    sendMessagetoClients({
        id: 002,
        msgText: 'All items loaded',
        data: isFileLoadFinished
    });
});

self.addEventListener('fetch', event => {
    event.respondWith(caches.match(event.request)
        .then(cachedResponse => {
            if (cachedResponse) {
                return cachedResponse;
            }
            return fetch(event.request).catch(err => {
                console.error(err);
            });
        })
    );
});

self.addEventListener('message', event => {
    console.log('%s : message received. msg id : %s', (new Date()).toISOString(), event.data.id);

    //process the msg
    if (event.data.id) {
        if (event.data.id == 001) {
            sendMessagetoClients({
                id: 002,
                data: isFileLoadFinished
            })
        } else if (event.data.id == 003) {
            sendMessagetoClients({
                id: 004,
                data: __sw_version
            })
        }

    }
    return;
});

我应该怎么做才能修复这些错误？任何帮助将不胜感激。

【问题讨论】：

请不要发布截图，而是格式化问题内的代码。

标签： javascript service-worker

【解决方案1】：

将caches.match(event.request) 更改为caches.match(event.request, { ignoreSearch: true })
确保请求的 URL 与缓存中的 URL 相同 ('/inv/fonts/Poppins-Medium.ttf')

来自developer.mozilla.org

ignoreSearch：一个布尔值，指定是否忽略 URL 中的查询字符串。例如，如果设置为 true，则在执行匹配时，http://example.com/?value=bar 的 ?value=bar 部分将被忽略。默认为false。

【讨论】：