Cordova 应用程序在首次打开时需要 Internet

Question

我找到了this、this、this 和 this，但似乎没有一个与我的问题相似。

我有一个简单的 JavaScript 项目（实际上是一个游戏），它由 3 个文件组成，index.html、style.css 和 script.js强>。根本不需要互联网，没什么花哨的。

它的工作方式与我预期的一样。在计算机浏览器和移动浏览器上。 （虽然在移动端有点慢，但我正在想办法解决它）。

问题出在应用程序上。我按照 this 教程使用 Cordova 构建了应用程序。

当我在我的移动设备上安装应用程序时，会出现两个问题。

第一：
我的移动数据和 WiFi 都会自动开启。

第二：
如果我关闭互联网并启动应用程序，JavaScript 根本无法工作。看起来像这样。没有移动，没有触摸效果，什么都没有。

但如果我打开互联网然后运行该应用程序，它就可以正常工作。而且它只在第一次运行应用程序时发生。第一次后不需要互联网。

如何让它在纯离线模式下正常工作？

编辑：

更多信息，我没有编辑cordova生成的项目，因为我对android应用程序开发不太了解。我正在尝试理解它，因此决定制作这个项目。

编辑 2：

这是项目的极简代码。在此之后，除了样式之外，我没有添加任何脚本。

console.clear();
$('document').ready(function() {

  var collided = false;
  var collidedWith = null;
  var $ship = $('.ship');
  var $walls = $('.wall')
  
  var $totalHeight = $('.inner').height(); //of walls
  var $maxHeight = Math.ceil(Math.ceil($totalHeight / 3) - (Math.ceil($totalHeight / 3) * 30) / 100); //30% of total wall height

  $('.wall').each(function(i, obj) {
    $(this).height($maxHeight);
    $('.wall.four').css({
      'height': $wallGap
    });
  })

  var $wallGap = Math.ceil($totalHeight / 3) - $maxHeight;
  var $wallOneTop = 0;
  var $wallTwoTop = $maxHeight + $wallGap;
  var $wallThreeTop = ($maxHeight * 2) + ($wallGap * 2);
  var $wallFourTop = -$('.wall.four').height() - $wallGap;

  $('.wall.one').css({
    'top': $wallOneTop
  });
  $('.wall.two').css({
    'top': $wallTwoTop
  });
  $('.wall.three').css({
    'top': $wallThreeTop
  });
  $('.wall.four').css({
    'top': $wallFourTop
  });


  function moveWall(wallObj) {
    var $currentTop = wallObj.position().top;
    var $limitTop = $('.inner').height();

    if ($currentTop >= $limitTop) {
      var $rand = Math.floor(Math.random() * ($maxHeight - $wallGap + 1) + $wallGap);
      wallObj.height($rand);
      var $top = -(wallObj.height());
    } else {
      var $top = (wallObj.position().top) + 5;
    }
    //    var $collide = checkCollision(wallObj);
    wallObj.css({
      'top': $top
    });
    // return $collide;
  }

  var $wallTimer = setInterval(function() {
    $walls.each(function(i, obj) {
      moveWall($(this));
      if (collided) {
        clearInterval($wallTimer);
      }
    })
  }, 40);


  function checkCollision() {
    var $shipWidth = $ship.width();
    var $shipHeight = $ship.height();
    var $shipLeft = $ship.position().left;
    var $shipRight = $shipLeft + $shipWidth;
    var $shipTop = $ship.position().top;
    var $shipBottom = $shipTop + $shipHeight;
    
    $('.wall').each(function(i) {

      var $wall = $(this);
      var $wallWidth = $wall.width();
      var $wallHeight = $wall.height();
      var $wallLeft = $wall.position().left;
      var $wallRight = $wallLeft + $wallWidth;
      var $wallTop = $wall.position().top;
      var $wallBottom = $wallTop + $wallHeight;

      if (
        $shipLeft < $wallRight &&
        $shipRight > $wallLeft &&
        $shipTop < $wallBottom &&
        $shipBottom > $wallTop
      ) {
        console.log("dhumm!");
        collided = true;
        collidedWith = $wall
        $wall.addClass('crashed')
        $ship.addClass('crashed')
        $ship.stop();
        return false;
      }
    })
  }







  $('.outer .inner').click(function() {
    var $ship;
    $ship = $('.ship');
    $shipLeft = $ship.position().left;
    $shipRight = $shipLeft + $ship.width();

    $inner = $('.inner');
    $innerLeft = $inner.position().left;
    $innerRight = $innerLeft + $inner.width();


    if (($shipLeft < $inner.width() - $ship.width())) {
      $ship.animate({
        "left": $inner.width() - $ship.width()
      }, {
        "duration": 500,
        "easing": "linear",
        "progress": checkCollision,
      });
    } else if (($shipRight >= $inner.width())) {
      $ship.animate({
        "left": '0'
      }, {
        "duration": 500,
        "easing": "linear",
        "progress": checkCollision,
      });
    }

  });


});

.outer {
  background: #fff;
  border: 20px solid #efefef;
  width: 400px;
  height: 600px;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

.outer .inner {
  background: #fff;
  height: 100%;
  width: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.outer .inner .wall {
  width: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
}
.outer .inner .wall.crashed {
  background: red;
}


.outer .inner .ship {
  width: 15px;
  height: 15px;
  background: orange;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.outer .inner .ship.crashed {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <div class="wall one"></div>
    <div class="wall two"></div>
    <div class="wall three"></div>
    <div class="wall four"></div>

    <div class="ship"></div>
  </div>
</div>

Answer 1

主要问题是您正在从外部 url 加载 jquery：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

对于离线支持，您最好将 jquery 嵌入到您的应用程序中。