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

Posted 2023-03-31

【中文标题】未捕获（承诺）DOMException：超出配额

【英文标题】：Uncaught (in promise) DOMException: Quota exceeded

【发布时间】：2017-06-05 18:34:35

【问题描述】：

我试图从下面的链接中查看demo of offline status，我得到 DOMException: Quota exceeded。

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

此错误仅在 chrome 中发生。它在firefox中运行良好，在firefox中没有错误。

该错误发生在 service worker 的 install 事件中。 来自服务人员的代码在下面发布以供参考。

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

如何纠正这个错误？有没有办法增加chrome的配额限制？

编辑1： 这个link 说Chrome 检查每个来源的配额限制，而Firefox 有无限配额。

有没有办法删除所有从源缓存的文件（重置为原始状态）？

【问题讨论】：

您使用的是 Chrome 42.0+ 吗？

Chrome 版本为 58.0.3029.110（64 位），金丝雀版本为 61.0.3119.0（官方构建）金丝雀（64 位）

如果网页可以增加自己的配额，那么整个报价的想法将毫无意义。你需要说服用户允许它。

【参考方案1】：

offline-status_demo 仅下载 700kb，因此不能超过 5MB Chrome 配额限制。除非 Chrome 缓存已满 - 如果您有太多打开的标签页。

答案：在隐身模式下重试。

【讨论】：

我非常怀疑这是对所提问题的答案。它更像是一个（充其量是平庸的）评论。

我打算发表评论，但您需要“50 声望”才能这样做。

现在读起来好多了；-)

我清理了 chrome 的缓存并修复了标题中的错误。

【参考方案2】：

我认为没有办法提高配额限制。您只需要缓存更少的文件，或者使用更好的压缩。

【参考方案3】：

我可以根据您的代码想到的解决方案，您可以为缓存名称提供版本，然后每当您不想要旧资产时，您可以删除整个缓存并保留新缓存。例如：

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

我希望这是您正在寻找的。