Wednesday, March 23, 2016

Registering Push IOS Notification with Telerik Appbuilder

By Hường Hana 5:00 PM , , , 1 comment

I have registered my Telerik Appbuilder (cordova) app for Push Notifications. Everything works fine, except for the fact that when the user is inside the application, he does not receive the push notification.

It works fine as long as he is on the 1 page that registers his push ie:

var registerPush = function (user, callback) {     $(".modal-loader").show();     document.addEventListener("deviceready", function () {         var el = new Everlive('m4yh8cw6ei7xxwio');          var pushSettings = {             iOS: {                 badge: true,                 sound: true,                 alert: true,                 clearBadge: true             },             notificationCallbackIOS: function (e) {                              navigator.notification.alert(e.alert, function () { }, "Alert", "Ok");             },             customParameters: {                 login: user             }          };          el.push.register(             pushSettings,             function () {                 $(".modal-loader").hide();                 callback();             }             ,             function errorCallback(error) {                 // This callback will be called any errors occurred during the device                 // registration process                 console.log("error registering push");                 console.log(data);             }         );     }, false); }

If the user is on the page that actually registers this function, then he will be alerted via the navigationCallbackIOS. but as soon as we browse to a different page via:

 location.href= nextpage.html

then the navigationCallbackIOS no longer works. What is the logic I need to implement here to have a global callback that works on every page?

2 Answers

Answers 1

If you change the page like this location.href= nextpage.html, then it's a different page, the webview is reloaded and all the code you executed on the index.html won't exist anymore.

You have two options.

  1. Switch to SPA, where you only have the index.html and you load just the contents of the nextpage.html, but don't navigate to it using the location.href
  2. Execute all the code on every .html file. If you have a pushHandler.js (example) where you init the push and register the listeners, link it on any .html so it is executed again when you change the page.

Answers 2

An AJAX request instead of a location.href change would be really better for three motivations: 1. Speed 2. No reload (don't need to reload every single resource everytime) 3. Global scope - in your case the push notification registration, don't need to be re-run every page change.

To do so you could create a element and then load into it the content of the other pages.. Take a look here for some proof of concept. It's basically all around managing an XMLHttpRequest and putting the result into a DOM element.

If You Enjoyed This, Take 5 Seconds To Share It

1 comment: