Saves the laravel mix versioned url in localstorage and compares it with current version url in order to activate browser cache if version is the same

react js laravel mix loading screen with progressbar .blade.php

  <div id="app">
    
    {{-- this loader gets automatically replaced by the react app after loading --}}
    <div style="background:#1C9EF2; width:100vw; height:100vh;">
      <div id="loading" style="position: absolute; top:46%; left:50%; transform: translateX(-50%) translateY(-50%); text-align: center;">
        <img src="/images/logo-white.png"><br>
        <div style="display: inline-block; width: 80px; height: 80px; border-radius: 100%; background: white; display: flex; margin: auto; align-items: center; justify-content: center; margin-top: 20px;">
          <img src="/images/loader.svg" style="width: 50px; height: 50px; margin-bottom: 10px;">
        </div>
        <div style="margin-top: 30px; width:200px; display: inline-block; position: relative; height: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 6px; overflow: hidden;">
          <div id="react-progress-bar" style="display: inline-block; position: absolute; left: 0; top:0; height: 10px; width: 0; background: rgba(255, 255, 255, 0.6); border-radius: 6px; transition: width 100ms linear;"></div>
        </div>
        {{-- <div class="loading-text" style="font-size: 22px; font-family: Nunito, sans-serif; padding-left:10px; color: white; margin-top: 20px;">Loading...</div> --}}
      </div>
    </div>
    
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
    var currentVersion = localStorage.getItem('app-ver');
    var latestUrl = "{{ mix('js/app.js') }}";
    var cache = false;
    if (currentVersion == latestUrl) cache = true;
    $.ajax({
      type: 'GET',
      url: latestUrl,
      dataType: 'script',
      cache: cache,
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function(evt){
          if (evt.lengthComputable) {
            var percentComplete = evt.loaded / evt.total;
            document.getElementById('react-progress-bar').style.width = Math.round(percentComplete*100)+'%';
          }
        }, false);
        return xhr;
      },
      success: function () {
        localStorage.setItem('app-ver', latestUrl);
      },
    });
  </script>