cache apiからJavaScriptファイルを取得していません

Question

サービスワーカーを使用しないWeb純粋なバニラJavaScriptアプリケーションでは、AWS S3ファイルサーバー上にあるJavaScriptファイルを明示的にキャッシュします。次のスクリプトは、（それがクライアントのプロジェクトだと私はURLを変更した）アプリケーションのindex.htmlファイルに座って次のようになります。

<script> 
    caches.match('https://s3.amazonaws.com/com.myproject/myjavascript.js') 
    .then(function(response) { 
     if (response) { 
      return response; 
     } else { 
      fetch('https://s3.amazonaws.com/com.myproject/myjavascript.js') 
      .then(function(res) { 
       return caches.open('mycache') 
       .then(function(cache) { 
cache.put('https://s3.amazonaws.com/com.myproject/myjavascript.js',res.clone()); 
        console.log(res.clone()); 
        return res; 
       }); 
      }); 
     } 
    }); 
</script> 

私は、このコードは、次の操作を行う必要があると考えている。myjavascriptか確認してください。 jsファイルがキャッシュにあります。そうであれば、ブラウザによって実行されるJavaScriptファイルを返します。 myjavascriptfile.jsがキャッシュ内に見つからない場合、それはフェッチされ、サブキャッシュ「mycache」に配置され、最後に実行されるブラウザに戻されます。

これを実行すると、キャッシュ内のファイルのURLは「OK」ですが、コードはブラウザで実行されず、Chromeブラウザ内のソースには表示されません開発者ツール。

なぜこれが機能しないのですか？これについての私の考えは何が間違っていますか。

多くのおかげで、それ自体で フレッド

Answer 1

fetchはJavaScriptを実行されません。指定されたコンテンツを要求し、そのコードがアクセスできるようにするだけです。本当にこのアプローチを継続したい場合は、テキストを入力して評価することが可能です。

const url = 'https://unpkg.com/underscore@1.8.3/underscore-min.js'; 
caches.match(url) 
    .then(function(response) { 
    if (response) { 
     return response; 
    } else { 
     return fetch(url) 
     .then(function(res) { 
      return caches.open('mycache') 
      .then(function(cache) { 
       cache.put(url,res.clone()); 
       console.log(res.clone()); 
       return res; 
      }); 
     }); 
    } 
    }) 
    .then(function(response) { 
    console.log(response); 
    response.text().then(function(text) { 
     eval(text); 
     console.log(_); 
    }); 
    }); 

注：Why is using the JavaScript eval function a bad idea?

あなたが持っているコードサンプルは、一般的に接客業で見つかったパターンです。このコンテキストで動作する理由は、最初の要求は<script>タグであり、方向呼び出しではfetchではありません。 <script>タグのため、ブラウザは返されたコンテンツの実行を自動的に処理します。

<script src="https://unpkg.com/underscore@1.8.3/underscore-min.js"></script> 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.