サービスワーカーはバックボーンをブロックしますか？

Question

私はBackbone.jsを使ってWebアプリケーションを構築しました.RESTfulなサービスへの呼び出しがたくさんあり、魅力的に機能します。

前回の呼び出しをすべてキャッシュしてServiceWorkerを追加して、オフラインで利用できるようにしました。

私は何を実際に取得することは、私が最初にやるの呼び出しは、このエラーで死ぬということです：

Failed to load resource: net::ERR_FAILED

しかしページのリロードに、私はそれがデータ

をキャッシュされた取得

マイサービスワーカーは、フェッチ：

self.addEventListener('fetch', function(e) { 
// e.respondWidth Responds to the fetch event 
e.respondWith(

    // Check in cache for the request being made 
    caches.match(e.request) 
     .then(function(response) { 

      // If the request is in the cache 
      if (response) { 
       console.log("[ServiceWorker] Found in Cache", e.request.url, response); 
       // Return the cached version 
       return response; 
      } 

      // If the request is NOT in the cache, fetch and cache 

      var requestClone = e.request.clone(); 
      fetch(requestClone) 
       .then(function(response) { 

        if (!response) { 
         console.log("[ServiceWorker] No response from fetch ") 
         return response; 
        } 

        var responseClone = response.clone(); 

        // Open the cache 
        caches.open(cacheName).then(function(cache) { 

         // Put the fetched response in the cache 
         cache.put(e.request, responseClone); 
         console.log('[ServiceWorker] New Data Cached', e.request.url); 

         // Return the response 
         return response; 

        }); // end caches.open 
        console.log("Response is.. ?", response) 
        return response; 

       }) 
       .catch(function(err) { 
        console.log('[ServiceWorker] Error Fetching & Caching New Data', err); 
       }); 


     }) // end caches.match(e.request) 
); // end e.respondWith 
}); 

---

編集： 私はAの必要性があるとは思いませんny Backbone.js Webアプリケーションコード。 Backbone.jsモデルとコレクションのfetchメソッドを使用します。 https://jsonplaceholder.typicode.com/posts/1 と https://jsonplaceholder.typicode.com/posts/2

よう 呼び出しが初めてで、このエラーを表示し再生します。ページをリフレッシュした後、私はリクエストせずにこの情報を持っています。すべてキャッシュから。 と私はまだ行っていない他のすべての要求は、私が見る唯一の問題は、要求がキャッシュ内にないとき、あなたはfetch行うということです

Answer 1

エラーに滞在しますが、リターンをしないでくださいそのfetchの結果を同封のthenハンドラに転送します。あなたが持っているようにreturnを追加する必要があります。fetchのためにあなたのthenハンドラ内return文によって提供されるデータの

return fetch(requestClone) 
      .then(function(response) { 

なしそれ以外の場合はチェーンを移さないでしょう。

---

また、caches.open(cacheName).then...によって提供される約束を返さないこともわかります。これはかもしれませんチェーンの上に結果を返すことからキャッシュのレスポンスを保存することを切り離したいのであれば問題ありませんが、少なくとも私はここに残しておきます読者は、returnのステートメントが偶然に欠落しているのか、それとも意図的に行われたのかを理解する。

Answer 2

さらに検索して解決しました。

this.listenTo(this.collection,"reset",this.render); 
this.listenTo(this.collection,"add",this.addCollectionItem); 
this.listenTo(this.collection,"error", this.errorRender); 

私のサービスの労働者が帰国している間の約束： を行うために使用されるWebアプリで自分の意見をBACKBONE.JS。

私はこのような何かに私のいくつかのコード私のWebアプリケーションのビューを変更しなければならなかった

：

this.collection.fetch({},{reset:true}) 
    .then(_.bind(this.render, this)) 
    .fail(_.bind(this.errorRender,this)) 

多かれ少なかれ...