Flutter Web does not support old version browsers and Internet Explorer, I want to show a message to the user indicating that they should update the browser to be able to use the website. Can we do that?
I tried to modify flutter_bootstrap.js file to see if there is any error for the unsupported browser to show the message but I was not successful. I could not catch any error with my try catch that I implemented in flutter_bootstrap.js, I understand the syntax that is used in generated flutter_bootstrap.js is new and not compatible with the old version of Firefox(the browser I am testing), with this browser now I just see white blank page. And I cannot change the syntax because it's a generated file in build/web folder. I would appreciate your help, thank you.
Flutter Web does not support old version browsers and Internet Explorer, I want to show a message to the user indicating that they should update the browser to be able to use the website. Can we do that?
I tried to modify flutter_bootstrap.js file to see if there is any error for the unsupported browser to show the message but I was not successful. I could not catch any error with my try catch that I implemented in flutter_bootstrap.js, I understand the syntax that is used in generated flutter_bootstrap.js is new and not compatible with the old version of Firefox(the browser I am testing), with this browser now I just see white blank page. And I cannot change the syntax because it's a generated file in build/web folder. I would appreciate your help, thank you.
Share Improve this question edited Mar 19 at 10:20 MubarakZade 3711 gold badge5 silver badges12 bronze badges asked Mar 19 at 9:41 mohsenmohsen 311 silver badge5 bronze badges2 Answers
Reset to default 1You might be building with --wasm tag (Web Assembly) which only currently supports Chromium browsers.
Remove the --wasm when building so canvas kit is automatically used.
If you are using a lower flutter version, use --web-renderer canvaskit.
UPDATE=======================
Add this script in the head of index.html
You can edit the minimum versions and the message to what best suits your app.
<script>
(function() {
var MIN_VERSIONS = {
chrome: 120,
firefox: 72,
safari: 14,
edge: 84
};
function getBrowserInfo() {
var ua = navigator.userAgent;
var tem;
var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
return { name: 'IE', version: 11 }; // IE 11
}
if (M[1] === 'Chrome') {
tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
if (tem != null) {
return { name: tem[1].replace('OPR', 'Opera'), version: parseInt(tem[2]) };
}
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) {
M.splice(1, 1, tem[1]);
}
var browserName = M[0].toLowerCase();
if (browserName === 'edge' || ua.indexOf('Edg/') !== -1 || ua.indexOf('Edge/') !== -1) {
if (ua.indexOf('Edg/') !== -1) {
tem = ua.match(/Edg\/(\d+)/);
if (tem != null) {
return { name: 'edge', version: parseInt(tem[1]) };
}
} else if (ua.indexOf('Edge/') !== -1) {
tem = ua.match(/Edge\/(\d+)/);
if (tem != null) {
return { name: 'edge', version: parseInt(tem[1]) };
}
}
}
return { name: browserName, version: parseInt(M[1]) };
}
function isBrowserSupported() {
var browser = getBrowserInfo();
if (browser.name === 'IE' || browser.name === 'msie' || browser.name === 'trident') {
return false;
}
if (MIN_VERSIONS[browser.name] && browser.version < MIN_VERSIONS[browser.name]) {
return false;
}
if (!MIN_VERSIONS[browser.name]) {
return false;
}
return true;
}
// Show custom message if browser is not supported
if (!isBrowserSupported()) {
document.addEventListener('DOMContentLoaded', function() {
var flutterScript = document.querySelector('script[src="flutter.js"]');
if (flutterScript) {
flutterScript.setAttribute('disabled', 'true');
flutterScript.remove();
}
var messageDiv = document.createElement('div');
messageDiv.style.position = 'fixed';
messageDiv.style.top = '0';
messageDiv.style.left = '0';
messageDiv.style.width = '100%';
messageDiv.style.height = '100%';
messageDiv.style.backgroundColor = '#ffffff';
messageDiv.style.display = 'flex';
messageDiv.style.flexDirection = 'column';
messageDiv.style.alignItems = 'center';
messageDiv.style.justifyContent = 'center';
messageDiv.style.padding = '20px';
messageDiv.style.textAlign = 'center';
messageDiv.style.fontFamily = 'Arial, sans-serif';
messageDiv.style.zIndex = '9999';
var header = document.createElement('h1');
header.style.color = '#e53935';
header.style.marginBottom = '20px';
header.textContent = 'Browser Not Supported';
var message = document.createElement('p');
message.style.maxWidth = '600px';
message.style.lineHeight = '1.5';
message.style.marginBottom = '20px';
message.textContent = 'Your browser is not supported by this application. Please use one of the following browsers:';
var browserList = document.createElement('ul');
browserList.style.listStylePosition = 'inside';
browserList.style.textAlign = 'left';
browserList.style.display = 'inline-block';
browserList.style.marginBottom = '30px';
var browsers = [
'Google Chrome (version ' + MIN_VERSIONS.chrome + ' or later)',
'Mozilla Firefox (version ' + MIN_VERSIONS.firefox + ' or later)',
'Microsoft Edge (version ' + MIN_VERSIONS.edge + ' or later)',
'Safari (version ' + MIN_VERSIONS.safari + ' or later)'
];
browsers.forEach(function(browserText) {
var item = document.createElement('li');
item.style.margin = '10px 0';
item.textContent = browserText;
browserList.appendChild(item);
});
var updateMessage = document.createElement('p');
updateMessage.style.fontWeight = 'bold';
updateMessage.textContent = 'Please update your browser or switch to a supported one to continue.';
messageDiv.appendChild(header);
messageDiv.appendChild(message);
messageDiv.appendChild(browserList);
messageDiv.appendChild(updateMessage);
document.body.innerHTML = '';
document.body.appendChild(messageDiv);
});
}
})();
</script>
Although @Daniel answers was working and correct, but I think using user agent is not working in all of the cases and we should check every browser with the version to understand if its compatible or not.
At the end I came up with this solution that I am checking with the "flutter-view" element to see if its available or not and if not so I conclude that the browser is not supporting.
I would appreciate if anyone came up with a better solution.
for this solution i changed my index.html in this way:
<body>
<!-- Flutter App Container -->
<div id="flutter-app" style="display: none;">
<script src="flutter_bootstrap.js"></script>
</div>
<script>
(function() {
var MIN_VERSIONS = {
chrome: 120,
firefox: 72,
safari: 14,
edge: 84
};
function checkFlutterView() {
setTimeout(function() {
const flutterViewElement = document.querySelector('flutter-view');
if (flutterViewElement) {
console.log("Browser supported. Showing app.");
} else {
console.log("Browser NOT supported. Showing error message.");
showUnsupportedBrowserMessage();
}
}, 2000); // Wait 2 seconds to allow Flutter to load
}
function showUnsupportedBrowserMessage() {
var messageDiv = document.createElement('div');
messageDiv.style.position = 'fixed';
messageDiv.style.top = '0';
messageDiv.style.left = '0';
messageDiv.style.width = '100%';
messageDiv.style.height = '100%';
messageDiv.style.backgroundColor = '#ffffff';
messageDiv.style.display = 'flex';
messageDiv.style.flexDirection = 'column';
messageDiv.style.alignItems = 'center';
messageDiv.style.justifyContent = 'center';
messageDiv.style.padding = '20px';
messageDiv.style.textAlign = 'center';
messageDiv.style.fontFamily = 'Arial, sans-serif';
messageDiv.style.zIndex = '9999';
var header = document.createElement('h1');
header.style.color = '#e53935';
header.style.marginBottom = '20px';
header.textContent = 'Browser Not Supported';
var message = document.createElement('p');
message.style.maxWidth = '600px';
message.style.lineHeight = '1.5';
message.style.marginBottom = '20px';
message.textContent = 'Your browser is not supported by this application. Please use one of the following browsers:';
var browserList = document.createElement('ul');
browserList.style.listStylePosition = 'inside';
browserList.style.textAlign = 'left';
browserList.style.display = 'inline-block';
browserList.style.marginBottom = '30px';
var browsers = [
'Google Chrome (version ' + MIN_VERSIONS.chrome + ' or later)',
'Mozilla Firefox (version ' + MIN_VERSIONS.firefox + ' or later)',
'Microsoft Edge (version ' + MIN_VERSIONS.edge + ' or later)',
'Safari (version ' + MIN_VERSIONS.safari + ' or later)'
];
browsers.forEach(function(browserText) {
var item = document.createElement('li');
item.style.margin = '10px 0';
item.textContent = browserText;
browserList.appendChild(item);
});
var updateMessage = document.createElement('p');
updateMessage.style.fontWeight = 'bold';
updateMessage.textContent = 'Please update your browser or switch to a supported one to continue.';
messageDiv.appendChild(header);
messageDiv.appendChild(message);
messageDiv.appendChild(browserList);
messageDiv.appendChild(updateMessage);
document.body.innerHTML = '';
document.body.appendChild(messageDiv);
}
// Run the check once the document is fully loaded
document.addEventListener('DOMContentLoaded', checkFlutterView);
})();
</script>
</body>
</html>