Подтвердить что ты не робот

Почему плагин Cordova Browser-Sync не работает над чистым новым приложением Apache Cordova?

ПРИМЕЧАНИЕ: Эта проблема сообщается из нескольких сторон в официальном репозитории GitHub для плагина Browser-Sync Cordova, а также. Проводя это здесь, чтобы привлечь больше внимания к проблеме и узнать, есть ли у кого-нибудь понимание или практическое решение этого.


Im новый для мира Apache Cordova, но свободно в разработке LAMP с полным стеком. Тем не менее, я озадачен этим вопросом: когда я создаю базовое/простое приложение Apache Cordova и добавляю браузер Cordova- Sync Plugin в микс, я могу внести изменения в мой каталог www/, а затем сразу увидеть их в platforms/browser/www/, но мое открытое окно браузера не перезагружается. Мне нужно принудительно перезагрузить, чтобы изменения отображались в браузере.

Я запускаю все это в Mac OS X 10.10.5 (Yosemite), NodeJS - 4.4.0, NPM - 2.14.20, Кордова - 6.0.0, а плагин Cordova Browser-Sync - 0.1.1.

Мои шаги по настройке: сначала создайте новое приложение, подобное этому:

cordova create MyApp

Затем я перехожу в каталог следующим образом:

cd MyApp

И настройте мое простое приложение "браузера" Кордовы следующим образом:

cordova platform add browser

Последний тест - просто запустить приложение следующим образом:

cordova run browser

Хорошо, поэтому мы знаем этот простой "Hello world". тестовые работы. Теперь я добавлю плагин Corbo Browser-Sync следующим образом:

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...

Обратите внимание на то, как в конце списка указано "Перезагрузка браузеров...". Уверяю вас, 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 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>

Я понимаю, что функция живой перезагрузки часто основывается на встроенном JavaScript-коде, который каким-то образом вводится в DOM HTML для связи с сервером живой перезагрузки. И все, что я читал в Интернете, говорит о таких проблемах, когда живая перезагрузка сбой - часто происходит из тегов <body></body>, которые не задаются на странице. Но они явно там. Я почти хочу думать о связанной с этим проблеме Content-Security-Policy, но это было бы действительно действительно фактором, если бы JavaScript был введен на страницу для начала.

Итак, почему именно функция живой перезагрузки не работает в первоначальной настройке невероятно голых костей?

4b9b3361

Ответ 1

В коде, похоже, не существует решения/исправления, которое работает. Зачем? Кто знает. Но плагин, как он сейчас находится, сломан.

И за технической спецификацией в соответствии с этим номером вопроса в репозитории GitHub, подключенном к официальному подключаемому модулю и непосредственно от разработчика самого проекта - проект "вышел на пенсию".

Я планирую выпустить этот проект в пользу Taco-livereload. Это также основано на почти том же коде, и я теперь PM на этот проект. В этом проекте также будет работать больше разработчиков, поэтому будет иметь большую поддержку в качестве официального проекта.

Будет ли это соответствовать вашим потребностям? Есть ли что-нибудь, что этот проект имеет, что taco-livereload не имеет?

Так как Taco - это проект Microsoft, я не буду касаться этого с помощью 10 футов даже если они используют лицензию MIT. Философия Microsoft "охватывать, расширять и гасить" кажется слишком рискованной для такого начинания с открытым исходным кодом.

Поэтому вместо этого я собираюсь перейти к Ionic в качестве рамки, поскольку он имеет функциональные возможности перезагрузки прямо из коробки и более широко принят и принят в мире развития Кордовы.

PS: Решение Content-Security-Policy, обсуждаемое в блоге авторов плагинов, в котором предлагается установить ws: 'unsafe-inline', будет только фактором, если live reload JavaScript код был правильно введен на страницу для начала. JavaScript из недоверенного источника - это то, что сделало бы процесс неудачным в тех случаях, когда плагин действительно работал. И доказательство будет видеть такую ​​ошибку в консоли веб-браузера после загрузки страницы.

Но в этом случае инъекция кода больше не происходит, и запуск приложения с помощью cordova run browser -- --live-reload запускает сервер разработки по умолчанию на localhost:8000, но затем серверы синхронизации браузера запускаются для localhost:3000 и localhost:3001, Если эта настройка работает правильно, она будет работать только на localhost:3000; а не порты 8000 и 3000.

Ответ 2

Я думаю, что вы пропустили ws: 'unsafe-inline' в своем определении политики безопасности контента.

Плагин нуждается в этом CSP для работы websocket.

Посмотрите на видео http://blog.nparashuram.com/2015/08/using-browser-sync-with-cordova.html (связанный в plugin 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 *">