We Keep Coding

Showing notification only once after every refresh

what i wanted to do is only show the notification after the notification allowed.
what i have right now is, every after refresh on page it is always showing the notifications
this is my javascript
function notifyMe() {
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check whether notification permissions have already been granted
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification('{!! $myname->body !!}');
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://localhost:8000/spektra/spektra-memberikan-aneka-tawaran-di-jakarta-fair-kemayoran-2018', '_blank');
}
}
// Otherwise, we need to ask the user for permission
else if (Notification.permission !== "denied") {
Notification.requestPermission().then(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification('{!! $myname->body !!}');
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://localhost:8000/spektra/spektra-memberikan-aneka-tawaran-di-jakarta-fair-kemayoran-2018', '_blank');
}
}
});
}
}
what should i do to make the notification only once, even after refresh.

You have to track if the user has already seen the notification and, if so, skip the rest of your notifyMe function. For example, you could store the information in localStorage.
function notifyMe() {
function AutoRefresh(t) {
// passing strings to setTimeout makes me shiver
// too many years of avoiding eval and stuff i guess :)
setTimeout(function () { location.reload(true); }, t);
}
if (localStorage.getItem('userHasSeenNotification')) {
return; // early return, exits the function
}
if (!('Notification' in window)) {
alert('Notifications ... ');
return; // early return, lets us get rid of the "else"
}
// Let's check whether notification permissions have already been granted
if (Notification.permission === "granted") {
// save seen state
localStorage.setItem('userHasSeenNotification', 1);
// If it's okay let's create a notification
var notification = new Notification('{!! $myname->body !!}');
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://localhost:8000/spektra/spektra-memberikan-aneka-tawaran-di-jakarta-fair-kemayoran-2018', '_blank');
};
return; // ... again ...
}
// Otherwise, we need to ask the user for permission
if (Notification.permission !== "denied") {
// save seen state
localStorage.setItem('userHasSeenNotification', 1);
Notification.requestPermission().then(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification('{!! $myname->body !!}');
notification.onclick = function(event) {
event.preventDefault(); // prevent the browser from focusing the Notification's tab
window.open('http://localhost:8000/spektra/spektra-memberikan-aneka-tawaran-di-jakarta-fair-kemayoran-2018', '_blank');
};
}
});
}
}
}
Hint: You might want to move that last localStorage.setItem call into the callback passed to .then(function (permission) { ... }).

firefox addon: quit-application observer not working

I've been trying to use observers for a while now, but it seems like I cannot get them to work. I put the observe function in different modules of my extension, and also different parts of my code. Registering it from everywhere but it seems like every way that I tried was just a deadened. I can't get it to work. My goal is to listen for when a user exits from Firefox so I can clear preferences objects of my addon. As of now my observer is in bootstrap.js, and this is how I implemented it. I implemented my observe function this way because it was mentioned in this stackoverflow post that this is the right way to observe for quit-application notification. On a side note observers registered gets printed in console log but "oh observing" doesn't.
function myObserver()
{
this.register();
}
myObserver.prototype = {
observe: function(subject, topic, data) {
console.log("oh observing!!");
if (topic == "app-startup" || topic == "profile-after-change") {
var observerService = Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.addObserver(this, "quit-application", false);
}
else if (topic == "quit-application-requested" || topic == "quit-application")
{
console.log("browser closing");
alert('hello');
myextension.Utils.prefService.clearUserPref("questionType");
myextension.Utils.prefService.clearUserPref("clickThrough");
this.unregister();
}
},
register: function() {
var observerService = Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.addObserver(this, "quit-application-requested",false);
observerService.addObserver(this, "quit-application",false);
observerService.addObserver(this, "app-startup", false);
observerService.addObserver(this, "profile-after-change", false);
console.log("observers registered");
},
unregister: function() {
var observerService = Components.classes["#mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.removeObserver(this, "quit-application-requested");
console.log("unregistering obs");
}
}
This is my startup function:
function startup(data, reason) {
Components.utils.import("chrome://ext/content/commons.jsm");
let wm = Cc["#mozilla.org/appshell/window-mediator;1"].
getService(Ci.nsIWindowMediator);
let windows = wm.getEnumerator("navigator:browser");
while (windows.hasMoreElements()) {
let domWindow = windows.getNext().QueryInterface(Ci.nsIDOMWindow);
WindowListener.setupBrowserUI(domWindow);
}
// Wait for any new browser windows to open
wm.addListener(WindowListener);
}
and this is my setupBrowserUI function in which I register the observer:
setupBrowserUI: function(domWindow) {
extension.onLoad(domWindow.gBrowser);
observer = new myObserver();
}

The easy way:
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm
let observer = {
observe: function() {
dump("oh observing")
}
};
function startup(data, reason)
{
Services.obs.addObserver(observer, "*", false);
observer.observe();
}
My suggest is create a log file with the preferences; to output dump calls instead to a file, set browser.dom.window.dump.file to the file destination where the log should be created and restart the application.
https://developer.mozilla.org/en-US/docs/Mozilla/Preferences/Preference_reference/browser.dom.window.dump.file

Can’t get push notifications in Android to work using ngCordova

I'm having a tough time getting push notifications (using the ngCordova plugin) to work. I have followed their sample code exactly as is documented on the site: http://ngcordova.com/docs/plugins/pushNotifications/
(the only difference is that I don't have a deviceready listener, instead, my code is inside the ionicPlatform.ready listener.)
Here is my code:
angular.module('myApp', ['ionic', 'ngCordova'])
.run(function($ionicPlatform, $rootScope, $state, $cordovaPush) {
$ionicPlatform.ready(function() {
var config = {
"senderID": "myID100001000"
};
$cordovaPush.register(config).then(function(result) {
alert(result);
}, function(err) {
alert(err);
})
});
$rootScope.$on('$cordovaPush:notificationReceived', function(event, notification) {
switch(notification.event) {
case 'registered':
if (notification.regid.length > 0 ) {
alert('registration ID = ' + notification.regid);
}
break;
default:
alert('An unknown GCM event has occurred');
break;
}
});
})
When my app starts I do get the "OK" alert, so I know it successfully goes through the $cordovaPush.register call. However, I was expecting to get a "registered" notification event, right after, but I never get notified.
Any help would be appreciated.

The solution is in the comments but this needs a proper answer.
First of all, the register callback always returns OK as long as you pass a senderID, but if the $cordovaPush:notificationReceived event is never called (it may take a few seconds), this ID is probably wrong.
You must use the Project Number, not the Project ID.
To get the number, go to the API Console, select the project and you'll be on the Overview page. On top of this page, you'll see something like this:
Project ID: your-project-id Project Number: 0123456789
Just copy and use the project number and everything should work.

I have suffered with this a lot and I have found out, that there are in fact two versions of the cordova push plugin currently:
https://github.com/phonegap-build/PushPlugin (deprecated)
https://github.com/phonegap/phonegap-plugin-push (new one)
Both are supported by ngCordova, but only the deprecated version is documented.
The deprecated version is $cordovaPush
and the newer one is $cordovaPushV5, and they have completely different methods.
For me the problem was that I downloaded the cordova-plugin-push and tried to implement it with the old documentation on ngCordova site.
The code is:
/*
* Non deprecated version of Push notification events
*/
function registerV5() {
$ionicLoading.show({
template: '<ion-spinner></ion-spinner>'
});
if (ionic.Platform.is('browser')) {
alert("You are running on broswer, please switch to your device. Otherwise you won't get notifications");
$ionicLoading.hide();
return;
}
/**
* Configuration doc:
* https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/API.md#pushnotificationinitoptions
*/
var GCM_PROJECT_ID = 'xxxxxx';
$cordovaPushV5.initialize({
"android": {
"clearNotifications": false,
"senderID" : GCM_PROJECT_ID
}
});
$cordovaPushV5.register().then(function (deviceToken) {
console.log("Successfully registered", deviceToken);
$scope.data.deviceToken = deviceToken;
// Below code required to configure $cordovaPushV5 notifications emitter.
// Don't pass function it's not handler.
$cordovaPushV5.onNotification();
$cordovaPushV5.onError();
$ionicLoading.hide();
}, function (error) {
console.log("Failed to registered");
console.log("error object : ", error);
$ionicLoading.hide();
});
}
$rootScope.$on('$cordovaPushV5:notificationReceived', function(event, data) {
console.log("notification received");
console.log("data object: ", data);
var foreground = data.additionalData.foreground || false;
var threadID = data.additionalData.payload.threadID || '';
var group = data.additionalData.payload.group || false;
if (foreground) {
// Do something if the app is in foreground while receiving to push - handle in app push handling
console.log('Receive notification in foreground');
} else {
// Handle push messages while app is in background or not started
console.log('Receive notification in background');
// Open FB messanger app when user clicks notification UI when app is in background.
if (typeof data.additionalData.coldstart != "undefined" && data.additionalData.coldstart == false)
if (!group)
// Open FB Messenger of specific user chat window
window.open('fb-messenger://user/' + threadID, '_system', 'location=no');
else
// Open FB Messenger of specific group chat window
window.open('fb-messenger://groupthreadfbid/' + threadID, '_system', 'location=no');
}
});
$rootScope.$on('$cordovaPushV5:errorOccurred', function(event, error) {
console.log("notification error occured");
console.log("event object: ", event);
console.log("error object: ", error);
});
More on this github article: https://github.com/driftyco/ng-cordova/issues/1125 (code from here) and in this article: https://github.com/yafraorg/yafra/wiki/Blog-Ionic-PushV5

Disable button if geolocation is unavaliable

So i've got a main page where there's 3 buttons - login, register and recover account. I want to disable all those buttons and display a message when geolocation is unavaliable or the user has not allowed the browser to share it's location.
$scope.btnDisabled = false;
$scope.errorMsg = null;
$scope.checkBrowser = function () {
if (navigator.geolocation.getCurrentPosition) {
// let's find out where you are!
console.log("Got your location");
$scope.btnDisabled = false;
} else {
$scope.errorMsg = "Warning. Could not locate your position. Please enable your GPS device.";
//disable the buttons
$scope.btnDisabled = true;
//Show errorMessage
return true
}
//errorMessage visibility is set false
return false;
}
So far i haven't managed to disable the buttons or show errorMessage(except for an alert message).
This is how i got the alert message:
function getPosition() {
console.group("geoloc getPosition");
if (window.navigator) {
console.log("api supported");
navigator.geolocation.getCurrentPosition(success, error);
} else {
console.log("api fallback");
}
console.groupEnd();
}
function success(pos) {
console.log("geoloc pos ", pos);
}
function error(err) {
alert("Geolocation identification failed.");
$scope.btnDisabled = true;
}
Why doesn't the $scope.btnDisable work in error() function?

You should use
navigator.geolocation.getCurrentPosition(
function() {
$scope.btnDisabled=false;
$scope.$apply();
}, function() {
$scope.btnDisabled=true;
$scope.$apply();
}
});
It is verry important to know, that getCurrentPosition will call a callback instead of returning something! See https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.getCurrentPosition
You've also to call $scope.$apply() as you'll disable any angular updates while processing non angular callbacks!
Do so in your 2nd example and the button state should get updated

jQuery mobile pageshow event not firing on first $.mobile.changePage()

I'm writing a phonegap/jquery mobile app and have an issue I cant seem to solve.
When the app loads (device ready and jqm_mobile_init) fire and the app creates/opens a database and checks if a user is signed in (just a flag in the db). If so the app calls $.mobile.changePage("#home", {transition:"none"}); to redirect them to the "home" page.
Then on the "home" page pageshow event I grab a load of info from the db and append it to a listview within the home page.
However, the first time this runs (with the $.mobile.changePage event) the pageshow event isn't trigged (so none of my data gets appended to the listview). If I navigate around the app and then visit the page the data shows fine. This only happens when using $.mobile.changePage to change to the home page.
How can I make pageshow() fire on $.mobile.changePage? or is there another way to do it?
Heres my code:
/************************************************
Try to create/open the DB, if not catch the error
***********************************************/
try {
if (!window.openDatabase) {
alert('not supported');
} else {
var shortName = 'test';
var version = '1.0';
var displayName = 'test Database';
var maxSize = 200000; // in bytes
// database instance in db.
var db = openDatabase(shortName, version, displayName, maxSize);
// Create tables
createTables(db);
// Check if there is a signedin user
isUserSignedInQuery(db);
}
} catch(e) {
// Error handling code goes here.
if (e == 2) {
// Version number mismatch.
alert("Invalid database version.");
} else {
alert("Unknown error "+e+".");
}
return;
}
// Universal null/blank data handler
function nullDataHandler(transaction, results) { }
// Universal error callback
function errorHandler(error) {
//alert("Error processing SQL: " +error.message+ " Error Code: " +error.code);
}
// Create tables if dont already exist
function createTables(db) {
db.transaction(
function (transaction) {
// create tables
}
);
}
/**********************************************************************************************
Check if there is a signed in user, if so redirect to listings page, if not display login page
**********************************************************************************************/
function isUserSignedInQuery(db) {
db.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM USERS WHERE signedIn=1;",
[], // array of values for the ? placeholders
isUserSignedInDataHandler, errorHandler);
}
);
}
function isUserSignedInDataHandler(transaction, results) {
// Handle the results
if (results.rows.length > 0) {
//console.log("someones logged in!");
// Assign signed in user to global var
console.log("logged in user = " + results.rows.item(0).id);
window.currentSignedInUserId = results.rows.item(0).id;
$.mobile.changePage( "#home", { transition: "none"} );
} else {
$.mobile.changePage( "#login", { transition: "none"} );
}
}
/**********************************************************************************************
Sign in page:
**********************************************************************************************/
function doesSigningInUserAlreadyExistQuery(db) {
db.transaction(
function (transaction) {
transaction.executeSql("SELECT * FROM USERS WHERE username='"+usernameValue+"' ORDER BY id LIMIT 0,1;",
[], // array of values for the ? placeholders
doesSigningInUserAlreadyExistDataHandler, errorHandler);
}
);
}
function doesSigningInUserAlreadyExistDataHandler(transaction, results) {
// User exists, sign them in.
if (results.rows.length > 0) {
//console.log("user exists");
// Find number of rows
var len = results.rows.length;
//console.log(len);
for (var i=0; i<len; i++){
//console.log(results.rows.item(i));
db.transaction(
function (transaction) {
transaction.executeSql('UPDATE USERS SET signedIn = 1 WHERE username="'+usernameValue+'"');
}
);
// Assign signed in user to global var
window.currentSignedInUserId = results.rows.item(0).id;
// Redirect to home/listings page
$.mobile.changePage( "#home", { transition: "slidefade"} );
}
// User is new, create them and sign them in
} else {
db.transaction(
function (transaction) {
transaction.executeSql('INSERT INTO USERS (username, password, userId, defaultHandler, autoSync, updateCaseTypes'
+', updateHistorical, updateFavorite, signedIn) '
+'VALUES ("'+usernameValue+'", "eclipse", "userid321", "Another User", 1, 1, 1, 1, 1);', [],
function (transaction, resultSet) {
if (!resultSet.rowsAffected) {
// Previous insert failed.
alert('No rows affected!');
return false;
}
alert('insert ID was '+resultSet.insertId);
//Assign signed in user to global var
window.currentSignedInUserId = resultSet.insertId;
});
}
);
// Redirect to home/listings page
$.mobile.changePage( "#home", {
reloadPage: true,
transition: "slidefade"} );
}
}
$('#login').live('pageshow', function(event) {
console.log(window.currentSignedInUserId); // This is empty - global var not working
// Should this be tap??????? Find out. -----------
$('a#signIn').click(function() {
// Get values of all fields & buld vars
var username = $('#login-username');
var password = $('#login-password');
// Check if fields are empty
if( !username.val() ) {
username.addClass('empty');
$('label.login-username').addClass('blank');
}
if( !password.val() ) {
password.addClass('empty');
$('label.login-password').addClass('blank');
}
// If both not empty, check if user exists, if so sql update if not sql insert
if (username.val() && password.val()) {
// Get username
usernameValue = username.val();
// Run function
doesSigningInUserAlreadyExistQuery(db);
}
});
});
$('#home').live('pageshow', function(event) {
console.log("Page show fired on recordings page");
db.transaction(getRecordingsQuery, getRecordingsDataHandler, errorHandler);
// get stuff, loop through it and append
// Refresh the list to add JQM styles etc
$('#recordings-list').listview('refresh');
}
});

I've managed to resolve it, its not really a proper fix but it works at the expense of a screen flicker whilst the screen refreshes.
If it helps anyone, I added allowSamePageTransitions: true which solved the issue (at the expense of a flicker).

You should be using on() instead of live(). live() has been deprecated.
Have you tried putting it in the beforepageshow instead of pageshow? It seems like a better place to put data gathering/dynamic page element generation.