Uncaught (in promise) DOMException: Quota exceeded

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

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 2

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.