When building the game or app for WebGL, you always have to have browser compatibility in back of your head. We can’t also forget the platform on which the browser is working.
Each platform and browser may behave differently, and as a developer, you have to be prepared to handle those.
So let’s check to make some checks!
Begin with your own WebGL template ?
Some time ago, I made a post about preparing your own WebGL template in Unity.
I would suggest visiting that post before continuing with this one, to have some basic knowledge about WebGL templates.
To start, override the check ??
To make any check available, we have to override one of Unity’s function. That function is “compatibilityCheck“, and here we have an example of how to do it:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Check WebGL Platform Template | %UNITY_WEB_NAME%</title>
<link rel="stylesheet" href="/Template/style.css" />
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
</head>
<body>
<h2>Check WebGL Platform Template</h2>
<!-- Unity Container -->
<div class="webgl-content">
<div class="centered" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px">
<!-- Unity WebGL will be here -->
<div id="unity-container" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div>
</div>
</div>
<script>
// Custom check function
function customCheck(unityInstance, onsuccess, onerror) {
onsuccess();
}
</script>
<script>
// Unity Initialization
var unityInstance = UnityLoader.instantiate("unity-container", "%UNITY_WEBGL_BUILD_URL%", {
compatibilityCheck: customCheck,
});
</script>
<h3>Example made by</h3>
<p><a href="https://patrykgalach.com">Patryk Galach - Dev Blog</a></p>
</body>
</html>
We will spend most of the time changing that function in this post, so focus!
Check if WebGL is available
The very basic check we can perform is to check if the browser has WebGL support.
To do that, we can simply make one “if” statement.
// Custom check function
function customCheck(unityInstance, onsuccess, onerror) {
// Check if the browser hasn't WebGL
if (!UnityLoader.SystemInfo.hasWebGL) {
unityInstance.popup("Your browser does not support WebGL.", [
{ text: "Stop", callback: onerror }
]);
} else {
onsuccess();
}
}
Check the browser ?
Unity doesn’t support all of the browsers. That might be annoying to us – developers, but with web technologies, that’s pretty common.
In the case of Unity, supported browsers are: Edge, Firefox, Chrome and Safari. Check in our function would look like this:
// Custom check function
function customCheck(unityInstance, onsuccess, onerror) {
// Check if not supported browser
if (["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1) {
unityInstance.popup("Your browser is not supported, but you can continue anyway.", [
{ text: "Stop", callback: onerror },
{ text: "Continue", callback: onsuccess },
]);
} else {
onsuccess();
}
}
Of course, you can run the build in other browsers, but you might encounter some misbehavior.
Check your platform ?
Browsers from the previous point are mostly supported in desktop versions only, as for mobile, this is a completely different story.
Unity WebGL is not supported on mobile platforms, and that might have some implications. Some functionality might partially work, but others might not work at all.
The decision is yours to determine if you want to take a risk and try to support mobile WebGL or not.
To detect if the build is running on a mobile browser, you have to do a check like this:
// Custom check function
function customCheck(unityInstance, onsuccess, onerror) {
// Check if mobile platform
if (!UnityLoader.SystemInfo.hasWebGL) {
unityInstance.popup("Unity WebGL is not supported on mobile, but you can continue anyway.", [
{ text: "Stop", callback: onerror },
{ text: "Continue", callback: onsuccess },
]);
} else {
onsuccess();
}
}
Combine all checks ?
When you are ready for the deployment of your app, the check should take all of the points into consideration. Of course, the order of those checks also matters! So the proper order should be: “has WebGL“, “is Mobile” and “supported browsers“.
// Custom check function
function customCheck(unityInstance, onsuccess, onerror) {
// Check if the browser hasn't WebGL
if (!UnityLoader.SystemInfo.hasWebGL) {
unityInstance.popup("Your browser does not support WebGL.", [{ text: "Stop", callback: onerror }]);
}
// Check if mobile platform
else if (UnityLoader.SystemInfo.mobile) {
unityInstance.popup("Unity WebGL is not supported on mobile, but you can continue anyway.", [
{ text: "Stop", callback: onerror },
{ text: "Continue", callback: onsuccess },
]);
}
// Check if not supported browser
else if (["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1) {
unityInstance.popup("Your browser is not supported, but you can continue anyway.", [
{ text: "Stop", callback: onerror },
{ text: "Continue", callback: onsuccess },
]);
} else {
onsuccess();
}
}
Conclusion ?
So now you know how to check what platform you’re running your WebGL build, but what you’re going to do about it?
Are you limiting your support or you are encouraging users to change their browser or platform? Let me know in the comment section below! ?
You can also read more about it in the official documentation: Using WebGL Templates
If you know someone that might need this, share it with him! I would really appreciate that! ?
Besides that, if you want to get notified about future content on my blog, you can sign up for my newsletter!
Oh, and I can’t forget about Saurav who’s the idea was for this post. Thanks, and I hope it’ll be helpful!
The whole project is available at my public repository. ?
See you next time! ?