How do I write (flutter web) code so JavaScript files will run on my local machine?

Question

I built a simple flutter web app. It works fine on github.io and also on the localhost server:

$ flutter run -d chrome

If I create a release build:

$ flutter build web

turning the app into (basically) a JavaScript file (main.dart.js), why can't I just run the app by loading the created index.html file?

The JavaScript debugger in my browser tells me this code:

<script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>

produces the error:

Uncaught (in promise) TypeError: ServiceWorkerContainer.register: Script URL's scheme is not 'http' or 'https'

I'm not sure what this means or how to fix it. I know it's not as simple as just adding http in front of flutter_service_worker.js.

Try putting "./flutter_service_worker.js" and see if that fixes it — Ameer, Aug 28 '20 at 20:08
Take a look at this answer https://stackoverflow.com/questions/39136625/service-worker-registration-failed. Service workers can't be opened locally, they have to be opened via http or https I believe — Ameer, Aug 28 '20 at 20:14
I bet you're right. If you write this up as a response I can accept it as the answer. — Al C, Aug 28 '20 at 20:17

score 2 · Accepted Answer · answered Aug 28 '20 at 20:21

I believe the issue is that you are opening the index.html file locally via the file protocol. According to this SO answer, service workers need to be opened through an http or https protocol. That's why the index.html file is working on your localserver and github.io but not when you just open it via chrome or another browser.

How do I write (flutter web) code so JavaScript files will run on my local machine?

1 Answers1

Linked

Related