I'm working with service worker to display notification between my users. In my code I include notificationclick event. With this event I'm trying to manage two cases. First case, if in my browser the page of my site is opening, don't open it but focus on it. Second case, if my browser don't show my site, open it and focus on it. But I haven't been succed...
Here is my current code:
self.addEventListener('notificationclick', function (e) {
console.log('notification was clicked')
var notification = e.notification;
var action = e.action;
if (action === 'close') {
notification.close();
} else {
// This looks to see if the current is already open and
// focuses if it is
e.waitUntil(
self.clients.matchAll().then(function(clientList) {
console.log(clientList)
if (clientList.length > 0) {
console.log(clientList[0])
return clientList[0].focus();
}
return self.clients.openWindow('/');
})
);
};
});
self.addEventListener("notificationclick", (event) => {
event.waitUntil(async function () {
const allClients = await clients.matchAll({
includeUncontrolled: true
});
let chatClient;
let appUrl = 'xyz';
for (const client of allClients) {
//here appUrl is the application url, we are checking it application tab is open
if(client['url'].indexOf(appUrl) >= 0)
{
client.focus();
chatClient = client;
break;
}
}
if (!chatClient) {
chatClient = await clients.openWindow(appUrl);
}
}());
});
Related
I have a exam application using React. I need to run this application in IE11. In this exam app I have added the onblur event that will run when the user switches away from the tab, and when this event is triggered the user is alerted with a popup and the user's lockCount in DB is incremented. The user's exam will be blocked if the LockCount exceeds the limit defined for the exam.
The problem is that the onblur event is triggered when the page is momentarily frozen. Usually this freezing problem occurs when it takes a long time to rerender the page or call any API service. It is working without any problem in Chrome.
I also tried the onBlur event with Mouseleave event, but when the page freezes the mouseleave event also triggers.
How can I prevent the onBlur event from triggering when the page freezes in IE11?
Code for the onBlur and onFocus events:
const onFocus = () => {
setIsOnblur(false);
};
const onBlur = () => {
increaseCount();
setIsOnblur(true);
};
useEffect(() => {
if (props.location.pathname.includes("/Exam/")) {
window.addEventListener("focus", onFocus);
window.addEventListener("blur", onBlur);
return () => {
window.removeEventListener("focus", onFocus);
window.removeEventListener("blur", onBlur);
};
}
}, []);
It seems the issue is that the blur listener is sometimes firing before the page is completely loaded. We can be sure the page is fully loaded via the load event.
From MDN:
The load event is fired when the whole page has loaded, including all
dependent resources such as stylesheets and images.
I would therefore make the addEventListeners dependent on the window being fully loaded. Something like this should work:
useEffect(() => {
window.addEventListener("load", () => {
if (props.location.pathname.includes("/Exam/")) {
window.addEventListener("focus", onFocus);
window.addEventListener("blur", onBlur);
}
return () => {
window.removeEventListener("focus", onFocus);
window.removeEventListener("blur", onBlur);
};
});
}, []);
I solved the problem with this(https://stackoverflow.com/a/9502074/9938582) answer. This answer tells that you can use 3 different methods to detect that user lost focus from the webpage.
Page Visibility API
Focus/Blur Event
User Activities
In my case, I solved the problem with user's mouse activity and timeout.
First case: It works when user changes the screen completely from webpage to another page or something. Page Visibility API allows us to detect when page is hidden to the user. It doesn't catch the lost focus when the page is minimized but the page is not hidden completely. It doesn't count.
Second case: Focus-Blur events are working perfectly in normal conditions. But Internet Explorer issue misleads that.
Third case: Mouse events(mouseout,mousein,mouseover) don't work due to this issue above. But if I use all events and especially mouse events with timeout, onBlur event doesn't trigger when the page freezes.
Here is the code:
useEffect(() => {
if (props.location.pathname.includes("/Exam/")) {
var doc = document as any;
// register to the W3C Page Visibility API
var hidden: any = null;
var visibilityChange: any = null;
if (typeof doc.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof doc.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof doc.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
// } else if (typeof document.hidden !== "hidden") {
} else if (doc.hidden) {
hidden = "hidden";
visibilityChange = "visibilitychange";
}
if (hidden != null && visibilityChange != null) {
addEvent(doc, visibilityChange, function (event: any) {
if (doc[hidden]) {
onBlur();
}
});
}
// register to the potential page visibility change
addEvent(doc, "potentialvisilitychange", function (event: any) {
if (doc.potentialHidden && !doc[hidden]) {
onBlur();
}
});
var potentialPageVisibility = {
pageVisibilityChangeThreshold: 3 * 3600, // in seconds
init: function () {
var lastActionDate: any = null;
var hasFocusLocal: any = true;
var hasMouseOver: any = true;
doc.potentialHidden = false;
doc.potentiallyHiddenSince = 0;
var timeoutHandler: any = null;
function setAsNotHidden() {
var dispatchEventRequired = doc.potentialHidden;
doc.potentialHidden = false;
doc.potentiallyHiddenSince = 0;
if (dispatchEventRequired) dispatchPageVisibilityChangeEvent();
}
function initPotentiallyHiddenDetection() {
if (!hasFocusLocal) {
// the window does not has the focus => check for user activity in the window
lastActionDate = new Date();
if (timeoutHandler != null) {
clearTimeout(timeoutHandler);
}
timeoutHandler = setTimeout(checkPageVisibility, potentialPageVisibility.pageVisibilityChangeThreshold * 1000 + 100); // +100 ms to avoid rounding issues under Firefox
}
}
function dispatchPageVisibilityChangeEvent() {
var evt = doc.createEvent("Event");
evt.initEvent("potentialvisilitychange", true, true);
doc.dispatchEvent(evt);
}
function checkPageVisibility() {
var potentialHiddenDuration = (hasFocusLocal || lastActionDate == null ? 0 : Math.floor((new Date().getTime() - lastActionDate.getTime()) / 1000));
doc.potentiallyHiddenSince = potentialHiddenDuration;
if (potentialHiddenDuration >= potentialPageVisibility.pageVisibilityChangeThreshold && !doc.potentialHidden) {
// page visibility change threshold raiched => raise the even
doc.potentialHidden = true;
dispatchPageVisibilityChangeEvent();
}
}
addEvent(doc, "mousemove", function (event: any) {
lastActionDate = new Date();
});
addEvent(doc, "mouseover", function (event: any) {
hasMouseOver = true;
setAsNotHidden();
});
addEvent(doc, "mouseout", function (event: any) {
hasMouseOver = false;
initPotentiallyHiddenDetection();
});
addEvent(window, "blur", function (event: any) {
hasFocusLocal = false;
initPotentiallyHiddenDetection();
});
addEvent(window, "focus", function (event: any) {
hasFocusLocal = true;
setAsNotHidden();
});
setAsNotHidden();
}
}
potentialPageVisibility.pageVisibilityChangeThreshold = 1; // 4 seconds for testing
potentialPageVisibility.init();
}
}, []);
I've created a javascript page and when I load that page inside chrome browser I am able to start webkitSpeechRecognition. However when I call that url with CefSharp browser for winform, It does not start the webkitSpeechRecognition.
Could you please advise me what could be the possible reason?
Here is the code snippet I call on button click.
function startWebKit() {
if (window.hasOwnProperty('webkitSpeechRecognition')) {
var recognition = new window.webkitSpeechRecognition();
var recognizing = false;
recognition.onstart = function () {
recognizing = true;
};
recognition.onend = function () {
recognizing = false;
};
recognition.onerror = function (event) {
recognizing = false;
};
try {
recognition.start();
} catch (error) {
alert(error);
}
if (recognizing) {
// Do stuff
}
}
}
TIA
I am using Google Chrome Push Notification in my site.
Currently I have more than 1,00,000 subscribed users.
I'm facing this following issue.
- My users started using the notifications.
- I need to change the logic of the service-worker but could not able update it.
- I have not given any cache based installation with my previous Service-Wroker.js
- I have not used any fetch event with the previous Service-Worker.js
Changes done in new Service-Worker.js
- Landing URL (clickUrl) variable is added into the self.addEventListener function
My Existing Service-Wroker.js
'use strict';
var port;
var pushMessage;
var clickUrl;
var imgUrl;
self.addEventListener('push', function(event) {
var obj = event.data;
pushMessage = event.data ? event.data.text() : '';
var pushData = pushMessage.split('####');
clickUrl = pushData[2];
imgUrl = pushData[1];
if (port) {
port.postMessage(pushMessage);
}
event.waitUntil(self.registration.showNotification(pushData[3], {
requireInteraction: true,
body: pushData[0],
icon: pushData[1]
}));
});
self.addEventListener('notificationclick', function(event) {
if (Notification.prototype.hasOwnProperty('data')) {
event.notification.close();
event.waitUntil(clients.openWindow(clickUrl));
}
});
self.onmessage = function(e) {
port = e.ports[0];
if (pushMessage) {
port.postMessage(pushMessage);
}
};
The new / updated Service-Worker.js [Changes I need to update / implement]
'use strict';
var port;
var pushMessage;
var clickUrl;
var imgUrl;
self.addEventListener('push', function(event) {
var obj = event.data;
pushMessage = event.data ? event.data.text() : '';
var pushData = pushMessage.split('####');
clickUrl = pushData[2];
imgUrl = pushData[1];
if (port) {
port.postMessage(pushMessage);
}
event.waitUntil(self.registration.showNotification(pushData[3], {
requireInteraction: true,
body: pushData[0],
icon: pushData[1],
data:{
url : clickUrl
}
}));
});
self.addEventListener('notificationclick', function(event) {
var landingUrl = event.notification.data.url;
if (Notification.prototype.hasOwnProperty('data')) {
event.notification.close();
event.waitUntil(clients.openWindow(landingUrl));
}
});
self.onmessage = function(e) {
port = e.ports[0];
if (pushMessage) {
port.postMessage(pushMessage);
}
};
self.addEventListener('install', function(event) {
console.log('[ServiceWorker] Installed version', version);
event.waitUntil(
caches.open('my-cache').then(function(cache) {
// Important to `return` the promise here to have `skipWaiting()`
// fire after the cache has been updated.
return cache.addAll([/* file1.jpg, file2.png, ... */]);
}).then(function() {
// `skipWaiting()` forces the waiting ServiceWorker to become the
// active ServiceWorker, triggering the `onactivate` event.
// Together with `Clients.claim()` this allows a worker to take effect
// immediately in the client(s).
return self.skipWaiting();
})
);
});
// Activate event
// Be sure to call self.clients.claim()
self.addEventListener('activate', function(event) {
// `claim()` sets this worker as the active worker for all clients that
// match the workers scope and triggers an `oncontrollerchange` event for
// the clients.
return self.clients.claim();
});
An update is triggered:
On navigation to an in-scope page.
On functional events such as push and sync, unless there's been an update check within the previous 24 hours.
On calling .register() only if the service worker URL has changed.
more here https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle
I want to use HTML5 notifications which work great.
The problem is that they never disappear.
How can I set a delay after which the HTML5 notification disappear?
You can just call the .close() method:
var n = new Notification("Hello");
setTimeout(n.close.bind(n), 2000);
See here on MDN for details.
The notification should have a built in close button, no?
HTML
Notify me!
JS
<script>
var Notification = window.Notification || window.mozNotification || window.webkitNotification;
Notification.requestPermission(function (permission) {
// console.log(permission);
});
function show() {
var instance = new Notification(
"Hey", {
body: "this is a message"
}
);
instance.onclick = function () {
// Something to do
};
instance.onerror = function () {
// Something to do
};
instance.onshow = function () {
// Something to do
};
instance.onclose = function () {
// Something to do
};
return false;
}
</script>
I use pjax to ajaxify my menu links. This works fine until I use the browser back button. In my javascript file I use Common Script files (to load all the necessary js files when the user hits the url) and Script files with respect to each menu links (when navigated through pjax)
function myFunction(){
/*All the script files */
}
$(document).ready(function(){
myFunction();
/*pjax menu loading block*/
$(document).on('click', 'a[data-pjax]', function(event) {
$.pjax.click(event, '#pjax-container');
$(document).on('pjax:end', function() {
myFunction();
});
});
});
Now when I navigate to a menu item and try to come back by clicking the browser back button, the script files are getting duplicated (eg: slider images getting duplicated and table sorting not working).How to overcome this issue?
You can implement the url specific loading this way, create a queue of functions which you want to load and unload on pjax complete
The solution is based on js prototyping
// create queue for load and unload
var onLoad = new PjaxExecQueue();
var onUnload = new PjaxExecQueue();
// way to add functions to queue to run on pjax load
onLoad.queue(function() {
someFunction();
});
// way to add functions to queue to unload on pjax load
onUnload.queue(function() {
someOtherFunction();
});
// load function if url contain particular path name
onLoad.queue_for_url(function_name, 'url_section');
// check for url specific function
var URLPjaxQueueElement = function(exec_function, url) {
this.method = exec_function;
if(url) {
this.url = new RegExp(url);
} else {
this.url = /.*/;
}
};
// create a queue object
var PjaxExecQueue = function () {
this.url_exec_queue = [];
this.id_exec_queue = [];
this.fired = false;
this.indicating_loading = false;
this.content = $('#content');
};
PjaxExecQueue.prototype = {
queue: function (exec_function) {
this.url_exec_queue.unshift(new URLPjaxQueueElement(exec_function));
},
queue_for_url: function (exec_function, url_pattern) {
this.url_exec_queue.unshift(new URLPjaxQueueElement(exec_function, url_pattern));
},
queue_if_id_present: function(exec_function, id) {
this.id_exec_queue.unshift(new IDPjaxQueueElement(exec_function, id));
},
fire: function () {
if(this.indicating_loading) {
this.content.removeClass("indicate-loading");
this.indicating_loading = false;
}
if(!this.fired) {
var match_loc = window.location.pathname;
var i = this.url_exec_queue.length;
while(i--) {
this.url_exec_queue[i].fire(match_loc);
}
i = this.id_exec_queue.length;
while(i--) {
this.id_exec_queue[i].fire(match_loc);
}
}
this.fired = true;
},
reset: function() {
this.fired = false;
},
loading: function () {
this.content.addClass("indicate-loading");
this.indicating_loading = true;
this.reset();
},
count: function () {
return exec_queue.length;
},
show: function (for_url) {
for (var i=0; i < exec_queue.length; i++) {
if(for_url) {
if(exec_queue[i].url.test(for_url)) {
console.log("" + exec_queue[i].method);
}
} else{
console.log(exec_queue[i].url + " : " + exec_queue[i].method);
}
}
}
};
// before send
$(document).on('pjax:beforeSend', function() {
onLoad.loading();
onUnload.fire();
});
// after pjax complete
$(document).on('pjax:complete', function() {
onLoad.fire();
onUnload.reset();
});