为什么Cordova浏览器同步插件无法在干净的新的Apache Cordova应用程序上工作?

注意:这个问题在Cordova Browser-Sync插件的官方GitHub仓库上也有多方报告。 在这里发表,引起对这个问题的更多关注,看看有没有人有任何见解或实际的解决scheme。


我是新来的Apache Cordova的世界,但stream畅的全堆LAMP开发。 也就是说,我对这个问题感到困惑:当我创build一个基本的/简单的Apache Cordovatesting应用程序,并将Cordova Browser-Sync插件添加到混音中时,我可以在我的www/目录中进行更改,然后立即看到它们反映在platforms/browser/www/但我打开的浏览器窗口不生活重新加载。 我必须强制重新加载才能使浏览器中的变化得到反映。

我在Mac OS X 10.10.5(Yosemite)上运行了这一切,NodeJS是4.4.0,NPM是2.14.20,Cordova是6.0.0,Cordova Browser-Sync Plugin是0.1.1。

我设置的步骤如下: 首先创build一个像这样的新应用程序:

 cordova create MyApp 

然后我进入这样的目录:

 cd MyApp 

并设置我这样简单的“浏览器”cordova应用程序:

 cordova platform add browser 

最后的testing就是运行这样的应用程序:

 cordova run browser 

好的,所以我们知道简单的“Hello world”testing的作品。 现在我将添加Cordova Browser-Sync插件,如下所示:

 cordova plugin add cordova-plugin-browsersync 

所有的好,现在我将testing这样的应用程序:

 cordova run browser -- --live-reload 

如果我在文件中进行更改,那么浏览器根本就不会像所描述的那样“重新加载” 除非我失去了一些东西? 该命令的输出是:

 Running command: /Users/jakegould/Desktop/MyApp/platforms/browser/cordova/run --live-reload Static file server running on port 8000 (ie http://localhost:8000) CTRL + C to shut down Static file server running @ http://localhost:8000/index.html CTRL + C to shut down Executing command: open -n -a "Google Chrome" --args --user-data-dir=/tmp/temp_chrome_user_data_dir_for_cordova http://localhost:8000/index.html [BS] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.1.20:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://192.168.1.20:3001 -------------------------------------- [BS] Serving files from: platforms/android/assets/www [BS] Serving files from: platforms/ios/www [BS] Watching files... gzip 200 /index.html (/Users/jakegould/Desktop/MyApp/platforms/browser/www/index.html) gzip 200 /css/index.css (/Users/jakegould/Desktop/MyApp/platforms/browser/www/css/index.css) gzip 200 /cordova.js (/Users/jakegould/Desktop/MyApp/platforms/browser/www/cordova.js) gzip 200 /img/logo.png (/Users/jakegould/Desktop/MyApp/platforms/browser/www/img/logo.png) gzip 200 /js/index.js (/Users/jakegould/Desktop/MyApp/platforms/browser/www/js/index.js) gzip 200 /cordova_plugins.js (/Users/jakegould/Desktop/MyApp/platforms/browser/www/cordova_plugins.js) [BS] Reloading Browsers... 

请注意它是如何在列表末尾添加“重新加载浏览器…”的? 我向你保证100%没有一个浏览器被重新加载。 这里是我试图编辑的应用程序根目录下的HTML www/index.html来触发一个实时重载:

 <!DOCTYPE html> <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <html> <head> <!-- Customize this policy to fit your own app's needs. For more guidance, see: https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy Some notes: * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>Hello World</title> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Fucking Ready</p> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> 

我了解,实时重载function通常依赖于embedded式JavaScript代码,它以某种方式注入到HTML的DOM中,以便与实时重载服务器进行通信。 而且我在网上读到的所有内容都说这些问题(实时重新加载失败)通常来自<body></body>标记未设置在页面上。 但他们显然在那里。 我几乎想要认为这是一个Content-Security-Policy相关的问题,但是这只会是一个因素,如果JavaScript被注入页面开始。

那么,为什么现场重新加载function不能在这样一个令人难以置信的初始设置中工作呢?

代码方面,似乎没有解决scheme/修复工程。 为什么? 谁知道。 但是现在插件已经坏了。

并且通过技术细节, 根据 与官方插件连接并直接来自项目本身的开发人员的GitHub存储库上的这个问题票据 ,项目“退役”。

我打算退休这个项目,赞成塔科斯生活 。 这也是基于相同的代码,我现在是该项目的PM。 那个项目也会有更多的开发者在做,所以作为官方的项目会有更多的支持。

那会满足你的需求吗? 这个项目有没有什么东西,taco-livereload没有?

由于Taco是微软的一个项目 ,即使他们使用MIT许可证,我也不会用10英尺的杆子去触摸它。 微软的“拥抱,扩展和消灭”哲学对于像这样的开源项目似乎太冒险了。

相反,我将转向Ionic作为一个框架,因为它拥有现成的重载function,现在被cordova开发世界广泛采用和接受。

PS: 在插件作者的博客中讨论的内容安全策略解决schemebuild议设置ws: 'unsafe-inline'只会是一个因素,如果实时重载JavaScript代码正确地被注入页面开始。 来自不可信来源的JavaScript会导致在插件真正起作用的情况下进程失败。 在页面加载后,Web浏览器控制台中会显示这样的错误。

但是在这种情况下,代码注入不再发生,并使用cordova run browser -- --live-reload启动应用程序cordova run browser -- --live-reload启动localhost:8000上的默认开发服务器,然后启动浏览器同步服务器localhost:3000localhost:3001 。 如果这个设置工作正常,它只会在localhost:3000上运行; 而不是端口80003000

我想你在内容安全策略定义中错过了ws:'unsafe-inline'

该插件需要这个CSP的websocket工作。

看看这里的videohttp://blog.nparashuram.com/2015/08/using-browser-sync-with-cordova.html (在插件的readme.md链接)的详细解释关于插件的使用。

应该:

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ws: 'unsafe-inline' https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">