Flutter Web应用本地IP运行空白页：Service Worker安全上下文问题求助

Service Worker API必须运行在安全上下文环境中，浏览器仅将localhost/127.0.0.1的HTTP连接视为安全上下文，普通本地IP（如192.168.1.224）的HTTP连接不满足要求，因此Safari会阻止Service Worker加载，导致Flutter Web应用加载后显示空白。

方法1：用HTTPS运行（推荐，符合安全规范） #

1. 生成自签名SSL证书（终端执行）：

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

按提示填写信息（可直接回车跳过大部分选项）。

2. 用证书启动Flutter Web服务：

fvm flutter run -t lib/main_develop_web.dart -d web-server --web-hostname 192.168.1.224 --web-port 64000 --web-certificate cert.pem --web-key key.pem

访问https://192.168.1.224:64000时，Safari会提示证书不安全，在“显示详细信息”中选择“信任”即可正常访问。

方法2：临时禁用Safari安全限制（仅开发测试用） #

1. 打开Safari偏好设置 → 高级 → 勾选“显示开发菜单”。
2. 顶部菜单栏选择“开发” → “允许不安全的内容”。
3. 刷新页面即可加载应用，但此方法仅适合本地测试，不要用于生产环境。

方法3：禁用Service Worker（仅开发临时用） #

修改web/index.html文件，找到注册Service Worker的代码块，注释或删除相关逻辑：

// 注释掉以下内容
// if ('serviceWorker' in navigator) {
//   window.addEventListener('load', function () {
//     navigator.serviceWorker.register('flutter_service_worker.js');
//   });
// }

修改后重新启动服务即可，但此方法会失去Service Worker带来的缓存等功能，仅适合临时开发调试。

内容的提问来源于stack exchange，提问作者tremp