分享一个sw对请求的监听处理方案
监听所有网络请求
/**
* 捕获所有网络请求
*/
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;
})()
);
}
});
0个回答