Горячая перезарядка Cordova на устройстве без Ionic

Я реализовал собственный способ "горячей перезагрузки" в Кордове. Я не знаю, насколько он оригинален, но он хорошо работает для моих нужд. В широких строках он работает следующим образом: в режиме разработки запускается статический веб-сервер, и кордове дают указание, что содержимое является URL-адресом этого сервера: <content src="http://10.0.3.2:8080"/>.

Статический сервер также прослушивает изменения в активах (js/css/html) и автоматическую перезагрузку. Для этого мы используем gulp connect (https://www.npmjs.com/package/gulp-connect).

В режиме производства вам необходимо скомпилировать активы и дать указание кордове использовать обычный статический файл для загрузки вашего приложения.

Подробности:

В cordova.xml это строка, которая сообщает кордове, где запускать приложение:

<content src="index.html" />

Таким образом, это должно быть заменено на "динамическую" версию, которая позволила бы горячую перезагрузку. Я достиг этого, используя gulp-connect который запускает статический файловый сервер.

  gulp.task('connect', function () {
    return connect.server({
      root: 'www',
      livereload: true,
      fallback: 'www/index.html',
      https: false
    });
  });

Я создал две задачи, которые меняют конфигурацию кордовы в процессе разработки и производства:

  // Development
  // adds the localhost(on the emulator as 10.0.3.2) as
  // the content source for the cordova app
  gulp.task('cordova-dev-server-android', function () {
    return gulp.src(['config.xml'])
      .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1http://10.0.3.2:8080$3"))
      .pipe(gulp.dest('.'));
  });

  // Production
  // adds the static file as
  // the content source for the cordova app
  gulp.task('cordova-static-file', function () {
    return gulp.src(['config.xml'])
      .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1index.html$3"))
      .pipe(gulp.dest('.'));
  });

Одна важная вещь, которую вы должны обеспечить, чтобы файлы javascript Кордовы были доступны на веб-сервере разработки. Опять же, я достиг этого с двумя задачами для разработки/производства.

  // Development
  // Creates symlinks for the devserver
  // so the app has access to cordova files
  gulp.task('create-cordova-symlink-android', ['remove-cordova-symlink'], function () {
    return gulp.src('')
      .pipe(exec('ln -sv ../platforms/android/assets/www/cordova.js www'))
      .pipe(exec.reporter())
      .pipe(exec('ln -sv ../platforms/android/assets/www/cordova_plugins.js www'))
      .pipe(exec.reporter())
      .pipe(exec('ln -sv ../platforms/android/assets/www/plugins www'))
      .pipe(exec.reporter());
  }); 


  // Production
  // Removes symlinks for production
  // see create-cordova-symlink-android
  gulp.task('remove-cordova-symlink', function () {
    var options = {
      continueOnError: true
    };
    return gulp.src('')
      .pipe(exec('rm www/cordova.js', options))
      .pipe(exec('rm www/cordova_plugins.js', options))
      .pipe(exec('rm -Rf www/plugins', options));
  });

Я использую gulp здесь, но это может быть реализовано с использованием любого бегущего задания, и, конечно же, для других платформ вам нужно немного изменить этот код.

Надеюсь это поможет.