Question

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

但是当我第一次运行该应用程序时，文件与其他文件一起被缓存 Cached Files

这是我在其中添加字体文件的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;
});

我该如何解决这些错误？任何帮助将不胜感激。

Answer 1

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

来自developer.mozilla.org

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

服务人员-无法提取文件

1 个答案: