Search Unity

  1. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question What am I doing wrong with my index.html?

Discussion in 'Web' started by DroidifyDevs, Oct 5, 2023.

  1. DroidifyDevs

    DroidifyDevs

    Joined:
    Jun 24, 2015
    Posts:
    1,724
    I'm trying to implement what's shown in the docs here: https://docs.unity3d.com/Manual/webgl-caching.html

    Seems really simple, and this is my full code (issue is at Line 63):
    Code (CSharp):
    1. <!DOCTYPE html>
    2. <html lang="en-us">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6.     <title>Unity WebGL Player | Online PC Builder</title>
    7.     <link rel="shortcut icon" href="TemplateData/favicon.ico">
    8.     <link rel="stylesheet" href="TemplateData/style.css">
    9.     <link rel="manifest" href="manifest.webmanifest">
    10.   </head>
    11.   <body>
    12.     <div id="unity-container">
    13.       <canvas id="unity-canvas" width=960 height=540 tabindex="-1"></canvas>
    14.       <div id="unity-loading-bar">
    15.         <div id="unity-logo"></div>
    16.         <div id="unity-progress-bar-empty">
    17.           <div id="unity-progress-bar-full"></div>
    18.         </div>
    19.       </div>
    20.       <div id="unity-warning"> </div>
    21.     </div>
    22.     <script>
    23.       window.addEventListener("load", function () {
    24.         if ("serviceWorker" in navigator) {
    25.           navigator.serviceWorker.register("ServiceWorker.js");
    26.         }
    27.       });
    28.  
    29.       var container = document.querySelector("#unity-container");
    30.       var canvas = document.querySelector("#unity-canvas");
    31.       var loadingBar = document.querySelector("#unity-loading-bar");
    32.       var progressBarFull = document.querySelector("#unity-progress-bar-full");
    33.       var warningBanner = document.querySelector("#unity-warning");
    34.  
    35.       // Shows a temporary message banner/ribbon for a few seconds, or
    36.       // a permanent error message on top of the canvas if type=='error'.
    37.       // If type=='warning', a yellow highlight color is used.
    38.       // Modify or remove this function to customize the visually presented
    39.       // way that non-critical warnings and error messages are presented to the
    40.       // user.
    41.       function unityShowBanner(msg, type) {
    42.         function updateBannerVisibility() {
    43.           warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
    44.         }
    45.         var div = document.createElement('div');
    46.         div.innerHTML = msg;
    47.         warningBanner.appendChild(div);
    48.         if (type == 'error') div.style = 'background: red; padding: 10px;';
    49.         else {
    50.           if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
    51.           setTimeout(function() {
    52.             warningBanner.removeChild(div);
    53.             updateBannerVisibility();
    54.           }, 5000);
    55.         }
    56.         updateBannerVisibility();
    57.       }
    58.  
    59.       var buildUrl = "Build";
    60.       var loaderUrl = buildUrl + "/Builds.loader.js";
    61.       var config = {
    62.    // ...
    63. #if USE_DATA_CACHING
    64.    cacheControl: function (url) {
    65.      // Disable explicit caching for all other files.
    66.      // Note: the default browser cache may cache them anyway.
    67.      return "no-store";
    68.    },
    69. #endif
    70.    // ...
    71.    dataUrl: buildUrl + "/Builds.data",
    72.         frameworkUrl: buildUrl + "/Builds.framework.js",
    73.         codeUrl: buildUrl + "/Builds.wasm",
    74.         streamingAssetsUrl: "StreamingAssets",
    75.         companyName: "DefaultCompany",
    76.         productName: "Online PC Builder",
    77.         productVersion: "0.1.0",
    78.         showBanner: unityShowBanner,
    79. }
    80.  
    81.       // By default Unity keeps WebGL canvas render target size matched with
    82.       // the DOM size of the canvas element (scaled by window.devicePixelRatio)
    83.       // Set this to false if you want to decouple this synchronization from
    84.       // happening inside the engine, and you would instead like to size up
    85.       // the canvas DOM size and WebGL render target sizes yourself.
    86.       // config.matchWebGLToCanvasSize = false;
    87.  
    88.       if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    89.         // Mobile device style: fill the whole browser client area with the game canvas:
    90.         var meta = document.createElement('meta');
    91.         meta.name = 'viewport';
    92.         meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
    93.         document.getElementsByTagName('head')[0].appendChild(meta);
    94.       }
    95.  
    96.       loadingBar.style.display = "block";
    97.  
    98.       var script = document.createElement("script");
    99.       script.src = loaderUrl;
    100.       script.onload = () => {
    101.         createUnityInstance(canvas, config, (progress) => {
    102.           progressBarFull.style.width = 100 * progress + "%";
    103.         }).then((unityInstance) => {
    104.           loadingBar.style.display = "none";
    105.         }).catch((message) => {
    106.           alert(message);
    107.         });
    108.       };
    109.       document.body.appendChild(script);
    110.     </script>
    111.   </body>
    112. </html>
    But when I run it in a browser, I get: Uncaught SyntaxError: Unexpected identifier '#if'

    This seems like a really basic error but as far as my not-HTML-optimized brain can tell, I'm doing exactly what the docs say.

    Also, in case you're wondering why I'm doing that, I'm trying to fix a bug where after a refresh, I get a "RuntimeError: call_indirect to a null table entry" error on my WebGL build when running on iOS 16.4 Safari...

    EDIT: Changed my code to this:
    Code (csharp):
    1.  
    2. var buildUrl = "Build";
    3. var loaderUrl = buildUrl + "/Builds.loader.js";
    4. var config = {
    5.   dataUrl: buildUrl + "/Builds.data",
    6.   frameworkUrl: buildUrl + "/Builds.framework.js",
    7.   codeUrl: buildUrl + "/Builds.wasm",
    8.   streamingAssetsUrl: "StreamingAssets",
    9.   companyName: "DefaultCompany",
    10.   productName: "Online PC Builder",
    11.   productVersion: "0.1.0",
    12.   showBanner: unityShowBanner,
    13. };
    14.  
    15. // Conditional check to set cacheControl property
    16. if (USE_DATA_CACHING) {
    17.   config.cacheControl = function (url) {
    18.     return "no-store";
    19.   };
    20. }
    21.  
    But now I'm getting: Uncaught ReferenceError: USE_DATA_CACHING is not defined
     
    Last edited: Oct 5, 2023
  2. CodeSmile

    CodeSmile

    Joined:
    Apr 10, 2014
    Posts:
    5,066
    #if USE_DATA_CACHING
    #endif

    This is C# specific. I cannot recall Javascript having such preprocessor directives. The symbol itself is a preprocessor (scripting define) symbol and thus not available in JS. I think that JS code in the manual is simply incorrect here. Try removing that check entirely, or write your own but with JS logic that gets the cache enabled state from the Unity API.
     
  3. DroidifyDevs

    DroidifyDevs

    Joined:
    Jun 24, 2015
    Posts:
    1,724
    Turns out I was editing the wrong Index.html. There's 1 in your build, and there's one for your WebGL Template. The code works as written when editing the Template file. It seemed to make my loading on iOS much better but next morning, I'm stuck on a 90% load with no error message. My quest to get WebGL to run on iOS Safari continues...
     
  4. jukka_j

    jukka_j

    Unity Technologies

    Joined:
    May 4, 2018
    Posts:
    953
    Using C preprocessor #if/#endif blocks is compile-time extension that we have added to the WebGL Template files.

    Those blocks are processed away during project build time according to the different checkboxes that were selected in the project build settings, so in the final index.html file they will no longer be present.

    Does the "stuck on 90%" load state on iOS also happen in Development builds from local network? Which iOS Safari version are you on? I read recently that iOS 17 snuck in some new WebAssembly/WebGL regressions, which are currently being sorted out. (although there I think the error symptoms might have looked different: the page would load, but only later crash)