首先

我使用Cordova（PhoneGap）将smartFX Virtual Trade发布为原生应用程序。上一次使用Cordova（PhoneGap）的原生应用实例是一个概述，而这次我将介绍实施的技巧。

动态替换js和css文件

使用WebView的优点之一是可以在不更新应用的二进制文件的情况下改变应用的行为。然而，仅仅修改链接的js内容可能会有引用旧文件缓存的可能性，而每次获取最新的js又会降低性能的问题。为了解决这个问题，我们考虑每次获取包含最新JS和CSS路径的小型js文件，并加载其中所述的js和css。

//var JS_PATH="http://192.168.1.77:3000/assets/demo.js"
//var CSS_PATH="http://192.168.1.77:3000/assets/demo_application.css"
var JS_PATH=null
var CSS_PATH=null

document.addEventListener("deviceready", function(){
  loadResources();
});

function loadResources(){
  if(!JS_PATH || !CSS_PATH){
    var d = document
    var s = "script"
    var fjs=d.getElementsByTagName(s)[0]
    var js=d.createElement(s)
    js.src = "https://hostname/current.js?t=" + Math.floor(new Date().getTime()/10000)
    fjs.parentNode.insertBefore(js,fjs)
  }else{
    loadCSS(CSS_PATH);
    loadJS(JS_PATH);
  }
}
function loadCSS(path){
  var link = document.createElement('link');  
  link.href = path;
  link.type = 'text/css';  
  link.rel = 'stylesheet';  
  var head = document.getElementsByTagName('head');  
  head.item(0).appendChild(link);  
}
function loadJS(path){
  var d = document
  var s = "script"
  var fjs=d.getElementsByTagName(s)[0]
  var js=d.createElement(s);
  js.src = path;
  fjs.parentNode.insertBefore(js,fjs)
  //開始処理内でjsを読み込まれたかをtimerをつかってcheckして
  //読み込みが終わっていたら処理を行う
  開始処理();
}

CSS_PATH="http://hostname/assets/demo_application-f19817820c9a6d9d9a05f52f352a80bd.css"
JS_PATH="http://hostname/assets/demo-2821df320a6a0d4b9197f873e5206f6f.js"
loadCSS(CSS_PATH);
loadJS(JS_PATH);

这个 current.js 文件负责调用最新的 CSS 和 JS 的路径。
在本地开发时，可以预先定义 CSS_PATH 和 JS_PATH，以便直接加载，无需经过 current.js。
虽然只能指定一个 JS 和一个 CSS，但在 Rails 中，通过设置 config.assets.debug = false，即使是动态加载，js 和 css 也会被合并到一个文件中，所以没有问题。

进行社交登录

在 Cordova 中，原则上不应该加载外部的网站，因为一旦加载，就无法返回。
然而，smartFX 的登录采用的是社交登录，因此在登录时必须加载外部的网站，比如 Twitter。
因此，smartFX 使用了一个名为 InAppBrowser 的应用内浏览器功能，并将登录页面作为一个与应用不同的界面显示。
即使出现了意外的行为，比如从 Twitter 的登录页面里跳转到 Twitter 页面而无法返回，只需点击关闭按钮关闭 InAppBrowser，就能返回应用。
此外，我们还通过在每次页面跳转时检查 InAppBrowser 内的页面是否为登录完成页面，并自动关闭 InAppBrowser 来实现对外部网站的使用，并且可以流畅地进行登录操作。

//ログインのリンクをclickした際のcallback
//clearcache=noでアプリのWebViewとセッション共有
loginProc = function(){
  var ref = window.open(host + '/demos/login', '_blank', 'location=yes,clearcache=no');
  ref.addEventListener("loadstop", function(e){
    if(e.url.match(/ログイン完了画面のPATH/)){
      ref.close();
    }
  });
}

当网络无法连接时的解决方法

如果在启动时处于无网络环境，由于外部的JS和CSS无法加载，屏幕会变成纯白色。此外，即使之后转移到有网络连接的地方，也不会重新加载，导致应用程序一直保持白屏状态，直到关闭应用为止。因此，在应用程序启动时，我们会检查网络是否连接，如果网络未连接，则注册一个事件处理程序，在连接后加载外部的JS和CSS，并显示”等待连接”对话框，直到连接成功。

document.addEventListener("deviceready", function(){
  if(navigator.connection.type == Connection.NONE){
    document.addEventListener("online", startLoadResources,false);
    ActivityIndicator.show("waiting for connection.");
  }else{
    loadResources();
  }
});

function startLoadResources(){
  ActivityIndicator.hide();
  loadResources();
}

只需一种选择，用中文将以下内容重新表达：

如果是背景则不进行处理。

在安卓系统中，当切换到其他应用程序并成为后台运行时，默认情况下JavaScript的处理仍然会继续进行。
因此，如果使用定时器来进行Ajax轮询，将会造成极高的电池消耗。
要防止这种情况发生，可以通过以下设置，在后台运行时不进行处理。

<preference name="keepRunning" value="false" />

总结

我提供了一些Cordova（PhoneGap）特有处理的技巧。希望对你有所帮助。