Aplicativos híbridos

Prev Next

Use os SDKs Xtremepush em aplicativos híbridos

Aplicativos híbridos são construídos como aplicativos nativos para iOS ou Android, não utilizam um framework multiplataforma bem conhecido, mas têm a maior parte de suas funcionalidades implementadas via páginas HTML, usando CSS para customização da interface e JavaScript como principal linguagem para implementação da funcionalidade.

O Xtremepush suporta notificações push para dispositivos iOS via o Push Notification Service (APNs) da Apple e para dispositivos Android pelo serviço FCM (Firebase Cloud Messaging for Android) do Google. Se você tem um aplicativo híbrido personalizado para iOS ou Android que mistura código nativo e tecnologias web, deve ser possível integrar com sucesso. Primeiro, você deve fazer uma integração nativa usando a documentação nativa do iOS ou Android .

Ao realizar uma integração nativa, você poderá usar recursos como notificações push e serviços de localização. Se você precisar usar algumas chamadas nativas de API da parte web do seu app (por exemplo, marcar algum comportamento na parte web do seu app), será necessário criar métodos wrapper em torno dos métodos nativos da API.

iOS

Para chamar métodos Xtremepush das suas páginas web, você precisará modificar seu controlador de visualização web. Primeiro, você vai precisar importar o Xtremepush.

#import "XPush.h"

Depois, você precisará adicionar um método wrapper ao método Xtremepush que deseja chamar, por exemplo, o hitTag método.

//Native methods which will be called via JS
-(void) callHitTagFromJS:(NSString *)tag{
  [XPush hitTag: tag];
}

Para disponibilizar esse método em suas páginas web, você deve adicioná-lo a um JSContext no método dos controladores webViewDidFinishLoad de visualização web, conforme mostrado abaixo:

-(void) webViewDidFinishLoad:(UIWebView *)webView{

  //Create a JS context for WebViews, add any callbacks to native methods to this context
  JSContext *context = [_testWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

  //assigning call to callHitTagFromJS native method to hitTag JS method
  context[@"hitTag"] = ^(NSString *param1) {
    [self callHitTagFromJS:param1];
  };
}

Você pode então usar os métodos que adicionou em suas páginas web, por exemplo, pode chamar a hitTag função para marcar um comportamento dentro do app, como pressionar um botão. Se você tem um botão no seu HTML com uma onclick função como esta:

<input type="button" value="click me" ></input>

Você pode marcar esse pressionar de botão chamando o hitTag método wrapper que adicionou ao seu JSContext, por exemplo, na função JavaScript dele onclick :

<script type="text/javascript">
  function onclickfunction() {
    hitTag("btn_click");
    //some custom onclick  behaviour
  }
</script>

Android

Para Android, para chamar sistemas Xtremepush das suas páginas, você precisará modificar a atividade onde está carregando sua web view.

Primeiro, certifique-se de que o JavaScript esteja ativado na sua visualização web. O JavaScript é desativado no WebViews do Android por padrão. Ative-o nas Configurações da Web anexadas ao seu WebView da seguinte forma:

//enabling javascript engine
webView.getSettings().setJavaScriptEnabled(true);

Para criar um método da API Xtremepush, como o hitTag método (usado para marcar comportamentos dentro do app disponíveis em suas páginas web), você precisará criar uma interface entre seu código JavaScript e o código do lado do cliente do Android. Para vincular uma nova interface entre seu código JavaScript e Android, chame addJavascriptInterface(), passando uma instância de classe para vincular ao seu JavaScript e um nome de interface que seu JavaScript possa chamar para acessar a classe.

Abaixo está um exemplo de uma classe de interface JavaScript que você pode adicionar ao seu WebView para permitir o uso do hitTag método.

public class WebViewJavaScriptInterface {

  private Context mContext;

  //XtremePush PushConnector
  private PushConnector _pushConnector;

  /*
   * Method for adding your XtremePush PushConnector to your interface.
   * The PushConnector must be added so its methods can be called
   * via the JavaScript Interface on the JavaScript side
   */

  public void setPushConnector( PushConnector connector) {
    _pushConnector = connector;
  }

  /*
   * Instantiate the interface and set the context
   */
  public WebViewJavaScriptInterface(Context c) {
    this.mContext = c;
  }

  /*
   * This method can be used to call the XtremePush hitTag method from JavaScript
   * @JavascriptInterface required after SDK version 17.
   */
  @JavascriptInterface
  public void callHitTagFromJS(String message) {
    _pushConnector.hitTag(context, message);
  }

}

Para usá-lo, você precisará vincular essa classe ao JavaScript que roda no seu WebView com addJavascriptInterface() e dar um nome à interface (por exemplo, "Android"). Mas primeiro você precisará inicializá-lo com o PushConnector da sua aplicação, como mostrado abaixo:

/* Set up javascript interface for calling Android methods from js side
 * and add your apps XtremePush PushConnector
 */
WebViewJavaScriptInterface wInterface = new WebViewJavaScriptInterface(this);
wInterface.setPushConnector(mPushConnector);

// Bind the javascript interface to webview
webView.addJavascriptInterface(wInterface, "Android");

Você pode então usar os métodos adicionados por meio dessa interface em suas páginas web, por exemplo, pode chamar a hitTag função para marcar um comportamento dentro do app, como pressionar um botão. Se você tem um botão no seu HTML com uma onclick função como esta:

<input type="button" value="click me" ></input>

Você pode marcar esse pressionar de botão chamando o hitTag método wrapper que você adicionou via sua interface JavaScript, na função JavaScript onclick dele. Você precisará usar o nome da interface que definiu ao adicioná-la, no exemplo acima isso era "Android". addJavascriptInterface(wInterface, "Android") Esse nome será usado quando você chamar seu método de marcação, conforme mostrado abaixo:

<script type="text/javascript">
  function onclickfunction(){
    Android.callHitTagFromJS("Android");
    //Other onclick functionality
  }
</script>

Você pode encontrar mais informações sobre como trabalhar com Web Views na Documentação de Desenvolvedores do Android online.