Cordova App in Requires Internet First Time It Is Opened

Question

I have found this, this, this and this but none seem to be similar as my problem.

I have a simple JavaScript project (a game actually) which consist of 3 files, index.html, style.css and script.js. No internet is required at all, Nothing fancy.

It's working like as I expect it to work. Both on computer browser and mobile browser. (though in mobile it's a bit slow, I'm trying to figure out how to solve it).

The problem is with the app. I have built the app with Cordova following this tutorial.

When I install the app in my mobile device, two problems happen.

First:
Both my mobile data and WiFi gets turned on automatically.

Second:
If I turn off internet and start the app, the JavaScript is not working at all. It looks like this.No movement, no touch effect, nothing.

But if I turn on the internet and then run the app, it works fine. And it's happening only the first time running the app. It does not require internet after the first time.

How do I make it work properly in pure offline mode?

EDIT:

A little bit more info, I have not edited the cordova generated project, as I don't know much about android app development. I'm trying to understand it thus decided to make this project.

Edit 2:

This is the minimalist code of the project. I have not added any scripting other than styling after this.

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

The main problem is that you are loading jquery from an external url:

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

For offline support, you´d better embed jquery in your application.