Access phone alarm (native resources)using html5 (

Question

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'

2. 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 ?

Answer 1

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. (Read more...)
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);

2) 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);

3) Here is my Reminder class and its constructor

    public class Reminder  {        
    private Context con;        
    public Reminder(Context con){
        this.con=con;
    }
   }

4)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();
    // end of toast...

    // Show status bar notification
    NotificationManager mNotificationManager = (NotificationManager) context
            .getSystemService(Context.NOTIFICATION_SERVICE);
    mNotificationManager.notify(receiverID, mBuilder.build());

}}

5) 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=>as 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);                    

            }

6) Now, you need to edit your Android Manifest.xml
set permission,

<uses-permission android:name="android.permission.VIBRATE" />

And Register ReminderReceiver class, add this lines with in tag (not inside of any other tags !!!),

<receiver android:name=".ReminderReceiver">
 </receiver>

7) 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

Answer 2

Answers:

1.Can we access native resources of mobile phones through this technologies ?

Yes, you can by using javascripts.

2. Do we need different coding to access different mobile operating systems ?

Yes, there isn't one size fit all.

3. Suggestions:

Check the document of each individual mobile system. You will find the guidelines as well as examples.