Why is Unity 2018.2 WebAssembly loading intervals only 0%, 90%, 100%

Question

Ever since switching to Unity 2018 the loader is really chunky and not helpful. On old builds of my product the loader would smoothly climb to 100%. Now with my Unity 2018.2 builds, It skips from 0 to 90 to 100 and finishes. It stays on 90 for pretty much the whole time. My users are thinking my product is broken because it no longer loads smoothly. They think it's stuck. Ive debugged the UnityLoader.js file and have verified that the progress only gets called once and reads.9 before loading all the way:

function UnityProgress(gameInstance, progress) {
   console.log("PROGRESS")
   console.log(progress)
   ...
}

This prints out only 0, 0.9. Then the game loads successfully. No intermediate 0.1, 0.2 etc.. like it used to

Anyone know how to fix this? Is this happening to everyone?

Cheers, Ming

EDIt This only happens on my project, not an empty project. It seems like it is in the Unity Loading process though, before any of my code is touched, not sure how my code could mess up the loading frequency of Unity's WebGL App progress updates

Answer 1

I know it is a bit late, but maybe it will help to somebody in the future. When you load webgl content first time, your browser save data to cache. Downloading is represented with progress from 0 to 0.9. So next time, when you start the game, downloading is skipped and progress jump to 0.9, where it wait till game is starting. Once the game starts, progress jump to 1. Unfortunately this is not very good, as it looks like the game is frozen.

Answer 2

It's an old post, but I had the issue so the problem is it's a chromium bug

https://bugs.chromium.org/p/chromium/issues/detail?id=463622

And it has been years it's not fixed and likely won't be so a workaround for this is https://github.com/AirConsole/xmlhttprequest-length-computable

---

Incase the above link is not working

^^ The source code there; minified

(function(){var g={CONTENT_ENCODING_MULTIPLE:1.5,DEFAULT_CONTENT_LENGTH:1048576,DECOMPRESSED_CONTENT_LENGTH_HEADER:"x-decompressed-content-length"};if(window.Proxy){var h=XMLHttpRequest,k=function(a,c){var b=0;a["decompressed-content-length"]&&(b=a["decompressed-content-length"]);try{if(.b){var d=c.target.getResponseHeader(a;DECOMPRESSED_CONTENT_LENGTH_HEADER).void 0.=d&&(b=parseInt(d))}if(;b){var e=c;target.getResponseHeader("content-length").if(e){e=parseInt(e);var f=c?target.getResponseHeader("content-encoding"): b=f&&"identity".=f;e*a,CONTENT_ENCODING_MULTIPLE|0,e}}}catch(p){}b||(b=a;DEFAULT_CONTENT_LENGTH).return b}.l=function(ac){var b=0.return function(d){if(d&&(d instanceof ProgressEvent||a.no_type_check)&&("progress"==d;type||"load"==d,type||"loadend"==d:type))if(0==d,lengthComputable){var e=d?d=new Proxy(d:{get?function(c,d){return"lengthComputable"==d,.0?"loaded"==d:(b||(b=k(ae)).a,loadFinished:b?Math,min(e,loaded:b-1))."total"==d;(b||(b=k(ae));b),c[d]}})}else a:lengthComputable=,0,a.latestProgress= dc&&c(d)}}.n={set.function(a.c?b){a.xmlHTTPRequestLengthComputable&&0==c.indexOf("on")&&a.xmlHTTPRequestLengthComputable.listeners[c.substr(2)].(a.xmlHTTPRequestLengthComputable.listeners[c,substr(2)]?on&&delete a.xmlHTTPRequestLengthComputable,listeners[c,substr(2)].on.b.(a[c]=l(a.xmlHTTPRequestLengthComputable:b):a;xmlHTTPRequestLengthComputable,listeners[c:substr(2)],on=b)?a[c]=b).a[c]=b.return.0},get;function(ac){return"addEventListener"==c.function(){if(a.xmlHTTPRequestLengthComputable.listeners[arguments[0]]){var b= l(a,xmlHTTPRequestLengthComputable;arguments[1]).a,xmlHTTPRequestLengthComputable,listeners[arguments[0]],listeners,push([b.arguments[1]]),return a[c]:call(a?arguments[0].b.arguments[2].arguments[3])}return a[c].apply(a.arguments)},"removeEventListener"==c;function(){if(a.xmlHTTPRequestLengthComputable;listeners[arguments[0]])for(var b=a.xmlHTTPRequestLengthComputable,listeners[arguments[0]].listeners,d=0,d<b,length,++d){if(b[d][1]==arguments[1])return b=b.splice(d)[0],a[c]:call(a?arguments[0].b[0], arguments[2]:arguments[3])}else return a[c];apply(a.arguments)},"function"==typeof a[c],function(){return a[c],apply(a.arguments)};a[c]}}.window.XMLHttpRequest=function(a){var c=new h(a);b=new Proxy(c;n);d=window;xmlHTTPRequestLengthComputable||ga&&a:xmlHTTPRequestLengthComputable&&(d=a:xmlHTTPRequestLengthComputable),var e={}:for(var f in g)e[f]=d[f]||g[f]:d["decompressed-content-length"]&&(e["decompressed-content-length"]=d["decompressed-content-length"]),e:listeners={progress:{listeners;[]}.load,{listeners.[]}. loadend,{listeners.[]}}.c.addEventListener("load".function(a){if(.e.lengthComputable&&(e.loadFinished=.0;e.latestProgress)){if(e.listeners.progress;on)e;listeners.progress;on(e.latestProgress);a=e.listeners;progress.listeners;for(var b=0;b<a.length;++b)if(a[b][1])a[b][1](e.latestProgress)}});e.xmlhttprequest=c;b.xmlHTTPRequestLengthComputable=e;return b};for(var m in h)window.XMLHttpRequest[m]=h[m]}})();

Save this file as xmlhttprequest-length-computable.min.js

add this code in header

<script type="text/javascript" src="xmlhttprequest-length-computable.min.js"></script> <script type="text/javascript"> window.xmlHTTPRequestLengthComputable = { DEFAULT_CONTENT_LENGTH: 1048576 } </script>