web-dev-qa-db-fra.com

DOMException non capturée (en promesse): quota dépassé

J'essaie de voir le démo de l'état hors ligne à partir du lien ci-dessous et j'obtiens DOMException: quota dépassé.

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

Cette erreur se produit uniquement dans Chrome. Cela fonctionne très bien dans Firefox sans erreur dans Firefox.

L'erreur se produit dans l'événement d'installation du technicien de service. Code du travailleur de service dans affiché ci-dessous pour référence.

// /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());
});

Comment rectifier cette erreur? Existe-t-il un moyen d'augmenter la limite de quota dans Chrome?

EDIT1:
Ce lien indique que le Chrome vérifie la limite de quota par origine tandis que Firefox a un quota illimité.

Existe-t-il un moyen de supprimer tous les fichiers mis en cache de l'origine (réinitialiser à l'état d'origine)?

javascriptgoogle-chromeservice-worker
11
Prakash N

Le offline-status_demo ne télécharge que 700 Ko et ne peut donc pas dépasser la limite de quota de 5 Mo Chrome seul. À moins que Chrome Le cache soit déjà plein - comme ce serait le cas) le cas si vous avez trop onglets ouverts.

Réponse: réessayez en mode navigation privée.

4
DukeDrake

Je ne pense pas qu'il existe un moyen d'augmenter la limite de quota. Vous n'avez qu'à mettre en cache moins de fichiers, ou peut-être utiliser une meilleure compression.

1
Michał Perłakowski

La solution à laquelle je peux penser en fonction de votre code, vous pouvez donner une version à votre nom de cache, puis chaque fois que vous ne voulez pas d'anciens actifs, vous pouvez supprimer tout le cache et conserver le nouveau cache. par exemple:

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);
          }
        })
      );
    })
  );
});

J'espère que c'est ce que vous recherchez.

1
Majid