androidhtmlcordovaphonegap-plugins

Access phone alarm (native resources)using html5 (Reminder app)

These are my technologies,

  1. HTML5
  2. Jquery mobile, Jquery, Java Script
  3. Css
  4. Cordova

We are developing app using HTML 5 and we need to access phone (Android,iPhone,Windows Phone) resources, such as alarm (to create reminder). Questions,

  1. Can we access native resources of mobile phones through this technologies ?
  2. Do we need different coding to access different mobile operating systems ?
  3. What are the pros and cons of this method ?
  4. what is the Best method of doing this ?
  5. Any suggestions ?

Sample code or examples for access Android, Iphone and Windows phone 8 alarm manager through javascript?

Did any one use this Background Service Plugin for this task?


I asked question regarding this use for access alarm manager

do any one have sample code or give me a step by step guidance, how to use this for access Android alarm manager ?

I try to access native code through java script like this question and answer but it's not working.

When i clicked the button;

  1. in eclipse logcat; under cordova tag,

Uncaught TypeError:Object [object Object] has no method 'getTelephoneNumber'

  1. in eclipse logcat; under chromium tag,

[INDO:CONSOLE(22)]"Uncaught TypeError:Object [object Object] has no method 'getTelephoneNumber'", source: file:///android_asset/www/index.html (22)

my phonegap version is 2.7.0 and Emulator API level 19. what is the problem in here ? did i miss anything ?

Solution

  • After a long running process i manage to come up with solution to the android devices.

    1. Access native code using javascript is possible
    2. Using javascript interface raise a threat of xss vulnerability, but in Latest API Level 19 eliminated this.

    Let the code speak; MainActivity code first

    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
public class MainActivity extends DroidGap
    1. onCreate method code
    super.init();
WebView webView = new WebView(this);
webView.getSettings().setJavaScriptEnabled(true);

// Add these lines according to your requirements
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setSaveFormData(true);
webView.getSettings().setAllowContentAccess(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowFileAccessFromFileURLs(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
//webView.getSettings().setSupportMultipleWindows(true);
webView.getSettings().setSupportZoom(true);
webView.setWebViewClient(new WebViewClient());
webView.setClickable(true);
    1. To complete next step you need to have Reminder class with in your MainActivity class and what ever html file in your assets folder. In my case i have Login.html in assets/www/Phone/Login.html
    webView.addJavascriptInterface(new Reminder(this), "Reminder");
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/www/Phone/Login.html");
setContentView(webView);
    1. Here is my Reminder class and its constructor
    public class Reminder {
    private Context con;

    public Reminder(Context con){
        this.con=con;
    }
}
    1. ReminderReceiver class
    public class ReminderReceiver extends BroadcastReceiver {
    // Vibrator object
    public Vibrator vibrator;
    long[] pattern = { 0L, 250L, 200L, 250L, 200L, 250L, 200L, 250L, 200L, 250L, 200L, 250L, 200L, 250L, 200L };

    // Ringtone object
    Uri ringT;
    Ringtone ringTone;

    @Override
    public void onReceive(Context context, Intent intent) {
        String remindText = intent.getStringExtra("text");
        int receiverID = intent.getIntExtra("AlrmId", 0);

        // Notification creation
        NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(context)
                .setSmallIcon(android.R.drawable.ic_popup_reminder)
                .setContentTitle("Reminder").setContentText(remindText);

        // Create vibrator pattern
        vibrator = (Vibrator) context
                .getSystemService(Context.VIBRATOR_SERVICE);
        vibrator.vibrate(pattern, -1);// No repetition

        // Notification tone creation and play
        ringT = RingtoneManager
                .getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
        ringTone = RingtoneManager.getRingtone(context, ringT);
        ringTone.play();

        // Create toast and show on center of the screen
        Toast toast = Toast.makeText(context, remindText, Toast.LENGTH_LONG);
        toast.setGravity(Gravity.CENTER, 0, 0);
        toast.show();

        // Show status bar notification
        NotificationManager mNotificationManager = (NotificationManager) context
                .getSystemService(Context.NOTIFICATION_SERVICE);
        mNotificationManager.notify(receiverID, mBuilder.build());
    }
}
    1. Method that can call through JavaScript and responsible to add Alarm object into System Alarm Manager. In Reminder class
    @JavascriptInterface
public void addReminder(int mYear, int mMonth, int mDay, int mHour, int mMinute) {
    Calendar c = Calendar.getInstance();

    // set Reminder time and date into calendar object
    c.set(Calendar.YEAR, mYear);
    c.set(Calendar.MONTH, mMonth); // Don't use exact numeric value of the month, use one minus. Ex: April => 3
    c.set(Calendar.DATE, mDay);
    c.set(Calendar.HOUR_OF_DAY, mHour);
    c.set(Calendar.MINUTE, mMinute);
    c.set(Calendar.SECOND, 0);

    // Unique Alarm ID creation
    int alrmId = 0;
    alrmId = Integer.parseInt(mMonth + "" + mDay + "" + mHour + "" + mMinute);
    
    // Alarm task creation
    Intent in = new Intent(con, ReminderReceiver.class);
    in.putExtra("text", "You have a Reminder!");
    in.putExtra("AlrmId", alrmId);

    PendingIntent pi;

    pi = PendingIntent.getBroadcast(con, alrmId, in, 0);

    AlarmManager am;

    am = (AlarmManager) (con.getSystemService(Context.ALARM_SERVICE));
    am.set(AlarmManager.RTC_WAKEUP, c.getTimeInMillis(), pi);
}

    1. Now, you need to edit your Android Manifest.xml,

      • set permissions <uses-permission android:name="android.permission.VIBRATE" /> and
      • register ReminderReceiver class, add this lines with in <application> </application> tag <receiver android:name=".ReminderReceiver"></receiver>.

    2. Finally in your html file add button, add javascript function, call it in button click event and inside of that function call addReminder method

    function test() {
    Reminder.addReminder(2014, 3, 4, 12, 30);
}

    Hope this answer will help who trying to using Native function of Android phone while developing through Phonegap.