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