Prefacio: Para un desarrollador front-end, siempre presto atención a algunas funciones novedosas cuando navego por la web. Para mí, que siempre uso Teambition en el trabajo, siempre recibo notificaciones... Así que hoy estudiaré esta función H5...
1. Instancia de una notificación let n = new Notification( Este es un mensaje de notificación, //Este es el título requerido y el título de la notificación que se mostrará { icon: xxx.png, // Este icono se usa para mostrar la imagen izquierda en el cuerpo de la notificación: Hola, soy xxx, // Los caracteres del contenido en el directorio de notificación: auto, // El valor de dirección del texto incluye: auto (automático), ltr (de izquierda a derecha), rtl (de derecha a izquierda) etiqueta: gxlself / / Dar con una identificación para este mensaje de notificación, Se utiliza para actualizar, eliminar, reemplazar y otras operaciones en este mensaje de notificación // long: en-US // El campo de idioma debe hacer referencia a https://tools.ietf.org/html/bcp47. sin efecto. .. // ... // Consulte las propiedades de la instancia a continuación para conocer otras propiedades opcionales}) Acceda a las propiedades de instancia correspondientes:n.actions // Una matriz de solo lectura de objetos NotificationAction. Cada objeto describe una única acción que el usuario puede seleccionar en una notificación.
n.image // URL de la imagen mostrada como parte de la notificación
n.badge // La URL de la imagen utilizada para representar la notificación cuando no hay suficiente espacio para mostrar la notificación en sí.
n.permission // Hay tres valores: granted , denied o default 当状态值为granted时可以发送通知消息default默认用户没处理denied 用户拒绝
n.renotify // Valor booleano. Si se debe reemplazar la notificación anterior cuando aparezca una nueva. Si se establece en verdadero, significa reemplazo, lo que significa que solo aparecerá una notificación de la marca actual. ¿Observa el marcado actual aquí? Así es, para que el parámetro true funcione, tag必须establecer el valor del atributo.
n.requireInteraction // Valor booleano, se refiere a si la notificación permanece activa hasta que el usuario hace clic o cancela la notificación en lugar de cerrarse automáticamente.
n.silent // Valor booleano. Si debería haber un sonido cuando aparezca la notificación. El valor predeterminado false , lo que significa silencioso.
n.timestamp // La hora en que se crea o se puede utilizar la notificación.
n.data // Cualquier tipo de dato asociado a la notificación.
n.vibrate // Cuando se muestra la notificación, el modo de vibración requerido por el hardware de vibración del dispositivo. El llamado modo de vibración se refiere a una matriz que describe el tiempo de alternancia, que representa el número de milisegundos de vibración y no vibración respectivamente, y continúa alternándose. Por ejemplo, [200, 100, 200] significa que el dispositivo vibra durante 200 milisegundos, luego se detiene durante 100 milisegundos y luego vibra durante 200 milisegundos. (versión móvil)
n.sonido // Cadena. Dirección de audio. Indica la notificación de la presencia de un recurso sonoro a reproducir.
n.sticky // La adsorción de notificaciones no es fácil de borrar... (versión móvil)
n.noscreen // Valor booleano. Si se debe dejar de mostrar información de notificación en la pantalla. El valor predeterminado es false , lo que significa que el contenido de la notificación debe mostrarse en la pantalla. (versión móvil)
1> evento de clic del usuario onclick en información de notificación
2> evento onshow activado después de que se muestra el mensaje de notificación
3> onerror es un evento que se activará cuando se encuentre un error.
4> Manejo del evento de cierre onclose
2. ¿Qué propiedades/métodos tiene el objeto Notificación? Utilice la salida del objeto ventana en la consola para abrirlo y verlo:Vale la pena señalar que el método requestPermission() solo es válido en el objeto de notificación, no en el objeto de instancia. ¡Este método se utiliza para solicitar al usuario permiso para mostrar notificaciones y solo el usuario puede llamarlo activamente (! se puede llamar en la página al cargar, aplicar al usuario y enviarlo más tarde...)
Los métodos que poseen los objetos de instancia son:
(1). close() se usa para cerrar mensajes de notificación --> También puede agregar una llamada retrasada al método onshow para mejorar la experiencia del usuario...
(2). addEventListener() escucha eventos (este método general)
(3). removeEventListener desinstala los eventos de escucha (general, igual que arriba)
(4) Evento de envío de Evento (igual que el anterior)
A continuación, escriba una prueba js. Si está utilizando Google Chrome, se recomienda mostrar notificaciones en la configuración y agregar la dirección del servicio local para permitir notificaciones.
Sin embargo, el nombre de dominio http está cerrado de forma predeterminada en Google Chrome y no se permite cambiarlo. Consulte la consola de Google Chrome para ver un mensaje de advertencia --->.
index.js:78 [Obsoleto] La API de notificación ya no se puede utilizar desde orígenes inseguros. Debería considerar cambiar su aplicación a un origen seguro, como HTTPS. Consulte https://goo.gl/rStTGz para obtener más detalles.
Bueno, vale, añadir un certificado https es realmente venenoso... Aunque añadir esta función a tu página de inicio sólo puede ser un placer en Firefox...
(Tencent Cloud tiene un certificado SSL gratuito de un año, puedes instalarlo tú mismo...)
// index.jswindow.onload = function(){ let gxlself = new Gxlself() gxlself.requestPermission() setTimeout(()=>{ gxlself.showNotification() },3000)}class Gxlself{ constructor(){ this. isNotificationSupported = Notificación en ventana } isPermissionGranted(){ return Notification.permission === 'concedido'; } requestPermission(){ if(!this.isNotificationSupported){ return } Notification.requestPermission(status=>{ let permiso = Notification.permission; }) } showNotification(){ if (!this.isNotificationSupported) { retorno; } if (!this.isPermissionGranted()) { retorno } var n = nuevo Notificación (gxlself le envía saludos, {icono: 'gxlself.png', cuerpo: '¡Bienvenido a visitarnos, estoy muy agradecido! Haga clic para saltar a la página de mi blog ~' }); .log('gxlself ha enviado información de notificación'); setTimeout(function() { n.close(); }, 5000 } n.onclick = function () { ubicación.href = 'http://gxlself.com/blog' n.close() } n.onerror = función (err) { console.log(err) } n.onclose = función () { console.log(' ventana de mensaje gxlself cerrada') } } }Esta es la visualización del efecto después de ejecutar el navegador Firefox:
Echemos un vistazo al efecto de ejecutar Google localmente: (El nombre de dominio ha sido interceptado y desactivado de forma predeterminada. Se explicó anteriormente y no se repetirá)
El efecto de Google es bastante bueno, bueno... es solo que https me bloqueó...
------- Aplicación de escritorio -----------
Cuando desee utilizar notificaciones en una aplicación web abierta, asegúrese de agregar el permiso desktop-notification a su archivo de manifiesto. Las notificaciones se pueden utilizar en cualquier nivel de permiso, alojado o superior.
permisos: {notificación de escritorio:{} }Esta notificación es más divertida y también es una parte importante del envío de mensajes en el futuro. Deje este registro... Espero que sea útil para el estudio de todos y también espero que todos apoyen la red VeVb Wulin.