How to resolve(or hide) Uncaught (in promise) DOMException: Quota exceeded
error in service worker when browsing website in Incognito mode
in Google chrome.
Every thing works fine in normal mode.
Service worker code of my progressive web app is
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();
}));
});
Browsing website in Normal mode in Google chrome works fine no error occures in console. I am not good in service worker so I am unable to resolve this issue.
This is a bit unobvious.
Quota exceed error means that your out of available space, which is 6% of total space for Chrome.
For incognito mode all storage and workers api is working, but quota space is equals zero bytes and, thus, you can not write to it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.