(Unity) Better Minimal WebGL Template

Found another issue which i asked ChatGPT about with this prompt:

"I got a webgl unity build with a loading bar. It works the first time, but when I update my build and the cache needs to refresh the loading bar stays at 100% throughout the new download"

and it gave me this suggestion, can you make sense of it and if it is worth of an update if you can reproduce:

<script>

  const buildUrl = "Build";

  const loaderUrl = buildUrl + "/yourproject.loader.js";

  const config = {

    dataUrl: buildUrl + "/yourproject.data",

    frameworkUrl: buildUrl + "/yourproject.framework.js",

    codeUrl: buildUrl + "/yourproject.wasm",

    streamingAssetsUrl: "StreamingAssets",

    companyName: "YourCompany",

    productName: "YourProduct",

    productVersion: "1.0",

  };

  const loadingBar = document.getElementById("loadingBar");

  const progressBarFull = document.getElementById("progressBarFull");

  const updateProgress = (progress) => {

    progressBarFull.style.width = `${100 * progress}%`;

  };

  const script = document.createElement("script");

  script.src = loaderUrl;

  script.onload = () => {

    createUnityInstance(document.querySelector("#unity-canvas"), config, (progress) => {

      updateProgress(progress);

    }).then((unityInstance) => {

      loadingBar.style.display = "none";

    }).catch((message) => {

      alert(message);

    });

  };

  document.body.appendChild(script);

</script>

Key Points:

• The progress callback inside createUnityInstance() doesn’t always track actual download progress after cache updates unless you handle it explicitly.

• The Unity loader might say "100%" because it thinks it's loading from cache, but the browser is still re-downloading the new files.
  

__________

Apart from that, i am also checking out renderResolution control in WebGL for improving performance. That would also be a worthy addition