Faire apparaître des notification JS à dates et heure précise ? Fermé

Question

Bonjour/bonsoir à tous :-)

Je souhaiterai crée un système de notifications web basique qui permettrai de prévenir un utilisateur d' événements précis et régulier (dans le cadre d'un site d'une radio, pour prévenir de la présence d'une émission en direct, donc hebdomadaire) et également souhaitez la bienvenue, toujours avec les notifications, aux nouveaux arrivants.

Mais j'ai très peu de connaissance en JS et mes recherches ne m'ont rien donner, donc je m'adresse à vous :D

Voici le code basique d'une notification web, je l'ai testé, il fonctionne sur mon site :
if (window.Notification && Notification.permission === "granted") {
  var notif = new Notification('test', {body: 'hello world! ', icon : 'monimage.png'});
}

Le premier est pour demander l'autorisation d'affichage des notifications, le second pour en afficher une simple. Pour le contenu c'est ce qu'il me faut,  pas besoin que j'aille chercher plus loin.

Plusieurs soucis :

1. La notification s'affiche à chaque rechargement de page ( tout à fait normal, mais je ne sais pas comment y parer ).

2.La notification reste indéfiniment si l'utilisateur ne clique pas sur la "croix", ce que je ne veux pas, il faudrait qu'elle disparaissent au bout de 10 sec par exemple.

3.Je n'ai pas le choix du moment d'apparitions de la notification ( j'aimerai pouvoir choisir la date et l'heure à laquelle elle s'affiche).

4.J'aimerai une notification dit "welcome" qui n’apparaît que lors de la première visite du client.

Si quelqu'un à une solution ça m’aiderait beaucoup.

Merci d'avoir lu :p

Utilisateur anonyme · Answer

Alors le premier problème est difficile à résoudre juste en JS, car le JS n'a pas de SESSION comme en PHP, tu peux à la limite enregistrer un cookie après avoir exécuter une fois la notification, donc à chaque fois vérifier que le cookie existe, et si oui on exécute pas le script, mais le problème c'est que si tu met un temps assez long, il se peut que l'utilisateur quitte le site et revient donc il verra pas pas la notif, et si c'est trop court il peut l'avoir à un rechargement.

Enfin à ta place je ferai ainsi:

 Je vérifie que le cookie existe
 Si non, je lance la notif et créé le cookie, et le laisse pendant 30 minutes avant la destruction.
 Si oui je met à jour la date du cookie (donc +30minutes par rapport à l'heure actuel)

Après les 30 minutes c'est arbitraire, par exemple une SESSION en PHP est active pendant 2heuires environ.

Après la mise à jour du cookie doit se faire sur chaque page car si l'utilisateur reste plus de 30 mins sur autres pages, et qu'il revient sur l’accueil il aura la notif.

Ici tu as la doc du Cookie en JS: 

https://www.w3schools.com/JS/js_cookies.asp

Pour ta deuxième question, tu peux mettre un setTimeout

Comme ceci:

if (window.Notification && Notification.permission === "granted") {  var notif = new Notification('test', {body: 'hello world! ', icon : 'monimage.png'});setTimeout(notif.close.bind(notif), 1000);}

Donc là elle se fermera après une seconde, donc pour ça il faut mettre 5000 au lieu de 1000.

Après normalement elles se ferment seules après 30 secondes. 

Pour la question 3, alors là déjà pour voir la notif, il faut que la personne soit sur ton site, après Facebook, arrive à afficher des notifs même sans être sur leur site, mais ça je vois pas comment faire, mais dans tout les cas il faut au moins le navigateur d'afficher.

Ensuite soit tu calcules la différence et donc fait un setTimeout avec la fonction qui affiche la notif en premier paramètre, et l'intervalle de temps en milliseconde pour le second paramètre, soit tu fait un setInterval d'une seconde avec dedans une condition qui vérifie que l'heure actuel c'est l'heure que tu veux, et que ça lance la fonction dans ce cas.

Après pour la 4 c'est comme la 1.

maka54 · Answer

Bonjour,

ZeNairolf,
La notion de Session existe en Javascript, elle est appelée sessionStorage: https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage

PI3RR1CK, 
je t'invite à regarder cet article qui te permettra de stocker des informations coté client.

le point 4: tu peux stocker l'info comme quoi l'utilisateur a déjà consulté ton site ou non et lui afficher le message de bienvenu le cas échéant.

le point 1: de la même manière, tu peux stocker l'information si l'utilisateur a déjà affiché la notification courante en ajoutant un statut display

le point 3: la meilleure solution pour te permettre d'afficher une notification en temps réel est d'utiliser webSocket : https://developer.mozilla.org/fr/docs/Web/API/WebSockets_API

Faire apparaître des notification JS à dates et heure précise ?

2 réponses

Discussions similaires