DartPad项目在Safari浏览器中运行Flutter代码异常问题分析

问题现象

近期有用户反馈，在Safari浏览器中使用DartPad运行Flutter代码时出现异常。具体表现为：代码可以正常编译，但运行后界面无任何显示输出。值得注意的是，这个问题仅出现在Safari浏览器中，其他浏览器运行正常，且纯Dart代码在Safari中也能正常运行。

技术背景

DartPad是一个基于Web的Dart和Flutter代码编辑器，允许开发者在浏览器中直接编写、运行和测试代码而无需安装任何开发环境。它通过将Dart代码编译为JavaScript来实现浏览器中的执行。

问题分析

从用户提供的错误日志中可以看到以下关键错误信息：

Not allowed to load local resource: blob://nullnull/main.dart.js.map
Cannot load blob://nullnull/main.dart.js.map due to access control checks

这些错误表明Safari浏览器在尝试加载编译后的Dart代码映射文件时遇到了跨域安全限制。具体来说：

1. 资源路径显示为"blob://nullnull/main.dart.js.map"，其中"nullnull"表明路径拼接可能存在问题
2. Safari严格的安全策略阻止了这种非标准路径的资源加载
3. 这种问题通常出现在浏览器对Blob URL处理方式的差异上

影响范围

根据报告，该问题影响：

• Safari浏览器（版本17.4.1）
• 运行macOS 14.4.1系统的设备
• 仅影响Flutter代码执行，不影响纯Dart代码

解决方案

DartPad开发团队已经通过提交修复了这个问题。修复的核心是正确处理Blob URL的生成和访问，确保其在Safari浏览器中的兼容性。

技术启示

这个案例展示了浏览器兼容性问题的典型表现：

1. 同一功能在不同浏览器中表现不一致
2. 安全策略的差异可能导致功能失效
3. Blob URL的处理是常见的浏览器兼容性问题点

对于Web开发者而言，这提醒我们需要：

• 全面测试应用在不同浏览器中的表现
• 特别注意安全策略相关的功能实现
• 及时关注和修复浏览器特定的兼容性问题

总结

DartPad团队快速响应并修复了Safari浏览器中运行Flutter代码的问题，展现了开源项目对用户体验的重视。这也提醒开发者在使用Web技术时需要考虑不同浏览器的特性差异，特别是在处理高级特性如Blob URL时更应谨慎。