El uso de la notificación de mensajes HTML5 (Notificación web)

He escrito muchos artículos sobre HTML5, pero siempre siento que tengo que revisar las API de alto nivel relevantes. Sólo comprendiendo el sistema y pensando en los problemas desde un nivel superior podremos obtener el doble de resultado con la mitad de esfuerzo.

Probemos primero el ejemplo más simple. Abra las herramientas de desarrollo chrome , pegue el código y ejecútelo directamente:

 nueva notificación ('notificación de mensaje de Jartto/', { dir: 'rtl', cuerpo: '¡Este es un mensaje, enviado a través de notificación web, como prueba!', ícono: 'https://raw.githubusercontent.com / chenfengyanyu/mi-acumulación-web/master/images/logo.jpeg'})

No aparece ninguna notificación de mensaje, ¿qué está pasando? No te preocupes, sigue leyendo.

Según el ejemplo anterior, lo ejecutamos, pero no activamos correctamente el cuadro de mensajes. En este momento, debe verificar si el usuario está autorizado Ingrese en la consola: > Notification.permission

Pronto descubriremos que el permiso del usuario original es default . Debido a que se desconoce la elección del usuario, el comportamiento del navegador es el mismo que denied , que es denegar.

Al ver estas API de alto nivel de HTML5 , siempre surgen algunas preocupaciones. Aunque el ejemplo es bueno y fácil de usar, vale la pena pensar en la compatibilidad.

Como puedes ver, básicamente todos los navegadores lo soportan, excepto iOS Safari y Opera Mini , por lo que hay que tener cuidado con las aplicaciones móviles.

4. Documentación API

Primero clasifiquemos la API de forma sistemática. Es muy simple. Solo dedique 5 minutos a hacerlo.

Caso de uso:

 dejar notificación = nueva notificación (título, opciones)

parámetro:

título: el título de la notificación que definitivamente se mostrará

Opciones: un objeto al que se le permite configurar notificaciones. Contiene las siguientes propiedades:

• dir: La dirección del texto su valor puede ser auto (automático), ltr (de izquierda a derecha) o rtl (de derecha a izquierda)
• lang: especifica el idioma utilizado en las notificaciones. Esta cadena debe ser válida en el documento de etiqueta de idioma BCP 47.
• cuerpo: cadena adicional que se muestra en la notificación
• etiqueta: asigne una identificación a la notificación para que pueda actualizarse, reemplazarse o eliminarse cuando sea necesario.
• icono: la URL de una imagen que se utilizará para mostrar el icono de notificación.

propiedad:

Notificación.permiso: una cadena que indica el estado de autorización de la visualización de notificación actual. Los valores posibles incluyen:

• denied (el usuario negó la visualización de la notificación),
• granted (el usuario permitió que se mostrara la notificación),
• default (debido a que se desconoce la elección del usuario, el navegador se comporta igual que cuando denied )

método:

• Notification.onclick: maneja el evento de clic, que se activa cada vez que el usuario hace clic en la notificación.
• Notification.onshow: maneja el evento de presentación, que se activa cuando se muestra la notificación.
• Notification.onerror: maneja el evento de error, que se activa cada vez que la notificación encuentra un error.
• Notification.onclose: maneja el evento de cierre, que se activa cuando el usuario cierra la notificación.
• Notification.requestPermission(): se utiliza para que la página actual solicite al usuario permiso para mostrar notificaciones.
• Notification.close(): utilizado para cerrar notificaciones.

Notification.requestPermission Este método solo puede ser llamado por el comportamiento del usuario (por ejemplo: evento onclick) y no puede ser llamado por otros métodos.

De acuerdo con la API anterior, escribamos un ejemplo completo:

 function notifyMe(){ // Primero verifique si el navegador admite if (!(Notificación en ventana)) { alert(Este navegador no admite notificaciones de escritorio } // Verifique si el usuario acepta recibir notificaciones else if (Notification. permiso = == concedido) { // Si está bien, creemos una notificación var notificación = nueva Notificación (¡Hola! } // De lo contrario, necesitamos obtener permiso del usuario else if (Notificación.permiso! == 'denegado); ') { Notification.requestPermission(function (permiso){ // Si el usuario está de acuerdo, puede enviarle una notificación if (permiso === concedido) { var notificación = nueva Notificación(¡Hola!); } } } // Finalmente); , Si la ejecución llega a este punto, significa que el usuario se ha negado a autorizar las notificaciones pertinentes // Por respeto, no debemos molestarlos más}

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.