Javascript 为什么Cordova浏览器同步插件不能在一个全新的ApacheCordova应用程序上运行？_Javascript_Node.js_Cordova

Javascript 为什么Cordova浏览器同步插件不能在一个全新的ApacheCordova应用程序上运行？

javascript node.js cordova

Javascript 为什么Cordova浏览器同步插件不能在一个全新的ApacheCordova应用程序上运行？,javascript,node.js,cordova,Javascript,Node.js,Cordova,注意：此问题由。在这里发布这篇文章是为了引起人们对这个问题的更多关注，并看看是否有人对此有任何见解或实际的解决方案我对ApacheCordova的世界还不熟悉，但精通全堆栈LAMP开发。这就是说，我对这个问题感到困惑：当我创建一个基本/简单的测试应用程序并添加到混合中时，我可以在www/目录中进行更改，然后立即在platforms/browser/www/中看到它们，但我打开的浏览器窗口不会实时重新加载。我必须强制重新加载以使更改反映在浏览器中我在Mac OS X 10.10.5（约塞米蒂

注意：此问题由。在这里发布这篇文章是为了引起人们对这个问题的更多关注，并看看是否有人对此有任何见解或实际的解决方案

我对ApacheCordova的世界还不熟悉，但精通全堆栈LAMP开发。这就是说，我对这个问题感到困惑：当我创建一个基本/简单的测试应用程序并添加到混合中时，我可以在

www/

目录中进行更改，然后立即在

platforms/browser/www/

中看到它们，但我打开的浏览器窗口不会实时重新加载。我必须强制重新加载以使更改反映在浏览器中

我在Mac OS X 10.10.5（约塞米蒂）上运行这一切，NodeJS是4.4.0，NPM是2.14.20，Cordova是6.0.0，Cordova浏览器同步插件是0.1.1

我的设置步骤如下：；首先创建一个新的应用程序，如下所示：

cordova create MyApp

cd MyApp

cordova platform add browser

cordova run browser

cordova plugin add cordova-plugin-browsersync

cordova run browser -- --live-reload

然后我进入目录，如下所示：

cordova create MyApp

cd MyApp

cordova platform add browser

cordova run browser

cordova plugin add cordova-plugin-browsersync

cordova run browser -- --live-reload

并按如下方式设置我的简单“浏览器”Cordova应用程序：

cordova create MyApp

cd MyApp

cordova platform add browser

cordova run browser

cordova plugin add cordova-plugin-browsersync

cordova run browser -- --live-reload

最后一个测试是像这样运行应用程序：

cordova create MyApp

cd MyApp

cordova platform add browser

cordova run browser

cordova plugin add cordova-plugin-browsersync

cordova run browser -- --live-reload

好的，我们知道简单的“你好，世界”测试是有效的。现在，我将添加Cordova浏览器同步插件，如下所示：

cordova create MyApp

cd MyApp

cordova platform add browser

cordova run browser

cordova plugin add cordova-plugin-browsersync

cordova run browser -- --live-reload

一切都很好，现在我将像这样测试应用程序：

cordova create MyApp

cd MyApp

cordova platform add browser

cordova run browser

cordova plugin add cordova-plugin-browsersync

cordova run browser -- --live-reload

如果我在一个文件中做了更改，浏览器就不会像上面描述的那样“实时重新加载”；除非我遗漏了什么？该命令的输出为：

Running command: /Users/jakegould/Desktop/MyApp/platforms/browser/cordova/run --live-reload
Static file server running on port 8000 (i.e. 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...

注意列表末尾的“重新加载浏览器…”字样吗？我向你保证，没有一个浏览器被重新加载。下面是我试图编辑以触发实时重新加载的应用程序根目录下的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>


你好，世界
阿帕奇科尔多瓦酒店
连接到设备
设备已准备就绪

我知道live reload功能通常依赖于内联JavaScript代码，这些代码以某种方式注入HTML的DOM中，以与live reload服务器通信。我在网上读到的所有信息都表明，这种实时重新加载失败的问题通常来自页面上未设置的

标记。但它们显然在那里。我几乎想认为这是一个与内容安全策略相关的问题，但这只有在JavaScript被注入页面时才是一个真正的因素

那么，为什么live reload功能在这样一个极其简单的初始设置中不起作用呢？

我认为您在内容安全策略定义中遗漏了ws:“不安全内联”

该插件需要此CSP才能使websocket正常工作

请看那里的视频（链接在插件的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 *">

就代码而言，似乎没有一个解决方案/修复方案能够起作用。为什么？谁知道呢。但现在的插件已经坏了

除了技术细节之外，项目本身的开发人员直接提出的项目已经“退役”

我计划退出这个项目，以支持我的工作。这也是基于几乎相同的代码，我现在是一个下午上那个项目。该项目还将有更多的开发人员参与，因此作为一个官方项目将得到更多的支持

这能满足你的需要吗？这个项目有什么需要改进的吗有，那塔可利弗雷罗德没有

因为是一个，我不会用10英尺长的杆子去碰它，即使他们使用的是麻省理工学院的许可证。对于这样的开源项目来说，微软的开源理念似乎太冒险了

因此，我将转向作为一个框架，因为它具有即时重新加载功能，并且现在被Cordova开发界更广泛地采用和接受

PS：这表明设置

ws:“unsafe inline”

只有在页面中正确注入实时重载JavaScript代码的情况下才会成为一个因素。在插件实际工作的情况下，来自不可信源的JavaScript会导致进程失败。而证据就是在页面加载后在web浏览器控制台中看到这样的错误

但是在这种情况下，代码注入不再发生，使用

cordova run browser--live reload启动应用程序会启动localhost:8000
上的默认开发服务器，但之后会启动localhost:3000
和localhost:3001
的浏览器同步服务器。如果此设置工作正常，它将仅在localhost:3000
上运行；而不是端口8000
和3000
此插件中有三种使用代码的方法。确保已将ws:和不安全内联CSP策略添加到index.html文件中CSP元标记（）的默认src部分
<meta http-equiv="Content-Security-Policy" content="default-src 'self' ws: 'unsafe-inline';">


对不起，这与此无关。只有在页面中实际注入了实时重新加载JavaScript时，才会出现您的问题。那根本就不会发生；请看我的HTML示例。如果它被正确注入，它将位于DOM的底部，靠近结束标记
。请注意，当我运行cordova run browser--live reload
时，它会在localhost:8000
上启动默认的开发服务器，但之后会为localhost:3000
和localhost:3001
启动浏览器同步服务器。如果此设置正常工作，则只有localhost:3000
。这不是中解释的解决方案。@JakeGould您应该检查此设置，这对我有效