Flutter Web Github Pages is too lazy and i don't know why

Issue

i’m trying to deploy a flutter web app to GitHub Pages.

First of all, i was getting the same problem as this, and their solution worked for me too.
This means that i add the <base href='/web'> to my index.html

But now, when i’m lauching my url from GitHub Pages, the site is loading too lazily, what i think isn’t the correct behavior. Like you can see in the image below:

enter image description here

Is there a way to lauch the site faster? What should i do?

Solution

So, i was searching and a friend observed that the serviceWorker, in the index.html file, was the problem. Now my app runs as fast as it shoud be.

Apparently, that function was trying to execute something and failed (but this failure cost 4 seconds, stipulated in code). So i commented this all and added a loadMainDartJs() call in the start, as you can see below:

    loadMainDartJs();

<!--    if ('serviceWorker' in navigator) {-->
<!--      // Service workers are supported. Use them.-->
<!--      window.addEventListener('load', function () {-->
<!--        // Wait for registration to finish before dropping the <script> tag.-->
<!--        // Otherwise, the browser will load the script multiple times,-->
<!--        // potentially different versions.-->
<!--        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;-->
<!--        navigator.serviceWorker.register(serviceWorkerUrl)-->
<!--          .then((reg) => {-->
<!--            function waitForActivation(serviceWorker) {-->
<!--              serviceWorker.addEventListener('statechange', () => {-->
<!--                if (serviceWorker.state == 'activated') {-->
<!--                  console.log('Installed new service worker.');-->
<!--                  loadMainDartJs();-->
<!--                }-->
<!--              });-->
<!--            }-->
<!--            if (!reg.active && (reg.installing || reg.waiting)) {-->
<!--              // No active web worker and we have installed or are installing-->
<!--              // one for the first time. Simply wait for it to activate.-->
<!--              waitForActivation(reg.installing ?? reg.waiting);-->
<!--            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {-->
<!--              // When the app updates the serviceWorkerVersion changes, so we-->
<!--              // need to ask the service worker to update.-->
<!--              console.log('New service worker available.');-->
<!--              reg.update();-->
<!--              waitForActivation(reg.installing);-->
<!--            } else {-->
<!--              // Existing service worker is still good.-->
<!--              console.log('Loading app from service worker.');-->
<!--              loadMainDartJs();-->
<!--            }-->
<!--          });-->

<!--        // If service worker doesn't succeed in a reasonable amount of time,-->
<!--        // fallback to plaint <script> tag.-->
<!--        setTimeout(() => {-->
<!--          if (!scriptLoaded) {-->
<!--            console.warn(-->
<!--              'Failed to load app from service worker. Falling back to plain <script> tag.',-->
<!--            );-->
<!--            loadMainDartJs();-->
<!--          }-->
<!--        }, 4000);-->
<!--      });-->
<!--    } else {-->
<!--      // Service workers not supported. Just drop the <script> tag.-->
<!--      loadMainDartJs();-->
<!--    }-->

At the moment i don’t need serviceWork, and this suits weel for me.

Answered By – Daniel Dantas

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *