ios - Flutter Web - 移动 iOS 版 Web 应用程序上的白屏/空白页面
问题描述
目前正在使用 Flutter web 开发一个 web 应用程序。当我在笔记本电脑或 Android 设备上时,构建、运行和访问 Firebase 托管应用程序工作正常,但是当我尝试在移动 iOS 设备上访问应用程序时,我得到一个空白屏幕。我已经用几种设备对此进行了测试,它们都显示相同的空白页。为了找到罪魁祸首,我尝试了以下方法:
- 使用通道 master / dev / beta 构建和部署
- 添加和省略画布和/或 --release 到构建使用
flutter build web --web-renderer canvaskit --release
- 清理我的项目并使用删除所有生成的代码
flutter clean && find lib -maxdepth 20 -type f \( -name \"*.freezed.dart\" -o -name \"*.g.dart\" -o -name \"*.chopper.dart\" \) -delete
- 在我的 index.html 中更改
<base href="/">
为<base href="./">
- 将第一个 iOS 元标记更新到
<meta name="mobile-web-app-capable" content="yes">
我的 index.html - 在 StackOverflow 和 Flutter 问题中搜索类似问题但没有结果
- 清理我的缓存并尝试不同的手机
编辑:桌面上的 Safari 似乎也导致白屏(!)
我的pubspec.yaml
:
name: X
description: X
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 0.1.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
# Firebase
firebase_core: ^1.0.2
cloud_firestore: ^1.0.3
firebase_auth: ^1.0.1
# Stacked
stacked: ^2.0.2
# Data
freezed: ^0.14.1+2
freezed_annotation: ^0.14.1
json_serializable: ^4.1.0
# Util
get: 4.1.1
intl: ^0.17.0
get_it: ^6.0.0
url_strategy: ^0.2.0
flutter_dotenv: ^4.0.0-nullsafety.0
logger: ^1.0.0
flutter_screenutil: ^5.0.0
flutter_form_builder: ^6.0.0-nullsafety.1
# Https
chopper: 4.0.0-nullsafety.0
# UI
progress_indicators: ^1.0.0
cupertino_icons: ^1.0.2
overlay_support: ^1.2.1
flutter_svg: ^0.21.0+1
google_fonts: ^2.0.0
dev_dependencies:
flutter_test:
sdk: flutter
build_runner: ^1.12.2
stacked_generator: ^0.3.3
chopper_generator: 4.0.0-nullsafety.0
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
assets:
- .env
- icon/
- svg/
- font/
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages
flutter_intl:
enabled: true # Required. Must be set to true to activate the package. Default: false
class_name: LocalizedStrings # Optional. Sets the name for the generated localization class. Default: S
main_locale: en # Optional. Sets the main locale used for generating localization files. Provided value should consist of language code and optional script and country codes separated with underscore (e.g. 'en', 'en_GB', 'zh_Hans', 'zh_Hans_CN'). Default: en
arb_dir: lib/l10n # Optional. Sets the directory of your ARB resource files. Provided value should be a valid path on your system. Default: lib/l10n
output_dir: lib/generated # Optional. Sets the directory of generated localization files. Provided value should be a valid path on your system. Default: lib/generated
use_deferred_loading: false # Optional. Must be set to true to generate localization code that is loaded with deferred loading. Default: false
# localizely: # Optional settings if you use Localizely platform. Read more: https://localizely.com/flutter-localization-workflow
# project_id: # Get it from the https://app.localizely.com/projects page.
# branch: # Get it from the “Branches” page on the Localizely platform, in case branching is enabled and you want to use a non-main branch.
# upload_overwrite: # Set to true if you want to overwrite translations with upload. Default: false
# upload_as_reviewed: # Set to true if you want to mark uploaded translations as reviewed. Default: false
# download_empty_as: # Set to empty|main|skip, to configure how empty translations should be exported from the Localizely platform. Default: empty
# ota_enabled: # Set to true if you want to use Localizely Over-the-air functionality. Default: false
我的flutter doctor
:
[✓] Flutter (Channel dev, 2.2.0-10.1.pre, on Mac OS X 10.15.7 19H524 darwin-x64, locale
en-NL)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] IntelliJ IDEA Ultimate Edition (version 2021.1)
[✓] VS Code (version 1.55.2)
[✓] Connected device (1 available)
! Error: iPhone is not connected. Xcode will continue when iPhone is connected.
(code -13)
• No issues found!
我的index.html
:
<!DOCTYPE html>
<html>
<head>
<base href="./">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="X">
<!-- iOS meta tags & icons -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="dashboard">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>X</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js?v=107771284');
});
}
</script>
<!--Firebase-->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
<script>
var firebaseConfig = {
//
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
是什么导致了这个问题,我该如何解决?
解决方案
推荐阅读
- sorting - gawk 和 PROCINFO 在对较长长度的字符串进行排序时无法按预期工作
- java - 请求登录 JMeter
- sql - sql求和2列值并按3列对记录进行排序
- python - TypeError: __init__() 接受 2 个位置参数,但给出了 3 个 - History 和 Settings 类应该得到很好的实现吗?
- javascript - 根据字段值对 JSON 进行排序,并将 null 替换为“-”
- javascript - 如何测试在 javascript 中不返回任何值的 jest 函数
- regex - 无法破译句子标记器正则表达式
- sql - 具有子句中的 sql sum 列未对季度值求和
- r - 为什么 R 在文件路径中使用正斜杠 (/) 而不是反斜杠 (\)
- html - 带有页眉、内容和页脚部分的响应式模态对话框