未捕获（承诺）DOMException：超出配额

Question

I am trying to see the demo of offline status from the below link and I get DOMException: Quota exceeded.

https://serviceworke.rs/offline-status_demo.html

This error occurs only in chrome. It works fine in firefox without error in firefox.

The error occurs in the install event of the service worker. Code from the service worker in posted below for reference.

 // /serviceworker-cookbook/offline-status/ var CACHE_NAME = 'dependencies-cache'; // Files required to make this app work offline var REQUIRED_FILES = [ 'random-1.png', 'random-2.png', 'random-3.png', 'random-4.png', 'random-5.png', 'random-6.png', 'style.css', 'index.html', 'index.js', 'app.js' ]; self.addEventListener('install', function(event) { // Perform install step: loading each required file into cache event.waitUntil( // Error occurs here... Why??? caches.open(CACHE_NAME) .then(function(cache) { // Add all offline dependencies to the cache console.log('[install] Caches opened, adding all core components' + 'to cache'); return cache.addAll(REQUIRED_FILES); }) .then(function() { console.log('[install] All required resources have been cached, ' + 'we\\'re good!'); return self.skipWaiting(); }) ); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return the response from the cached version if (response) { console.log( '[fetch] Returning from ServiceWorker cache: ', event.request.url ); return response; } // Not in cache - return the result from the live server // `fetch` is essentially a "fallback" console.log('[fetch] Returning from server: ', event.request.url); return fetch(event.request); } ) ); }); self.addEventListener('activate', function(event) { console.log('[activate] Activating ServiceWorker!'); // Calling claim() to force a "controllerchange" event on navigator.serviceWorker console.log('[activate] Claiming this ServiceWorker!'); event.waitUntil(self.clients.claim()); }); 

How to rectify this error? Is there a way to increase the quota limit in chrome?

EDIT1:
This link says that the Chrome checks quota limit per origin whereas firefox has unlimited quota.

Is there a way to delete all the files cached from the origin (reset to original state) ?

Answer 1

The offline-status_demo downloads merely 700kb and hence can't exceed the 5MB Chrome quota limit on its own. Unless Chrome Cache is already full - as would be the case if you have too many open tabs.

Answer: try again in incognito mode.

Answer 2

I don't think there's a way to increase the quota limit. You just have to cache fewer files, or maybe use better compression.

Answer 3

The solution that I can think of based on your code, you can give version to your cache name and then whenever you don't want old assets you can delete the whole cache and keep the new cache. for instance:

self.addEventListener('activate', function(event) {

  var cacheWhitelist = ['dependencies-cache-**v1**', 'dependencies-2-cache-**v1**'];// Version for your cache list 

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

I hope this is what you are looking for.