是什么导致 Meteor Cordova 构建中出现白屏死机?

What's causing White Screen of Death in Meteor Cordova build?

当我在 Meteor 中为 Android 构建时,我正在对出现白屏死机的 Android 应用程序进行故障排除。在开发、部署的服务器和移动浏览器上从浏览器显示时,它可以工作。

该应用程序是使用 Angular 在 MeteorJS 中构建的。版本是 Meteor 1.6.1.1 和 angular:angular@1.5.3_1。

控制台报错信息如下:

=> Started proxy.                             
=> Started MongoDB.                           

WARNING: You are testing your app on a remote device. For the mobile app to be able to connect to the local server, make sure your device is on the same network, and that the network configuration allows
             clients to talk to each other (no client isolation).

=> Started your app.                          
=> App running at: http://localhost:3000/     
=> Started app on Android Device.             
I20180530-14:46:50.104(1)? 05-30 14:46:44.712 31175 31175 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.150(1)? 05-30 14:46:45.219 31320 31320 I CordovaLog: Changing log level to DEBUG(3)
I20180530-14:46:50.151(1)? 05-30 14:46:45.457 31320 31320 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.151(1)? 05-30 14:46:45.579 31320 31387 E chromium: [ERROR:devtools_http_handler.cc(292)] Cannot start http server for devtools. Stop devtools.
I20180530-14:46:50.152(1)? 05-30 14:46:46.560 31320 31320 I MeteorWebApp: Serving asset bundle with version: 7990da69bb2fd9d114781c4ced3482f74c30885b
I20180530-14:46:50.152(1)? 05-30 14:46:46.785 31350 31401 I chromium: [INFO:library_loader_hooks.cc(36)] Chromium logging enabled: level = 0, default verbosity = 0
I20180530-14:46:50.153(1)? 05-30 14:46:47.285 31350 31401 E chromium: [ERROR:BudgetService.cpp(160)] Unable to connect to the Mojo BudgetService.
I20180530-14:46:50.153(1)? 05-30 14:46:47.781 31320 31320 I chromium: [INFO:CONSOLE(44922)] "WARNING: Tried to load AngularJS more than once.", source: http://localhost:12880/packages/modules.js?hash=b66baa905179fb6487e6ccaa81cbb12b2e53c95c (44922)

包:

meteor-base@1.3.0             # Packages every Meteor app needs to have
mobile-experience@1.0.5       # Packages for a great mobile UX
mongo@1.4.2                   # The database Meteor supports right now
reactive-var@1.0.11            # Reactive variable for tracker
tracker@1.1.3                 # Meteor's client-side reactive programming library

standard-minifier-css@1.4.0   # CSS minifier run for production mode
standard-minifier-js@2.3.1    # JS minifier run for production mode
es5-shim@4.7.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.10.6              # Enable ECMAScript2015+ syntax in app code
shell-server@0.3.1            # Server-side component of the `meteor shell` command

autopublish@1.0.7             # Publish all data to the clients (for prototyping)
insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
angular:angular@1.3.0
jquery
angular:angular-route
angular:angular-sanitize
angular:angular-animate
d3js:d3
urigo:static-templates
fourseven:scss
twbs:bootstrap
browser-policy

Cordova 插件:

cordova-plugin-meteor-webapp@1.4.1
cordova-plugin-splashscreen@4.1.0
cordova-plugin-statusbar@2.3.0
cordova-plugin-wkwebview-engine@https://github.com/apache/cordova-plugin-wkwebview-engine.git#815ed0741b9ae30b343d6429bd8ff2ad37ec5790
cordova-plugin-wkwebviewxhrfix@https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix.git#593eb98a155bd1f970276222be8c6bfa757568f4

@Swoox 建议我在 chrome 中 运行 开发工具,它产生了这些错误:

WARNING: Tried to load AngularJS more than once.
app.js:510 imports7999 start
app.js:510 all imports complete
app.js:510 Meteor Startup!
app.js:510 STRIPPED-DOWN 07 - app create command sent
app.js:510 Process Line in Action animations enabled

您似乎 运行正在 Meteor 本地服务器上。当您 运行 在本地服务器上安装您的应用程序时,您的服务器和您的客户端(您的应用程序在 phone 上)必须在同一个 WiFi 网络上,并且网络配置不应阻止客户端到达服务器。

如果您需要您的移动应用程序连接到不同的服务器,您可以使用 --mobile-server 选项指定一个地址。

对于生产环境,您需要设置 ROOT_URL 的环境变量,这将是您的应用程序可通过互联网访问的 URL(或域),以及 MONGO_URL 这将是MongoDB 部署的 URL。

相关例子;

  1. meteor 运行 android-device --> 服务器和客户端必须在同一个 WiFi 网络上
  2. meteor 运行 android-device --mobile-server your_app.herokuapp.com --> --mobile-serverparam用于定义可在 Internet
  3. 上访问的服务器 URL
  4. 您还可以定义相关的环境变量,如ROOT_URL="https://your_app.herokuapp.com"和MONGO_URL="mongodb://user:password@myserver.com:10139"

您也可以参考官方指南here

所以您的意思是它可以在与您 运行 应用程序相同的设备上的移动浏览器中运行?

我最好的建议是使用 Remote Inspect(例如 chrome://inspect;主要是控制台和网络)找出问题所在。

Forgotten/misconfigured 标记或 CSP?

2年前我用Meteor的时候,也有过类似的经历。我调试它的方式是使用 the error event。这不是调试错误的最佳方法,但它易于使用,因此在您深入研究使用需要时间来设置和学习如何使用的适当调试工具之前,可能值得一试。