未捕获(承诺中)DOMException:超出配额

2024-03-08

我正在尝试查看离线状态演示 https://serviceworke.rs/offline-status_demo.html从下面的链接,我得到 DOMException: 超出配额。

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

此错误仅出现在 chrome 中。在 Firefox 中运行正常,不会出现错误。

该错误发生在 Service Worker 的安装事件中。 下面发布了来自服务人员的代码以供参考。

// /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的配额限制?

EDIT1:
This link https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c说 Chrome 检查每个源的配额限制,而 Firefox 则有无限配额。

有没有办法删除从源缓存的所有文件(重置为原始状态)?


Offline-status_demo 仅下载 700kb,因此本身不能超过 5MB Chrome 配额限制。除非 Chrome 缓存已满 - 如果您有的话也会出现这种情况too many打开选项卡。

答:在隐身模式下重试。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

未捕获(承诺中)DOMException:超出配额 的相关文章

随机推荐