分享一个sw对请求的监听处理方案

gongaiorg

监听所有网络请求

/**
 * 捕获所有网络请求
 */
self.addEventListener('fetch', async (event) => {
    let urlObj = new URL(event.request.url);// 获取请求的 URL
    //只允许特定域名的请求
    if ( config &&  config.appCache.host.includes(urlObj.hostname)) {
        // 捕获所有网络请求
        event.respondWith(
            (async () => {
                //获取请求方式
                let method = event.request.method;
                //console.log('fetch',event.request.url);
                let url = event.request.url;
                // 如果是特定域名则保存到IndexedDB
                let requestManager = new RequestManager;
                const isNavigationRequest = event.request.mode === 'navigate'; // 是否为导航请求,用户试图加载一个新页面或刷新当前页面
                let indexedDbManager =
                    new IndexedDbManager(config.appCache.dbName, config.appCache.storeName, config.appCache.key || 'url');
                let responsePromise;// 响应结果
                const fileExistsInIndexedDb = await indexedDbManager.exists(url);// 获取文件是否存在
                // 先检查IndexedDB中是否存在请求的资源
                if (!fileExistsInIndexedDb) { // 如果文件不存在
                    responsePromise = requestManager
                        .fetchRequest(url, requestManager, indexedDbManager, isNavigationRequest, method)
                        .then((networkResponse) => {
                            return networkResponse;
                        })
                } else {
                    responsePromise = indexedDbManager.get(url); // 从IndexedDB中获取资源
                }
                return await responsePromise;
            })()
        );
    }

});
278 0 0
0个回答

×
🔝