注：この問題はmultiple parties on the official GitHub repository for Cordova Browser-Sync Plugin as wellから報告されています。ここに投稿することで、問題にもっと注意を払い、誰かがこれに対する洞察や実用的な解決策を持っているかどうかを確認することができます。クリーンで新しいApache CordovaアプリケーションでCordovaブラウザ同期プラグインが動作しないのはなぜですか？
私は、Apache Cordovaのの世界に新たなんだけど、フルスタックのLAMP開発に堪能。つまり、私はこの問題に悩まされています。基本的な/単純なApache Cordovaテストアプリケーションを作成し、Cordova Browser-Sync Pluginを追加すると、www/ディレクトリに変更を加えて、すぐにplatforms/browser/www/に反映されます。ライブリロード。変更をブラウザに反映させるには、強制的にリロードする必要があります。
Mac OS X 10.10.5（ヨセミテ）、NodeJS 4.4.0、NPM 2.14.20、Cordova 6.0.0、Cordova Browser-Sync Plugin 0.1.1で動作しています。
設定する手順は次のとおりです。そして、私はこのようなディレクトリに移動
cordova create MyApp
：
cd MyApp
とセットアップにこのように私の単純な「ブラウザ」コルドバアプリ：
cordova platform add browser
を最初にこのような新しいアプリを作成します最後のテストでは、次のようにアプリを実行するだけです：
cordova run browser
さて、われわれは単純な "Hello world"テストが動作することを知っています。今、私はこのようなコルドバブラウザ同期プラグインを追加します：
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...
注意？ 1つのブラウザがリロードされていないことを100％保証します。私はライブリロード機能は、多くの場合、何らかの形でのDOMに注入され、インラインのJavaScriptコードに依存していることを理解
<!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>
：そしてここで私は生きてリロードをトリガーするために編集しようとしていたアプリケーションのルートからHTML www/index.htmlですライブリロードサーバと通信するHTML。私がオンラインで読んだことでは、このような問題が発生します。ライブリロードが失敗する場合は、ページに設定されていない<body></body>タグが原因であることがよくあります。しかし、彼らは明らかにそこにいる。私はほとんどそれがContent-Security-Policyに関連する問題だと思っていますが、JavaScriptがページに挿入されていればそれは本当に重要な要素になります。
このように、ライブリロード機能は信じられないほど素朴な初期設定で機能しないのはなぜですか？
申し訳ありませんが、それはそれとは関係ありません。あなたの問題は、実際のリロードJavaScript自体が実際にページに注入された場合にのみ表示されます。それはまったく起こりません。見るために私のサンプルHTMLを見てください。正しく挿入されていれば、閉じた ''タグの近く（？の後ろ）にDOMの一番下にあります。 'cordhost run browser - --live-reload'を実行すると' localhost：8000'のデフォルトのdevサーバが起動しますが、その後は 'localhost：3000'と' localhost：3001のためにブラウザ同期サーバが起動します'。この設定が正しく動作していれば、 'localhost：3000'だけになります。 – JakeGould