HINWEIS: Dieses Problem wurde gemeldet von multiple parties on the official GitHub repository for Cordova Browser-Sync Plugin as well. Dies hier zu veröffentlichen, um mehr Aufmerksamkeit auf das Problem zu lenken und zu sehen, ob jemand eine Einsicht oder eine praktische Lösung dafür hat.Warum funktioniert das Cordova Browser-Sync Plugin nicht in einer sauberen, neuen Apache Cordova App?
Ich bin neu in der Welt des Apache Cordova, aber fließend in Full-Stack LAMP Entwicklung. Das heißt, ich bin verblüfft von diesem Problem: Wenn ich eine grundlegende/einfache Apache Cordova Test-Anwendung erstellen und Cordova Browser-Sync Plugin zum Mix hinzufügen, kann ich Änderungen in meinem www/ Verzeichnis vornehmen und dann sehen sie sofort in platforms/browser/www/ wider, aber mein geöffnetes Browserfenster nicht Live-Nachladen. Ich muss ein Neuladen erzwingen, damit die Änderungen im Browser angezeigt werden.
Ich benutze das alles auf Mac OS X 10.10.5 (Yosemite), NodeJS ist 4.4.0, NPM ist 2.14.20, Cordova ist 6.0.0 und das Cordova Browser-Sync Plugin ist 0.1.1.
Meine Schritte zum Einrichten sind wie folgt; zuerst eine neue App wie folgt erstellen:
cordova create MyApp
Dann gehe ich in das Verzeichnis wie folgt aus:
cd MyApp
Und mein Setup einfach „Browser“ Cordova App wie folgt aus:
cordova platform add browser
Ein letzter Test besteht darin, die App einfach so auszuführen:
cordova run browser
Okay, also wir wissen, dass einfach "Hallo Welt." Test funktioniert. Jetzt werde ich die Cordova Browser-Sync Plugin wie folgt hinzu:
cordova plugin add cordova-plugin-browsersync
alle gut und jetzt werde ich die Anwendung wie folgt testen:
cordova run browser -- --live-reload
Und wenn ich eine Änderung in einer Datei vornehmen, der Browser lädt einfach nicht wie beschrieben "neu laden"; es sei denn, ich verpasse etwas? Der Ausgang von diesem Befehl lautet:
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...
Hinweis, wie er sagt, „Neuladen Browser ...“ am Ende der Liste? Ich versichere Ihnen, 100% nicht ein Browser wurde neu geladen. Und hier ist der HTML www/index.html aus der Wurzel der Anwendung, die ich zu bearbeiten bin versucht, einen Live-reload auslösen:
<!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>
Ich verstehe, dass Live-Reload-Funktionalität beruht oft auf Inline-JavaScript-Code, der irgendwie in das DOM injiziert wird von der HTML-Code, um mit dem Live-Reload-Server zu kommunizieren. Und alles, was ich online gelesen habe, sagt, dass diese Art von Problemen - bei denen das erneute Laden fehlschlägt - oft von <body></body> Tags stammen, die nicht auf einer Seite gesetzt sind. Aber sie sind eindeutig da. Ich möchte fast denken, dass es ein Content-Security-Policy verwandtes Problem ist, aber das würde nur wirklich ein Faktor sein, wenn das JavaScript in die Seite von Anfang an eingefügt wurde.
Warum funktioniert die Live Reload-Funktion nicht in einem unglaublich einfachen Setup wie diesem?
Sorry, aber das hat nichts damit zu tun. Ihr Problem tauchte nur auf, wenn das Live-Reload-JavaScript selbst tatsächlich in die Seite eingefügt wurde. Das passiert überhaupt nicht; Sehen Sie sich mein Beispiel-HTML an, um zu sehen. Wenn es richtig injiziert wurde, würde es sich am Ende des DOM in der Nähe (nach?) Des schließenden "