如何编写(浮动Web)代码，以便JavaScript文件可以在本地计算机上运行? [英] How do I write (flutter web) code so JavaScript files will run on my local machine?

问题描述

我构建了一个简单的Flutter Web应用程序.它可以在github.io和 localhost 服务器上正常运行:

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

$ flutter run -d chrome

如果我创建发布版本:

$ flutter build web

将应用程序转换成(基本上)一个JavaScript文件( main.dart.js )，为什么我不能只通过加载创建的 index.html 文件?

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?

浏览器中的JavaScript调试器告诉我以下代码:

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>

产生错误:

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

我不确定这意味着什么或如何解决.我知道，这不只是在 flutter_service_worker.js 前面添加 http 那样简单.

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.

推荐答案

我相信问题是您正在通过 file 协议在本地打开index.html文件.根据此 SO答案，服务人员需要通过 http 打开code>或 https 协议.这就是为什么index.html文件可以在您的本地服务器和github.io上运行的原因，而当您仅通过chrome或其他浏览器打开它时却无法运行的原因.

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.

这篇关于如何编写(浮动Web)代码，以便JavaScript文件可以在本地计算机上运行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！