リダイレクトされたレスポンスが、リダイレクトモードが「フォロー」でないリクエストに使用されました。

Question

Chromeでリフレッシュ（またはオフライン）すると、 「到達する」と表示され、コンソールに次のログが記録されます：The FetchEvent for "http://localhost:8111/survey/174/deployment/193/answer/offline/attendee/240/" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".。 Firefoxでリフレッシュするとすべて正常に動作します。誰かがなぜこれが起こっているのか説明できますか？

ここに私の簡略化されたSWがあります。

importScripts("/static/js/libs/idb.js") 

var CACHE_NAME = "upshot-cache-version3" 
var urlsToCache = [...] 

self.addEventListener("install", event => { 
    event.waitUntil(
    caches 
     .open(CACHE_NAME) 
     .then(cache => { 
     urlsToCache.map(url => cache.add(url)) 
     }) 
) 
}) 

self.addEventListener("activate", event => { 
    clients.claim() 
}) 

self.addEventListener('fetch', event => { 
    event.respondWith(
    caches 
     .match(event.request) 
     .then(response => { 

     if (response) { 
      return response 
     } 

     var fetchRequest = event.request.clone() 

     return fetch(fetchRequest).then(response => { 
      if (!response || response.status !== 200 || response.type !== 'basic') { 
      return response 
      } 
      var responseToCache = response.clone() 
      caches.open(CACHE_NAME).then(cache => cache.put(event.request, responseToCache)) 
      return response 
     }) 

     }) 
) 
}) 

Answer 1

これはナビゲーションを満たすために使用することができます応答のどのような周りのセキュリティ制限で（比較的）最近の変更によるものです。これは、サービスワーカー（現在はChromeとFirefoxの両方）をサポートしているすべてのブラウザに適用する必要がありますが、古いバージョンのFirefoxでテストしている可能性があります。

issue tracker entryには変更された背景があります。その背景には、more backgroundもあります。

セキュリティ制限を処理するようにサービスワーカーを変更するという点で、HTTP 30xリダイレクトを使用して特定のURLのナビゲーション要求に現在応答している場合は、その応答をキャッシュに直接リダイレクトしました。

あなたはその可能性応答の「クリーン」なコピーを作成するために、与えられた応答はresponse.redirectedがtrueあり、そうであれば、この線に沿って使用コード（Workboxプロジェクトから適応）かどうかをチェックすることによって、リダイレクトされたかどうかを伝えることができます

function cleanResponse(response) { 
    const clonedResponse = response.clone(); 

    // Not all browsers support the Response.body stream, so fall back to reading 
    // the entire body into memory as a blob. 
    const bodyPromise = 'body' in clonedResponse ? 
    Promise.resolve(clonedResponse.body) : 
    clonedResponse.blob(); 

    return bodyPromise.then((body) => { 
    // new Response() is happy when passed either a stream or a Blob. 
    return new Response(body, { 
     headers: clonedResponse.headers, 
     status: clonedResponse.status, 
     statusText: clonedResponse.statusText, 
    }); 
    }); 
}