We Keep Coding

Angular - Service worker : How to get dynamic ID from route into the "Notificationclick" event?

I have put some push notifications in my code, in order to someone to be notified when an action is made. I made the back end with lib.net.webpush 3.1.0 with .net 4.5.2 in C#.
So far, the notification system is working very well, but there is something I can't succeed :
Within my service worker file (sw.js), using Angular 9, i want, when someone received the notification, that when a user click on it, he is redirect to the page from which it was sent.
first i made it like it (as i read in the doc):
self.addEventListener('notificationclick', function (event) {
const urlToOpen = new URL(event.notification.data, self.location.origin).href;
event.notification.close();
event.waitUntil(clients.openWindow(urlToOpen));
});
But i was always redirect to the "localhost://4200" and not to the complete url.
In order to test, i made this :
self.addEventListener('notificationclick', function (event) {
const urlToOpen = new URL(self.location.origin + "/#/rdc/rapports/2015");
event.notification.close();
event.waitUntil(clients.openWindow(urlToOpen));
});
and it worked. But i can't get the dynamic URL.
Does anyone knows how to get a dynamic URL within this file? Or how to be redirect to the page that sent the notification?
I also tried something like this here : notificationclick event service worker
But i really dont understand.
Thanks.

I just succeed in doing it.
So, for anyone in the same case as I was : within the service worker, you can't access the DOM, i wasn't able to get any ID or any path I was trying to aim in my code.
The solution was to, in my C# code, to add a "URL" property and parameter to my "SendNotification" funtion. Then, when i got a user, i can target his ID because it's already here.
Then, in my Angular code (within the service worker file), I just had to to this (i am storing my url in "data" here) :
self.addEventListener('notificationclick', function (event) { console.log("notif click event", event);
const urlToOpen = new URL(self.location.origin + event.notification.data);
event.notification.close();
event.waitUntil(clients.openWindow(urlToOpen)); });
An then, when i click on the notification, I am redirected to the desired URL.

Can I save input data from popup.html in localStorage?

I am working on pretty simple extension. My popup.html has some radiobuttons, which represent set of predefined options for user. The problem is that logic of my content-script depends upon those options.
So, my question is:
let us assume I would attach a script to 'popup.html' (meeting Chrome CSP) that listens to any change in my radiobuttons selection and as soon as it happens does someting like .localstorage.setItem(key, value)? Would my content-script be able to get this value from local storage at appropriate moment?

Naturally, you can do that. Here two examples:
chrome.storage.local.set({'value': theValue}, function() {
// Notify that we saved.
message('Settings saved');
});
chrome.storage.local.get('value', function(obj) {
//Notify that we get the value.
message('Value is ' + obj.value);
});
Or you can use the sync storage:
chrome.storage.sync.set({'value': theValue}, function() {
// Notify that we saved.
message('Settings saved');
});
chrome.storage.sync.get('value', function(obj) {
//Notify that we get the value.
message('Value is ' + obj.value);
});
Here is the documentation.
The difference between chrome.storage and window.localStorage, is that you can use window.localStorage on every recent browser. Also on websites. The stored objects will be stored until the user close the browser.
You are building a Chrome extension, so I would recommend you to use the API that was make for that.

How to emit an AngularJS event from a popup?

Scenario: I have an AngularJS app that uses Google's auth.
Depends on the resource, when Angular calls (my) backend, it can return a response asking for Oauth token.
In this case, Angular will show a popup (not a Bootstrap's modal dialog) with that redirect URL.
Google will authenticated, ask for permission, and send the user back to me.
There is a callback URL that will process the 'code' and get the real token. This callbak URL will be called inside that popup.
When I get the token, the popup should close itself, and notify Angular to try that last request again (now I have the token in user's session)
Problem: how can a popup emit an Angular event?
Actually, it doesn't need to be that $rootScope.$emit, but just a way to notify Angular.
I saw this option, but it doesn't seem good for Angular :(

you can use localStorage events, take a look at this demo: http://html5demos.com/storage-events
// this should be in the main page
$window.addEventListener('storage', function(event) {
if(event.key === 'login-notification') {
// got it!
// you can get the value from
// the notification with "event.newValue"
}
}, false);
// send the event with just a setItem from the popup
$window.localStorage.setItem('login-notification', 'ayy');

Create a service first.
app.service("servicee", function(){
return {
set : function(k,v){
this[k] = v;
},
get : function (k){
return this[k]
}
}
});
Now in the popup you can set the token in the service, now you have the value available throught out the app. Also you can $watch the specific key in the service and take some action when the value is set.

Removing someone from a user hash on navigating away from a page / page close

I'm building a Node.js / Socket.io project.
I have a hash of Users based on their websocket id. When a user makes the following request i'd like to add them to a group of users viewing that page.
app.get('/board/:id', function(req, res){}
I'd like to keep something like
Browsing = {
username : id,
username : id,
...
}
However i'm unsure how to remove a user lets say if they navigate off the page. Is there some kind of function that gets called upon page leave?
Partial Solution:The following seems to do the trick on Chrome:
$(window).unload(function(){
var username = $('#username').text();
var pid = currentProject;
var data = {
username: username,
id : pid
}
socket.emit('leaving-page', data);
})

... Is there some kind of function that gets called upon page
leave? ...
Yes, but it is not reliable.
The way the people keep track of who is online and who isn't, is usually like this:
Add the time when the user last refreshed/visited a page
set a limit to you consider them offline

You could intercept the event which corresponds to leaving a page. There are several ways to do it, have a look at the following links and let me know if any suits your needs and if I can answer any more explicit questions about them:
Intercept page exit event
Best way to detect when a user leaves a web page?
jquery unload
with the last link you could do something like this:
$(window).unload(function() {
//remove the user from your json object with delete json_object[key];
});
Hope this helps.

Since you're using Socket.io, the server will know when the user has left the page because the socket will be disconnected. Simply listen for the disconnect event.
io.sockets.on('connection', function (socket) {
...
socket.on('disconnect', function () {
// The user on `socket` has closed the page
});
});
Better yet, take advantage of namespaces and let Socket.io handle all of the connection/disconnection (it's doing it anyway -- no need to duplicate effort).
On the client,
socket = io.connect('http://example.com/pagename');
pagename need not point to a valid URL on your domain – it's just the namespace you'll use in the server code:
io.sockets.clients('pagename')
Gets you all of the clients currently connected to the pagename namespace.

Facebook auth.sessionChange event and page changes

I am creating a Facebook Canvas application, and I am following more or less the demo app.
As in the demo, I can get the user data from the signed_request which is POSTed to my site on the first page load. Moreover, as suggested in the demo, I use the following snippet to reload the page on user changes:
var Config;
function facebookInit(config) {
Config = config;
FB.init({...});
FB.Event.subscribe('auth.sessionChange', handleSessionChange);
...
}
function handleSessionChange(response) {
if ((Config.userIdOnServer && !response.session) ||
Config.userIdOnServer != response.session.uid) {
goHome();
}
}
function goHome() {
top.location = 'http://apps.facebook.com/' + Config.canvasName + '/';
}
Here Config is an object which is populated with info from the server.
The problem appears when the user navigates the application using a link. If I use AJAX, the page is not actually reloaded and everything works fine. But if I use a standard link, the user comes to another page of my application with a standard GET request. In this case, I do not know how to get the info about the user, so Config.userIdOnServer is undefined and a page reload is triggered.
Of course I can avoid this by removing the call to handleSessionChange, or by making a one-page app with only AJAX links, but I feel I am missing something basic about the Facebook flow.

My fault, I had problems in retrieving the cookie with the user identity for subsequent requests.