いつもindex.htmlで応答する

Question

リアクションアプリ（通常）はすべてのURLに同じindex.htmlを使用しています。これが私のサーバの応答です。

しかし、最初の要求は決してexample.com/index.htmlではありません、それはたとえばexample.com/、example.com/posts、example.com/post/123、example.com/contactのためだと私はクロームデベロッパーツールからオフラインモードをオンにするように...

は、私はちょうど接続なしのページをデフォルトにしない取得します。

キャッシュからindex.htmlといつも反応しますか？

---

関連するコード：localhostを使用して

self.addEventListener('install', function(e) { 
    self.skipWaiting() 

    e.waitUntil(
     caches.open('v1').then(function(cache) { 
      return cache.addAll([ 
       'index.html', 
       'main.js', 
       'main.css' 
      ]) 
     }) 
    ) 
}) 

self.addEventListener('fetch', function(e) { 
    e.respondWith(
     caches.match(e.request).then(function(match) { 
      // If no match in cache, send request 
      return match || fetch(e.request) 
     }) 
    ) 
}) 

---

イムが、それはこの問題に来るとき、私はそれが重要なことを任意の情報を見つけることができませんでした。

Answer 1

キャッシュからキャッシュヒットのみを明示的に開こうとしているからです（お客様のfetchリスナーのcaches.match(e.request).then ...）。したがって、手動でキャッシュに追加したURLと一致するだけです。

事前にキャッシュされた値を持つすべての要求に対して応答するには、あなたがこのような何か、明示的index.htmlキャッシュエントリを探すために必要があるだろう：

self.addEventListener('fetch', function(e) { 
    var indexRequest = new Request('/index.html'); 

    // route index.html-based URLs to the specific cache directly 
    if (shouldRespondWithIndex(e.request.url)) { 
     e.respondWith(caches.match(indexRequest)) 
    } else { 
     // other URLs may go through the standard "look for exact match 
     // in the cache with network fallback" route 
     e.respondWith(
      caches.match(e.request).then(function(match) { 
       // If no match in cache, send request 
       return match || fetch(e.request) 
      })) 
    } 
}) 

あなたshouldRespondWithIndex実装はすべての非のためfalseを返す必要があります注意文書、スタイルシートなどの文書の要求である場合、Service Workerはそれをindex.htmlに置き換えます。

Answer 2

あなたはあなたのコードのこの部分を変更する必要があります。

caches.match(e.request).then(function(match) { 
    // If no match in cache, send request 
    return match || fetch(e.request) 
}) 

が希望条件指定されたindex.htmlに戻ります。詳細は、キャッシュのドキュメントを参照してください。

https://developer.mozilla.org/en-US/docs/Web/API/Cache

それ以外の場合は返すことがあります、あなたはどのように処理するかを決定する必要があり一部が帰国のindex.htmlが良いかどうかを確認するためにevent.requestを確認する方法で、訪問者に対応し、そのオフライン画面を回避するために、あなたがしたくない時でさえ。あなたはevent.respondWithを使う必要があります。手動でキャッシュを開き、必要なキャッシュ要素を見つけて返します。したがって、event.requestに一致するものを探す代わりに、次のようにindex.htmlに一致するものを見つけてください：

event.respondWith(

    // Opens Cache objects that start with 'font'. 
    caches.open(CURRENT_CACHES['font']).then(function(cache) { 
     return cache.match('/index.html').then(function(response) { 
     if (response) { 
      console.log(' Found response in cache:', response); 

      return response; 
     } 
     }).catch(function(error) { 

     // Handles exceptions that arise from match() or fetch(). 
     console.error(' Error in fetch handler:', error); 

     throw error; 
     }); 
    }) 
);