ne peut pas afficher de message de support de navigateur

Question

Salut mon projet fonctionne avec reactjs et webpack, lors du chargement du site Web, si fonctionnant sur un ancien navigateur qui ne supporte pas reactjs ou webpack, je ne peux pas afficher mon navigateur n'est pas supporté message (je vérifie support avec la bibliothèque modernizr). Y at-il un moyen pour moi de montrer un message et d'utiliser modernizr avant qu'ils ne se chargent d'une manière ou d'une autre? peut-être en quelque sorte utiliser un script qui peut utiliser modernizr dans le fichier html qui charge d'abord? toute réponse sera la bienvenue! (Cela doit fonctionner sur tous les navigateurs). Merci pour l'aide!

Answer 1

Si vous savez exactement quelles fonctionnalités vous utilisez et quel navigateur ne supporte pas, vous pouvez faire quelque chose comme le chargement d'un fichier "polyfills". Pour réaliser quelque chose comme ceci, vous devrez d'abord créer un fichier séparé pour les polyfills et vous devrez les charger si le navigateur ne supporte pas les fonctionnalités requises. Cette dernière étape vous oblige à avoir quelques modèles dans votre fichier html.

Dans vos entrées webpack:

polyfills: [ 
    'babel-polyfill', 
    'whatwg-fetch' 
] 

Dans vos plugins:

new HtmlWebpackPlugin({ 
    template: './index.ejs', 
    filename: '../index.html', 
    inject: false 
}) 

Dans votre fichier index.ejs:

<script> 
var newBrowser = (
    'fetch' in window && 
    'Promise' in window && 
    'assign' in Object && 
    'keys' in Object 
); 

var scripts = []; 
if (!newBrowser) { 
    scripts.push('<%=htmlWebpackPlugin.files.chunks.polyfills.entry%>'); 
} 

scripts.push('<%=htmlWebpackPlugin.files.chunks.vendors.entry%>'); 
scripts.push('<%=htmlWebpackPlugin.files.chunks.app.entry%>'); 

scripts.forEach(function(src) { 
    var scriptEl = document.createElement('script'); 
    scriptEl.src = src; 
    scriptEl.async = false; 
    document.head.appendChild(scriptEl); 
}); 
</script>