Error gating off certain mobile operating systems

Hello,

I asked a question previously where I was trying to figure out how I could make a PlayCanvas app quit/leave the page if a mobile device was below a certain OS threshold and was given this as a suggestion: GitHub - faisalman/ua-parser-js: UAParser.js - Detect Browser, Engine, OS, CPU, and Device type/model

This helped tremendously and I augmented the base index.html file that comes out of a PlayCanvas export to looks like the code below. It all functions perfectly but I keep getting thrown errors that I will also list below. Does anyone know why they are happening if the loading screen doesn’t seem to be having any issues? As far as I can tell, the app should not be undefined because all other scripts are loaded before the loading script is appended to the html. Also I should note that I do not get this error when it successfully gates off an iOS version lower than ten. This only happens (and even then only sometimes) on iOS versions above ten.

Code:

<!doctype html>
<html>
<head>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="manifest" href="manifest.json">
    <style></style>
    <title>deviceRestrictionTest</title>
    <script src="OSRestrictionFiles/ua-parser.js"> </script>
    <script src="playcanvas-stable.min.js"></script>
    <script src="__settings__.js"></script>
</head>
<body>
        <script> 

        //parse out operating system name and version. version turns into int up to 99.
        var parser = new UAParser();
        var osName = parser.getOS().name;
        var osVersion = parser.getOS().version;
        console.log(osName);
        console.log(osVersion);
        if(osVersion.charAt(1) === "."){
            osVersion = osVersion.charAt(0);
        }
        else{
            osVersion = osVersion.charAt(0).concat(osVersion.charAt(1));
        }
        osVersion = parseInt(osVersion, 10);

        //if it is an apple phone below iOS 10, go to a different page
        if((osName === 'iOS') && (osVersion < 10)){
            window.location.href = "OSRestrictionFiles/coupon.html";
        }
        //else attach the playcanvas scripts like normal and proceeed with the game
        else{

            var start = document.createElement("script");
            start.src = "__start__.js";
            var loading = document.createElement("script");
            loading.src = "__loading__.js";

            document.body.appendChild(start);
            document.body.appendChild(loading);
        }
        
    </script>
</body>
</html>

Error:

At a guess, it could a race condition where __loading__.js is downloaded before __start__.js.

You want to ensure that __start__.js is loaded before __loading__.js

@yaustar Is there something I’m misunderstanding then? Does the act of listing
it in this order not ensure that? Is this because these lines are loading the scripts asynchronously and loading.js may finish first and subsequently call on ‘app’ which is defined in start?

document.body.appendChild(start);
document.body.appendChild(loading);

Correct. Try this solution: Load and execute javascript code SYNCHRONOUSLY - Stack Overflow or https://javascript.plainenglish.io/synchronous-script-loading-with-javascript-531b7c44f9a7

1 Like

Worked great. Thank you so much