Récupération du fichier JavaScript à partir du cache api non exécutable

Question

Dans une application Web pur vanilla JavaScript qui n'utilise pas de personnel de service, je souhaite explicitement mettre en cache un fichier JavaScript installé sur un serveur de fichiers AWS S3. Le script suivant serait assis dans le fichier index.html pour l'application (je l'ai modifié l'URL comme il est un projet client):

<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> 

Je crois que ce code devrait faire ce qui suit: Vérifiez si le myjavascript. Le fichier js est dans le cache. Si c'est le cas, renvoyez le fichier JavaScript qui sera ensuite exécuté par le navigateur. Si myjavascriptfile.js n'est pas trouvé dans le cache, il sera récupéré et placé dans le sous-cache 'mycache' et finalement retourné au navigateur où il serait exécuté. Après avoir exécuté ceci, je trouve l'URL du fichier dans le cache avec une réponse de "Ok", mais le code n'est pas exécuté par le navigateur et je ne vois pas le contenu du fichier dans les sources dans le navigateur Chrome outils de développement.

Pourquoi cela ne fonctionnerait-il pas? Quel est le problème avec ma pensée à ce sujet.

Un grand merci, Fred

Answer 1

fetch par lui-même ne sera pas exécuter JavaScript. Il fait simplement une demande pour le contenu spécifié et le rend disponible pour le code à accéder. Si vous voulez vraiment continuer avec cette approche, il est possible de prendre le texte et de l'évaluer.

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(_); 
    }); 
    }); 

Note: Why is using the JavaScript eval function a bad idea?

L'exemple de code que vous avez est un modèle couramment dans les travailleurs des services. La raison pour laquelle cela fonctionne dans ce contexte est la demande initiale est de <script> étiquettes et non l'invocation de direction de fetch. En raison de l'étiquette <script>, le navigateur gère automatiquement l'exécution du contenu renvoyé.

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

Dernière question

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

 Questions connexes

• Aucun problème connexe^_^