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

Posted 2023-05-07

【中文标题】Cordova 应用程序在首次打开时需要 Internet

【英文标题】：Cordova App in Requires Internet First Time It Is Opened

【发布时间】：2021-01-30 19:12:26

【问题描述】：

我找到了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>

【问题讨论】：

如果没有看到代码，我们真的无法帮助您。但是我会检查代码以确保确实没有外部引用，即。 @import 在 JS 中调用

不，那里什么都没有。我将添加代码。

@RoryMcCrossan 我已经添加了代码。

【参考方案1】：

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

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

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