Apache Cordovaでのバックグラウンドプロセスの記述

2年前、私はAndroid向けのモバイル開発に興味を持ちました。 次に、Webサイトを解析するための気取らないアプリケーションを作成しました。 プログラムコードはJavaで記述されています。 これは非常に強力な言語ですが、複雑なタスクを実行しないシンプルで軽量なアプリケーションを作成するためには、オブジェクト指向のパラダイムはあまり役に立たないように思えました。 当時、私はちょうどJavaScriptに精通し始めていました。 最初、彼はそのシンプルさで私を惹きつけ、それから私はより多くの機会を開き始めました。 HTML5とCSS3に慣れていたので、楽しみのためにすてきなWebページを作成しました。







Apache Cordova-HTML、CSS、およびJavaScriptでモバイルアプリケーションを作成できるフレームワークについて知りました。 すぐにインストールしました。







Cordovaとの連携は本当に便利でした。 それでも、インターネット上の主題記事の数から判断すると、このフレームワークはまだ広く配布されていません。 たとえば、Wikipediaモバイルアプリケーションが実装されています。







これは、標準のCordova APIの機能が不十分であるためだと考えています。 Bluetooth、音声認識および合成、カメラなどでの作業用 プラグインが必要です。 プラグインは、1つ以上のプラットフォーム用にネイティブ言語で作成できます。







開発者のニーズに合わせて、パブリックドメインにある何千ものプラグインが作成されています。 閉じた後でも、一定期間が経過するたびにユーザーにプッシュ通知を送信するアプリケーションを作成する必要が生じる瞬間まで、私は喜んでいました。 Androidでは、このような機能はバックグラウンドプロセスを通じて実装されます。 このようなものを作成するためのプラグインが見つかりませんでした。 プラグインhttps://github.com/katzer/cordova-plugin-background-modeを使用すると、バックグラウンドプロセスを開始でき、アプリケーションが終了するとすぐに停止しました。







フォーラムは、Cordovaで本格的なバックグラウンドプロセスを作成することは不可能であると主張しました。 しかし、だれがこれらのニーズのためにあなた自身のプラグインを書くことに悩んでいますか? 数日間の作業の後、プラグインと、起動すると5秒ごとにユーザーに通知を送信するアプリケーションを作成しました。







この投稿でアプリケーションとプラグインを作成する方法についてお話したいと思います。







Cordovaをインストールし、アプリケーションを起動します



Cordovaをインストールする前に、Android SDK、Apache Ant、およびJavaを必ずインストールしてください。







次に、それらをシステムパスに追加します。







Windowsの場合:検索に「コントロールパネル」と入力します。 [ システムの詳細設定]をクリックします環境変数をクリックします。 [ 環境変数]で 、PATH環境変数を選択します。 変更をクリックします。

行末に追加;C:\Development\adt-bundle\sdk\platform-tools;C:\Development\adt-bundle\sdk\tools;%JAVA_HOME%\bin;%ANT_HOME%\bin









Mac / Linuxの場合: open〜 ~/.bash_profile



.bash_profileを開きます。 システム変数を追加します: export PATH=${PATH}:/Development/adt-bundle/sdk/platform-tools:/Development/adt-bundle/sdk/tools



存在しない場合は、JavaおよびApache Antのパスを追加します。







必ずフォルダーパスを指定してください。







  1. サイトhttps://nodejs.org/en/download/からNode.jsをインストールします。これにより、JavaScriptをネイティブコードに変換できます。 プラットフォームには、Cordovaのインストールに使用するnpmパッケージマネージャーが含まれています。







  2. コマンドラインまたはターミナルを開き、Cordovaをインストールします

    npm install -g cordova









  3. 新しいプロジェクトを作成します。


cordova create MyApp com.app.myapp MyApp









最初の引数は、コードとアプリケーションファイルが保存されるフォルダーの名前です。 この場合、MyPluginAppです。

2番目の引数は、アプリケーションパッケージの名前、一意の識別子です。

3番目の引数は、ユーザーに表示されるアプリケーションの名前です。 通常、フォルダー名と同じです。







アプリケーションフォルダーに移動することを忘れないでください。







cd MyApp









  1. アプリケーションを実行するプラットフォームを追加します。 私の場合、それはAndroidです。


cordova platform add android









  1. 最初の%Cordovaアプリケーションを起動します


cordova run android









画像







プラグインを書く



ここで、バックグラウンドプロセスを担当するServiceクラスにAPIを渡すプラグインを作成します。







プラグインを作成するには、通常のフォルダーを作成する必要があります。 アプリケーションフォルダがある同じディレクトリに作成します。 MyPluginと呼びましょう。







プラグインにはplugin.xmlファイルが含まれます。 作成してプラグインフォルダーに追加します。







plugin.xml:







 <?xml version="1.0" encoding="utf-8"?> <plugin xmlns="http://www.phonegap.com/ns/plugins/1.0" id="com.example.myplugin" version="1.0"> <name>MyPlugin</name> <engines> <engine name="cordova" version=">=3.4.0"/> </engines> <asset src="www/MyPlugin.js" target="js/MyPlugin.js"/> <js-module src="www/MyPlugin.js" name="MyPlugin"> <clobbers target="MyPlugin" /> <!-- ,     --> </js-module> <platform name="android"> <config-file target="res/xml/config.xml" parent="/*"> <feature name="MyPlugin"> <param name="android-package" value="com.example.plugin.MyPlugin"/> <!--   java- --> </feature> </config-file> <config-file target="AndroidManifest.xml" parent="/manifest/application"> <service android:name="com.example.plugin.MyService" /> <!--    () --> </config-file> <framework src="com.android.support:support-v4:+" /> <!-- ,   java- --> <!--  java- --><source-file src="src/android/MyPlugin.java" target-dir="src/com/example/plugin/"/> <!-- java-,  Service --><source-file src="src/android/MyService.java" target-dir="src/com/example/plugin/"/> </platform> </plugin>
      
      





このファイルには、プラグイン、その機能に必要なファイルとライブラリ、およびAPI機能に関する情報が保存されます。 ご覧のとおり、1つのJavaScriptファイルと2つのJavaファイルを参照しています。 それらを作成しましょう!







wwwフォルダーをMyPluginフォルダーに追加し、そこにMyPlugin.jsファイルを作成します。 ここでは、アプリケーションがネイティブコードとやり取りできる機能について説明します。 つまり、このファイルは、アプリケーション開発者のJavaScriptコードとプラグイン開発者のJavaコードの間の一種のコンダクターとして機能します。







MyPlugin.js:







 module.exports = { runBackground: function (successCallback, errorCallback) { cordova.exec(successCallback, errorCallback, "MyPlugin", "runBackground", []) } }
      
      





プラグインには、通知を送信するバックグラウンドプロセスを開始する1つのrunBackground関数があります。 引数として、コマンドが成功した場合に呼び出される関数と、エラーを報告する関数を渡します。 次に、コマンドの送信先のネイティブコードのクラス名とコマンド自体の名前が続きます。 最後に追加の引数の配列がありますが、それらについては触れません。







最後に、ネイティブコードの使用を開始しましょう。 MyPlugin内にsrc / androidフォルダーを作成します。 MyPlugin.javaとMyService.javaの2つのJavaクラスがあります。







MyPlugin.java:







 package com.example.plugin; import org.apache.cordova.*; import org.json.JSONArray; import org.json.JSONException; import android.widget.Toast; import android.content.Context; import android.app.Notification; import android.app.NotificationManager; import android.content.Intent; import android.os.Bundle; import android.support.v4.app.NotificationCompat; public class MyPlugin extends CordovaPlugin { @Override public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException { if (action.equals("runBackground")) { Context context = cordova.getActivity().getApplicationContext(); Intent service = new Intent(context, MyService.class); context.startService(service); return true; } else { return false; } } }
      
      





最初に、org.apache.cordovaを含むライブラリがインポートされます*。これにより、Cordovaベースのアプリケーションと対話できます。 さらに、NotificationおよびNotificationManager-通知を処理するためのライブラリに対応できます。 NotificationCompatライブラリのために、plugin.xml行<framework src="com.android.support:support-v4:+" />



を追加しました。







アプリケーションがプラグインの何らかの関数を呼び出すとすぐに、文字列action



が渡されるexecuteメソッドが実行されます。 この行の値に応じて、さまざまなアクションのセットが実行されます。 プラグインでは、 action



はrunBackgroundの1つの値のみを取ることができます。 バックグラウンドプロセスのオブジェクトが作成され、呼び出されます。







MyService.java:







 package com.example.plugin; import org.apache.cordova.*; import android.app.Notification; import android.app.NotificationManager; import android.app.Service; import android.content.Intent; import android.os.Handler; import android.os.IBinder; import android.content.Context; import android.os.Handler; import android.support.v4.app.NotificationCompat; public class MyService extends Service { Handler mHandler = new Handler(); @Override public int onStartCommand(Intent intent, int flags, int startId) { mHandler.postDelayed(ToastRunnable, 5000); return START_STICKY; } @Override public IBinder onBind(Intent intent) { return null; } Runnable ToastRunnable = new Runnable() { public void run() { Context context = getApplicationContext(); NotificationManager mNotificationManager = (NotificationManager) context.getSystemService(Context.NOTIFICATION_SERVICE); NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context) .setSmallIcon(context.getApplicationInfo().icon) .setWhen(System.currentTimeMillis()) .setContentTitle("It works!") .setTicker("Ticker") .setContentText("Text") .setNumber(1) .setAutoCancel(true); mNotificationManager.notify("App Name", 228, mBuilder.build()); mHandler.postDelayed( ToastRunnable, 5000); } }; }
      
      





このクラスは通常のサービスです。 サービスが開始されると、 onStartCommand



メソッドはSTART_STICKYを返します。 これにより、アプリケーションを閉じた後でも、プロセスは継続します。 5秒ごとにプッシュ通知を送信するために、ハンドラーによって5秒ごとに呼び出されるRunnableスレッドが作成されました。 ストリームの本文では、通知が作成されて送信されます。







プラグインをアプリケーションに追加します



アプリケーションディレクトリに移動し、プラグインを追加します。







cordova plugin add ../MyPlugin









次に、www / js / index.jsに移動し、onDeviceReadyメソッドを次のように書き換えます。







 onDeviceReady: function() { app.receivedEvent('deviceready'); var failure = function() { alert("Error calling MyPlugin"); } MyPlugin.runBackground(function() {}, failure); }
      
      





runBackground関数はMyPluginオブジェクトを介して呼び出されます。このオブジェクトには、エラーが発生した場合に呼び出される関数と、すべてがうまくいけば空の関数が渡されます。 私たちとの成功した呼び出しの確認はすでにプッシュ通知を送信しているため、この関数は空のままになりました。







おわりに



これで、プッシュ通知を閉じた後でも5秒ごとにプッシュ通知を送信する機能するアプリケーションができました。







画像







画像







これは、有用なアプリケーションを作成するための単なるフレームワークであると言いたいです。 したがって、たとえば、走りに行く時間であることを人に思い出させることができます(もちろん5秒ごとではありません)。 いずれにせよ、この例は、プラグインを使用するCordovaがネイティブアプリケーションよりも機能的に劣っていないことを示しています。







リンクからアプリケーションとプラグインのソースコードをダウンロードできます: アプリケーション自体プラグイン








All Articles