7. index.html

1
<!DOCTYPE html>
2
<html lang="es">
3

  
4
<head>

  
5

  
6
 <meta charset="UTF-8">

  
7
 <meta name="viewport" content="width=device-width">

  
8

  
9
 <title>Notificaciones Push</title>

  
10

  
11
 <script type="module" src="js/lib/manejaErrores.js"></script>

  
12

  
13
</head>

  
14

  
15
<body>

  
16

  
17
 <h1>Notificaciones Push</h1>

  
18

  
19
 <menu style="display: flex; list-style: none; flex-wrap: wrap; gap: 0.5rem;">

  
20
  <li>

  
21
   <button id="btnSuscribe" type="button" hidden>

  
22
    Suscríbete

  
23
   </button>

  
24
  </li>

  
25
  <li>

  
26
   <button id="btnCancela" type="button" hidden>

  
27
    Cancela suscripción

  
28
   </button>

  
29
  </li>

  
30
  <li>

  
31
   <button id="btnNotifica" type="button" hidden>

  
32
    Notifica

  
33
   </button>

  
34
  </li>

  
35
  <li>

  
36
   <a href="srv/genera-llaves.php" target="_blank">Genera llaves</a>

  
37
  </li>

  
38
 </menu>

  
39

  
40
 <p>

  
41
  <output id="outEstado">

  
42
   <progress max="100">Cargando…</progress>

  
43
  </output>

  
44
 </p>

  
45

  
46
 <fieldset>

  
47
  <legend>Reporte de envío a endpoints</legend>

  
48

  
49
  <dl id="reporte"></dl>

  
50

  
51
 </fieldset>

  
52

  
53
 <script type="module">

  
54

  
55
  import {

  
56
   activaNotificacionesPush

  
57
  } from "./js/lib/activaNotificacionesPush.js"

  
58
  import { getSuscripcionPush } from "./js/lib/getSuscripcionPush.js"

  
59
  import { suscribeAPush } from "./js/lib/suscribeAPush.js"

  
60
  import { cancelaSuscripcionPush } from "./js/lib/cancelaSuscripcionPush.js"

  
61
  import { urlBase64ToUint8Array } from "./js/lib/urlBase64ToUint8Array.js"

  
62
  import {

  
63
   calculaDtoParaSuscripcion

  
64
  } from "./js/lib/calculaDtoParaSuscripcion.js"

  
65
  import { consume } from "./js/lib/consume.js"

  
66
  import { enviaJsonRecibeJson } from "./js/lib/enviaJsonRecibeJson.js"

  
67
  import { descargaVista } from "./js/lib/descargaVista.js"

  
68
  import { muestraError } from "./js/lib/muestraError.js"

  
69

  
70
  const applicationServerKey = urlBase64ToUint8Array(

  
71
   "BMBlr6YznhYMX3NgcWIDRxZXs0sh7tCv7_YCsWcww0ZCv9WGg-tRCXfMEHTiBPCksSqeve1twlbmVAZFv7GSuj0")

  
72
  /** @enum {string} */

  
73
  const Estado = {

  
74
   CALCULANDO: "Calculando…",

  
75
   SUSCRITO: "Suscrito",

  
76
   DESUSCRITO: "Sin suscripción",

  
77
   INCOMPATIBLE: "Incompatible"

  
78
  }

  
79

  
80
  preparaVista()

  
81
  btnSuscribe.addEventListener("click", suscribe)

  
82
  btnCancela.addEventListener("click", cancela)

  
83
  btnNotifica.addEventListener("click", notificaDesdeElServidor)

  
84

  
85
  async function preparaVista() {

  
86
   try {

  
87
    await activaNotificacionesPush("sw.js")

  
88
    const suscripcion = await getSuscripcionPush()

  
89
    if (suscripcion === null) {

  
90
     muestraEstado(Estado.DESUSCRITO)

  
91
    } else {

  
92
     // Modifica la suscripción en el servidor,

  
93
     const dto = calculaDtoParaSuscripcion(suscripcion)

  
94
     await consume(enviaJsonRecibeJson("php/suscripcion-modifica.php", dto))

  
95
     muestraEstado(Estado.SUSCRITO)

  
96
    }

  
97
   } catch (error) {

  
98
    muestraEstado(Estado.INCOMPATIBLE)

  
99
    muestraError(error)

  
100
   }

  
101
  }

  
102

  
103
  async function notificaDesdeElServidor() {

  
104
   reporte.innerHTML =

  
105
     /* html */ `<progress max="100">Cargando…</progress>`

  
106
   await descargaVista("php/notifica.php", "POST")

  
107
  }

  
108

  
109
  async function suscribe() {

  
110
   muestraEstado(Estado.CALCULANDO)

  
111
   const suscripcion = await suscribeAPush(applicationServerKey)

  
112
   // Agrega la suscripción al servidor,

  
113
   const dto = calculaDtoParaSuscripcion(suscripcion)

  
114
   await consume(enviaJsonRecibeJson("php/suscripcion-modifica.php", dto)

  
115
   )

  
116
   muestraEstado(Estado.SUSCRITO)

  
117
  }

  
118

  
119
  async function cancela() {

  
120
   muestraEstado(Estado.CALCULANDO)

  
121
   const suscripcion = await cancelaSuscripcionPush()

  
122
   if (suscripcion !== null) {

  
123
    // Elimina la suscripción en el servidor,

  
124
    const dto = calculaDtoParaSuscripcion(suscripcion)

  
125
    await consume(enviaJsonRecibeJson("php/suscripcion-elimina.php", dto))

  
126
    muestraEstado(Estado.DESUSCRITO)

  
127
   }

  
128
  }

  
129

  
130
  /**

  
131
   * @param {Estado} estado

  
132
   */

  
133
  function muestraEstado(estado) {

  
134
   outEstado.value = estado

  
135
   if (estado === Estado.INCOMPATIBLE || estado === Estado.CALCULANDO) {

  
136
    btnSuscribe.hidden = true

  
137
    btnCancela.hidden = true

  
138
    btnNotifica.hidden = true

  
139
   } else if (estado === Estado.SUSCRITO) {

  
140
    btnSuscribe.hidden = true

  
141
    btnCancela.hidden = false

  
142
    btnNotifica.hidden = false

  
143
   } else if (estado === Estado.DESUSCRITO) {

  
144
    btnSuscribe.hidden = false

  
145
    btnCancela.hidden = true

  
146
    btnNotifica.hidden = true

  
147
   }

  
148
  }

  
149

  
150
 </script>

  
151

  
152
 </body>

  
153

  
154
</html>

 


 
 
 
     skip_previous
    
 
     skip_next