12. Notificaciones

Salida

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">

 <title>Notificaciones</title>

 <style>
  html {
   color-scheme: light dark;
  }
 </style>

</head>

<body>

 <h1>Notificaciones</h1>

 <button type="button"
   onclick="notifica()">
  Muestra
 </button>

 <script>

  const MENSAJE = "Hola"

  async function notifica() {
   let permitida = false
   if ("Notification" in window) {
    let permiso =
     Notification.permission
    if (permiso === "default") {
     permiso = await Notification
      .requestPermission()
    }
    permitida =
     permiso === "granted"
      ? true
      : false
   }
   if (permitida) {
    notificacion =
     new Notification(MENSAJE)
   } else {
    alert(MENSAJE)
   }
  }

 </script>

</body>

</html>

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport"
8	content="width=device-width">
9
10	<title>Notificaciones</title>
11
12	<style>
13	html {
14	color-scheme: light dark;
15	}
16	</style>
17
18	</head>
19
20	<body>
21
22	<h1>Notificaciones</h1>
23
24	<button type="button"
25	onclick="notifica()">
26	Muestra
27	</button>
28
29	<script>
30
31	const MENSAJE = "Hola"
32
33	async function notifica() {
34	let permitida = false
35	if ("Notification" in window) {
36	let permiso =
37	Notification.permission
38	if (permiso === "default") {
39	permiso = await Notification
40	.requestPermission()
41	}
42	permitida =
43	permiso === "granted"
44	? true
45	: false
46	}
47	if (permitida) {
48	notificacion =
49	new Notification(MENSAJE)
50	} else {
51	alert(MENSAJE)
52	}
53	}
54
55	</script>
56
57	</body>
58
59	</html>

skip_previous skip_next