Monaca Docs


This sample app uses iBeacon service to detect its proximity to iBeacon device. This Monaca app has Onsen UI as its UI. When the mobile (running this app) gets close enough to a predefined iBeacon device, a new page showing its UUID will be displayed.
To check third party cordova plugins, you need to create a custom build debugger ( Android version or iOS version ).


Tested Environment
  • Android 11.0
  • iOS 14.3


  1. 1.
    Download the iBeacon plugin from here and import it into Monaca Cloud IDE. See Import Custom Cordova Plugin.
  2. 2.
    Find at least one iBeacon device.
  3. 3.
    Get information of each iBeacon device by using its corresponding utility software. In our case, we use My Beacon Tool.
  4. 4.
    Take note of the UUID of each iBeacon device.

File Components

Startup Page (Consists of Connect Screen)
Top page of the application
The page showing information of each iBeacon
JavaScript file handling app interactions
Stylesheet file for the application

Required JS/CSS Components

  • Onsen UI

Required Cordova Plugins

HTML Explanation

The User Interface of this sample app is based on Onsen UI. For more information on Onsen UI tags and components, please refer to Onsen UI Documentation.
The following contents of the HTML body of index.html file loads the top-page.html file at startup:
<ons-navigator var="myNavigator" page="top-page.html"></ons-navigator>
The following contents of the HTML body of top-page.html file:
<ons-page ng-controller="TopPageCtrl">
<div class="center">iBeacon Testing</div>
<ons-list modifier="inset" style="margin: 10px">
<ons-list-item class="list-item-container" ng-repeat="(uuid, beacon) in beacons">
<ons-col width="70px">
<img ng-src="{{beacon.icon}}" class="top-page-icon">
<div class="top-page-name">{{}}</div>
<div class="top-page-proximity">{{beacon.proximity}}</div>
<div class="top-page-proximity">{{beacon.rssi}} dBm</div>
Users can see a list of predefined iBeacon devices with its proximity.
The following contents of the HTML body of info-page.html file:
<ons-page ng-controller="InfoPageCtrl">
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">{{}}</div>
<ons-list-item class="list-item-container">
<ons-col width="110px">
<img src="{{beacon.icon}}" class="info-page-img">
<div class="info-page-description">
<p style="text-decoration: underline;">UUID</p>
It shows the information (UUID) of the closest iBeacon device to the mobile.

JavaScript Explanation

The JavaScript codes of this sample app is based on AngularJS. In AngularJS, each page, which requires interactions, contains its own controller function. In this sample, we have 2 controller functions: TopPageCtrl and InfoPageCtrl corresponded to top-page.html page and info-page.html page, respectively. In order to create global variables used between these controller functions, we create a service function to store those global variables as follows:
app.service('iBeaconService', function() {
this.currentBeaconUuid = null;
this.onDetectCallback = function(){};
var beacons = {
"00000000-EA98-1001-B000-001C4D9C64FA": {icon: 'img/1.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'JIBBER', number: '1', id: '000265C9', major: 1, minor: 1},
"F5A10AF9-A670-4F54-B491-8607393F0DDC": {icon: 'img/2.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'BUONO', number: '2', id: '0002D08D', major: 1, minor: 1},
"ABE425B2-0000-4409-8035-1668AFC7FCFE": {icon: 'img/3.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'LION', number: '3', id: '00029BAA', major: 1, minor: 1},
"BC564E82-0000-43A3-94E7-1D54EC02622D": {icon: 'img/4.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'COMA', number: '4', id: '0003F321', major: 1, minor: 1},
"6F29CF85-0000-414A-A7A6-6206A2DA9773": {icon: 'img/5.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'GNAR', number: '5', id: '00027EA8', major: 1, minor: 1},
"EEB52632-0000-47E2-8C15-897494E12015": {icon: 'img/6.jpg', rssi: -63, proximity: PROX_UNKNOWN, name: 'TEEMO', number: '6', id: '00032449', major: 1, minor: 1}
this.beacons = beacons;
createBeacons = function() {
var result = [];
try {
angular.forEach(beacons, function(value, key) {
result.push(new cordova.plugins.locationManager.BeaconRegion(, key, value.major, value.minor));
} catch (e) {
console.log('createBeacon err: ' + e);
return result;
this.watchBeacons = function(callback){
document.addEventListener("deviceready", function(){
var deviceVersion = window.device ? device.version : '';
var beacons = createBeacons();
try {
var delegate = new cordova.plugins.locationManager.Delegate();
delegate.didDetermineStateForRegion = function (pluginResult) {
console.log('[DOM] didDetermineStateForRegion: ' + JSON.stringify(pluginResult));
cordova.plugins.locationManager.appendToDeviceLog('[DOM] didDetermineStateForRegion: '
+ JSON.stringify(pluginResult));
delegate.didStartMonitoringForRegion = function (pluginResult) {
console.log('didStartMonitoringForRegion:', pluginResult);
console.log('didStartMonitoringForRegion:' + JSON.stringify(pluginResult));
delegate.didRangeBeaconsInRegion = function (pluginResult) {
var beaconData = pluginResult.beacons[0];
var uuid = pluginResult.region.uuid.toUpperCase();
if (!beaconData || !uuid) {
callback(beaconData, uuid);
console.log('[DOM] didRangeBeaconsInRegion: ' + JSON.stringify(pluginResult));
// required in iOS 8+
// or cordova.plugins.locationManager.requestAlwaysAuthorization()
beacons.forEach(function(beacon) {
} catch (e) {
console.log('Delegate err: ' + e);
}, false);
Inside this service function, we are able to:
  • create an array of all predefined iBeacon devices' information (UUID, proximity, name, icon file and so on).
  • create a function to search for iBeacon devices nearby and retrieve the UUID of the closest iBeacon devices.
Next, we will explain each controller function:


TopPageCtrl controls the interactions and processes in top-page.html file. In other words, it searching for nearby iBeacon devices. If the predefined iBeacon devices are in range, their proximity and rssi (received signal strength indicator) information will be updated. Otherwise, their proximity value will appear as ProximityUnknown and their rssi value will appear as -63 dBm .
Below is the JavaScript code of this function:
app.controller('TopPageCtrl', ['$scope', 'iBeaconService', function($scope, iBeaconService) {
$scope.beacons = iBeaconService.beacons;
var callback = function(deviceData, uuid)
var beacon = $scope.beacons[uuid];
beacon.rssi = deviceData.rssi;
switch (deviceData.proximity)
beacon.proximity = 'Immediate';
beacon.proximity = 'Near';
case PROX_FAR:
beacon.proximity = 'Far';
if (iBeaconService.currentBeaconUuid === null && beacon.rssi > -45) {
$scope.enterInfoPage = function(currentUuid) {
iBeaconService.currentBeaconUuid = currentUuid;
$scope.ons.navigator.on("prepop", function() {
iBeaconService.currentBeaconUuid = null;


InfoPageCtrl controls the interactions and processes in info-page.html file. This controller simply displays the UUID of the closest iBeacon device by using the UUID value passing by the iBeaconService. By closest, we mean that the proximity of the iBeacon device is Immediate. Otherwise, the info-page.html will not displayed.
Below is the JavaScript code of this function:
app.controller('InfoPageCtrl', ['$scope', 'iBeaconService', function($scope, iBeaconService) {
$scope.beacon = iBeaconService.beacons[iBeaconService.currentBeaconUuid];
$scope.beaconUuid = iBeaconService.currentBeaconUuid;