web-dev-qa-db-ja.com

キャッチされなかった（約束された）DOMException：クォータ超過

以下のリンクから オフラインステータスのデモ を表示しようとすると、DOMException：クォータを超過しました。

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

このエラーを修正する方法は？クロムのクォータ制限を増やす方法はありますか？

編集1：
これ link は、ChromeがOriginごとの割り当て制限をチェックするのに対し、Firefoxは割り当てが無制限であることを示しています。

Originからキャッシュされたすべてのファイルを削除する方法（元の状態にリセット）はありますか？

javascriptgoogle-chromeservice-worker
11
Prakash N

Offline-status_demoは700kbのみをダウンロードするため、5MBを超えることはできませんChrome独自のクォータ制限。Chromeキャッシュがすでにいっぱいでない限り- 多すぎる開いているタブがある場合。

回答：シークレットモードでもう一度お試しください。

4
DukeDrake

割り当て制限を増やす方法はないと思います。キャッシュするファイルの数を減らすか、圧縮率を上げる必要があります。

1
Michał Perłakowski

あなたのコードに基づいて私が考えることができる解決策は、キャッシュ名にバージョンを付けることができ、古いアセットが必要ないときはいつでも、キャッシュ全体を削除して新しいキャッシュを保持することができます。例えば：

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

これがあなたが探しているものであることを願っています。

1
Majid