[英]How to resolve `Uncaught (in promise) DOMException: Quota exceeded` error in service worker when browsing website in `Incognito mode` in Google chrome
如何解決(或隱藏) Uncaught (in promise) DOMException: Quota exceeded
在谷歌瀏覽器中以Incognito mode
瀏覽網站時服務工作者中的Uncaught (in promise) DOMException: Quota exceeded
錯誤。
在正常模式下,一切正常。
我的漸進式 Web 應用程序的 Service Worker 代碼是
var version = 'v2:';
var offlineFundamentals = [
'/',
'/offline.html'
];
var updateStaticCache = function () {
return caches.open(version + 'fundamentals').then(function (cache) {
return Promise.all(offlineFundamentals.map(function (value) {
var request = new Request(value);
var url = new URL(request.url);
if (url.origin != location.origin) {
request = new Request(value, {
mode: 'no-cors'
});
}
return fetch(request).then(function (response) {
var cachedCopy = response.clone();
return cache.put(request, cachedCopy);
});
}))
})
};
var clearOldCaches = function () {
return caches.keys().then(function (keys) {
return Promise.all(keys.filter(function (key) {
return key.indexOf(version) != 0;
}).map(function (key) {
return caches.delete(key);
}));
});
};
var limitCache = function (cache, maxItems) {
cache.keys().then(function (items) {
if (items.length > maxItems) {
cache.delete(items[0]);
}
})
};
var trimCache = function (cacheName, maxItems) {
caches.open(cacheName).then(function (cache) {
cache.keys().then(function (keys) {
if (keys.length > maxItems) {
cache.delete(keys[0]).then(trimCache(cacheName, maxItems));
}
});
});
};
var hasUrlCacheExcludeMatch = function (url) {
var cacheExcludeUrls = [
"https:\/\/example.com\/user\/login",
"https:\/\/example.com\/user\/register"
];
return cacheExcludeUrls.some(path => url.includes(path));
};
self.addEventListener("install", function (event) {
event.waitUntil(updateStaticCache().then(function () {
return self.skipWaiting();
}));
});
self.addEventListener("message", function (event) {
var data = event.data;
if (data.command == "trimCache") {
trimCache(version + "pages", 80);
trimCache(version + "images", 50);
trimCache(version + "assets", 50);
}
});
self.addEventListener("fetch", function (event) {
var fetchFromNetwork = function (response) {
var cacheCopy = response.clone();
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
if (!hasUrlCacheExcludeMatch(event.request.url)) {
caches.open(version + 'pages').then(function (cache) {
cache.put(event.request, cacheCopy).then(function () {
limitCache(cache, 80);
})
});
}
} else if (event.request.headers.get('Accept').indexOf('image') != -1) {
caches.open(version + 'images').then(function (cache) {
cache.put(event.request, cacheCopy).then(function () {
limitCache(cache, 50);
});
});
} else {
caches.open(version + 'assets').then(function add(cache) {
cache.put(event.request, cacheCopy).then(function () {
limitCache(cache, 50);
});
});
}
return response;
}
var fallback = function () {
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
return caches.match(event.request).then(function (response) {
return response || caches.match('/offline.html');
})
}
}
if (event.request.method != 'GET') {
return;
}
if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
event.respondWith(fetch(event.request).then(fetchFromNetwork, fallback));
return;
}
event.respondWith(caches.match(event.request).then(function (cached) {
return cached || fetch(event.request).then(fetchFromNetwork, fallback);
}))
});
self.addEventListener("activate", function (event) {
event.waitUntil(clearOldCaches().then(function () {
return self.clients.claim();
}));
});
在 Google chrome 中以正常模式瀏覽網站工作正常,控制台中沒有錯誤發生。 我不擅長服務工作者,所以我無法解決這個問題。
這有點不明顯。
配額超出錯誤意味着您的可用空間不足,這是 Chrome 總空間的 6%。
對於隱身模式,所有存儲和工作 api 都在工作,但配額空間等於零字節,因此,您無法寫入。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.