Préface : Pour un développeur front-end, je fais toujours attention à certaines fonctionnalités inédites lorsque je navigue sur le web. Pour moi, qui utilise toujours Teambition au travail, je reçois toujours des notifications... Alors aujourd'hui je vais étudier cette fonction H5...
1. Instanciez une notification let n = new Notification( Ceci est un message de notification, // Ceci est le titre requis et le titre de la notification qui sera affiché { icon: xxx.png, // Cette icône est utilisée pour afficher l'image de gauche dans le corps de la notification : Bonjour, je m'appelle xxx, // Les caractères du contenu dans le répertoire de notification : auto, // La valeur de direction du texte comprend : auto (automatique), ltr (de gauche à droite), rtl (de droite à gauche) tag : gxlself / / Donner avec un identifiant pour ce message de notification, Utilisé pour actualiser, supprimer, remplacer et d'autres opérations sur ce message de notification // long : en-US //Le champ lang doit faire référence à https://tools.ietf.org/html/bcp47 Ce n'est pas nécessaire et l'a fait. aucun effet .. // ... // Voir les propriétés d'instance ci-dessous pour d'autres propriétés facultatives}) Accédez aux propriétés de l'instance correspondante :n.actions // Un tableau en lecture seule d'objets NotificationAction. Chaque objet décrit une action unique que l'utilisateur peut sélectionner dans une notification.
n.image // URL de l'image affichée dans le cadre de la notification
n.badge // L'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
n.permission // Il existe trois valeurs : granted , denied ou default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝
n.renotify // Valeur booléenne. S'il faut remplacer la notification précédente lorsqu'une nouvelle apparaît. Si la valeur est true, cela signifie un remplacement, ce qui signifie qu'une seule notification de la marque actuelle apparaîtra. Remarquez le balisage actuel ici ? C'est vrai, pour que le true paramètre fonctionne, tag必须définir la valeur de l'attribut.
n.requireInteraction // Valeur booléenne, indique si la notification reste active jusqu'à ce que l'utilisateur clique ou annule la notification au lieu de se fermer automatiquement.
n.silent // Valeur booléenne. Indique s'il doit y avoir un son lorsque la notification apparaît. La valeur par défaut false , ce qui signifie silencieux.
n.timestamp //L'heure à laquelle la notification est créée ou peut être utilisée.
n.data // Tout type de données associé à la notification.
n.vibrate // Lorsque la notification est affichée, le mode de vibration requis par le matériel de vibration de l'appareil. Le mode dit de vibration fait référence à un tableau décrivant le temps d'alternance, qui représente respectivement le nombre de millisecondes de vibration et de non-vibration, et continue d'alterner. Par exemple, [200, 100, 200] signifie que l'appareil vibre pendant 200 millisecondes, puis s'arrête pendant 100 millisecondes, puis vibre pendant 200 millisecondes. (version mobile)
n.sound // Chaîne. Adresse audio. Indique la notification de la présence d'une ressource sonore à jouer.
n.sticky // L'adsorption des notifications n'est pas facile à effacer... (version mobile)
n.noscreen // Valeur booléenne. S'il faut arrêter d'afficher les informations de notification à l'écran. La valeur par défaut est false , ce qui signifie que le contenu de la notification doit être affiché à l'écran. (version mobile)
1> événement de clic de l'utilisateur onclick sur les informations de notification
2> événement onshow déclenché après l'affichage du message de notification
3> onerror est un événement qui sera déclenché lorsqu'une erreur est rencontrée.
4> Gestion de l'événement de fermeture onclose
2. Quelles propriétés/méthodes l'objet Notification possède-t-il ? Utilisez la sortie de l'objet window dans la console pour l'ouvrir et l'afficher :Il est à noter que la méthode requestPermission() n'est valide que dans l'objet Notification, pas dans l'objet instance !!! Cette méthode est utilisée pour demander à l'utilisateur l'autorisation d'afficher des notifications et ne peut être appelée activement que par l'utilisateur ( il peut être appelé dans la page de chargement, et Appliquer à l'utilisateur et l'envoyer plus tard...)
Les méthodes possédées par les objets d'instance sont :
(1). close() est utilisé pour fermer les messages de notification --> Vous pouvez également ajouter un appel différé à la méthode onshow pour améliorer l'expérience utilisateur...
(2). addEventListener() écoute les événements (cette méthode générale)
(3). removeEventListener désinstalle les événements d'écoute (général, comme ci-dessus)
(4). Événement de répartition dispatchEvent (identique à ci-dessus)
Ensuite, écrivez un test js Si vous utilisez Google Chrome, il est recommandé d'afficher les notifications dans les paramètres et d'ajouter l'adresse du service local pour autoriser les notifications.
Cependant, le nom de domaine http est fermé par défaut dans Google Chrome et ne peut pas être modifié. Vérifiez la console Google Chrome pour un message d'avertissement --->.
index.js:78 [Obsolescence] L'API de notification ne peut plus être utilisée à partir d'origines non sécurisées. Vous devriez envisager de basculer votre application vers une origine sécurisée, telle que HTTPS. Voir https://goo.gl/rStTGz pour plus de détails.
Bon, d'accord, ajouter un certificat https est vraiment toxique... Même si ajouter cette fonction à votre page d'accueil ne peut être qu'un plaisir dans Firefox...
(Tencent Cloud dispose d'un certificat SSL gratuit d'un an, vous pouvez l'installer vous-même...)
// index.jswindow.onload = function(){ let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ constructor(){ this. isNotificationSupported = Notification dans la fenêtre ; } isPermissionGranted(){ return Notification.permission === 'granted'; } requestPermission(){ if(!this.isNotificationSupported){ return; } Notification.requestPermission(status=>{ let permission = Notification.permission; }) } showNotification(){ if (!this.isNotificationSupported) { return; } if (!this.isPermissionGranted()) { return } var n = nouveau; Notification(gxlself vous envoie ses salutations, { icon : 'gxlself.png', body : 'Bienvenue pour visiter, je suis très reconnaissant ! Cliquez pour accéder à ma page de blog~' }); n.onshow = function () { console .log('gxlself a envoyé des informations de notification'); setTimeout(function() { n.close(); }, 5000 } n.onclick = function () { location.href = 'http://gxlself.com/blog' n.close() } n.onerror = function (err) { console.log(err) } n.onclose = function () { console.log(' fenêtre de message gxlself fermée') } } }Voici l'affichage de l'effet après l'exécution du navigateur Firefox :
Jetons un coup d'œil à l'effet de l'exécution de Google localement : (Le nom de domaine a été intercepté et désactivé par défaut. Cela a été expliqué ci-dessus et ne sera pas répété)
L'effet de Google est en fait plutôt bon, eh bien... c'est juste que https m'a bloqué...
------- Application de bureau -----------
Lorsque vous souhaitez utiliser les notifications dans une application Web ouverte, assurez-vous d'ajouter l'autorisation desktop-notification à votre fichier manifeste. Les notifications peuvent être utilisées à n’importe quel niveau d’autorisation, hébergé ou supérieur.
autorisations : {notification de bureau :{} }Cette notification est plus amusante et constitue également une partie importante de l'envoi de messages à l'avenir. Laissez cet enregistrement... J'espère que cela sera utile à l'étude de chacun, et j'espère également que tout le monde soutiendra le réseau VeVb Wulin.