2017-11-02 24 views
2

ユーザーがオフラインのときにメッセージを表示するページを作成していますが、サービス担当者がページをキャッシュしようとすると、常にChromeコンソールにスローされます。サービス担当者が単純なhtmlファイルをキャッシュできない

service-worker.js?v = 1:1キャッチされていない(約束している)DOMException:クォータ を超えました。 ?約束は サービスworker.js @(非同期)addEventListener.eventを拒否し、V = 1:10

サービス・ワーカー登録:

if ('serviceWorker' in navigator) { 
navigator.serviceWorker.register('./assets/app/js/service-worker.js?v=1').then(function(registration) { 
    // Registration was successful 
    console.log('ServiceWorker registration successful with scope: ', registration.scope); 
}).catch(function(err) { 
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err); 
});} 

サービス労働者:

'use strict'; 

var cacheVersion = 1; 
var currentCache = { 
    offline: 'offline-cache' + cacheVersion 
}; 
var offlineUrl = '../../../offline.html'; 

this.addEventListener('install', event => { 
    event.waitUntil(
     caches.open(currentCache.offline).then(function (cache) { 
      return cache.addAll([ 
       offlineUrl 
      ]); 
     }) 
    ); 
}); 


this.addEventListener('fetch', event => { 

    if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) { 
     event.respondWith(
      fetch(event.request.url).catch(error => { 
       return caches.match(offlineUrl); 
      }) 
     ); 
    } 
    else { 
     event.respondWith(caches.match(event.request) 
      .then(function (response) { 
       return response || fetch(event.request); 
      }) 
     ); 
    } 
}); 

offline.html:

<div> offline test </div> 

私はalre adyはすべてのキャッシュを削除し、「Quota exceeded」と言いました。

ありがとうございました。

答えて

0

本番でのサービスの労働者を使用する場合、私は(一気またはウェブパック用)SW-プリキャッシュプラグインや仕事箱を使用してお勧めします。その後、キャッシュファイルのURLをbundlerで設定することができます。実際のプロジェクトからのWebPACKSW-プリキャッシュ持つ例:

new SWPrecacheWebpackPlugin(
     { 
      cacheId: "static-cache", 
      filepath: __dirname + "/app/public/sw.js", 
      stripPrefix: __dirname + "/app/public/", 
      replacePrefix: "/", 
      staticFileGlobs: [ 
       __dirname + "/app/public/dist/**/*.{js,html,css,eot,ttf,woff,woff2}", 
       __dirname + "/app/public/img/**/*.{png,jpg,gif,svg}", 
       __dirname + '/app/public/offline.html' /* here you can set offline urls*/ 
      ], 
      navigateFallback: __dirname + "/app/public/index.html" 
     } 
    ) 
+0

これは、元の質問に答えていません。 google serviceworkerライブラリ(workbox、sw-precache、sw-toolbox)のいずれかを使用していても、このエラーが発生することがあります。 –

関連する問題