サービスワーカーで動的なPHPファイルをキャッシュすることはできますか？

Question

ログインしたときに（セッションクッキーで）動的なphpファイルからhtmlをキャッシュしようとしていますが、htmlファイルがセッションクッキーの資格情報なしでサーバーからフェッチされています。私はテキストを見てみると

let cacheName = 'q2'; 

    let files = [ 
    '/q/', 
    '/q/sw.js', 
    '/q/js/main.js', 
    '/q/js/init.js', 
    '/q/js/lib.js', 
    '/q/css/css.css', 
    '/q/images/b.jpg', 
    '/q/apps/BOK/js/main.js' 
    ]; 


    self.addEventListener('install', (event) => { 
     event.waitUntil(
      caches.open(cacheName) 
      .then((cache) => { 
       return cache.addAll(files) 
       .then(() => { 
        console.info('All files are cached'); 
        return self.skipWaiting(); 
       }) 
       .catch((error) => { 
        console.error('Failed to cache', error); 
       }); 
      }) 
     ); 
    }); 

（私は/ self.addEventListener（「フェッチ」、機能（イベント））

を省略している（私はURLでのみパスをファイル名を指定しないでください） PHPのセッションクッキーのPHPSESSIDと内容は、したがって、間違っていることなく、「/ Q /サービスワーカーはサーバーからそれをフェッチしている。

をからhtmlファイル（そうでなければ、それは完璧なオフラインで動作します）

はこれに対する解決策はあります？

Answer 1

この現象は、Fetch API Specificationで説明されています。

HTTPクッキー（およびその他のいくつかのもの）は、「credentials」と呼ばれます。

資格情報が発信HTTP要求に含まれるかどうかは、Requestオブジェクトのcredentials propertyの値によって決まります。既定では、credentialsは'omit'に設定されています。これは表示されている動作につながります。 HTTPクッキーのような資格情報が必要な場合は、のオブジェクトを使用して、credentialsのプロパティを'include'に設定する必要があります。

これを行うには、cache.addAll()に文字列を渡す代わりに、適切なcredentialsモードを明示的に設定してRequestオブジェクトの配列を渡す必要があります。コードの変更方法は次のとおりです。

const requestsWithCredentials = [ 
    '/q/', 
    '/q/sw.js', 
    '/q/js/main.js', 
    '/q/js/init.js', 
    '/q/js/lib.js', 
    '/q/css/css.css', 
    '/q/images/b.jpg', 
    '/q/apps/BOK/js/main.js' 
].map(url => new Request(url, {credentials: 'include'})); 

// Later... 
cache.addAll(requestsWithCredentials);