J. sw.js

1/* Este archivo debe estar colocado en la carpeta raíz del sitio.
2 *
3 * Cualquier cambio en el contenido de este archivo hace que el service
4 * worker se reinstale. */
5
6/**
7 * Cambia el número de la versión cuando cambia el contenido de los
8 * archivos.
9 *
10 * El número a la izquierda del punto (.), en este caso <q>1</q>, se
11 * conoce como número mayor y se cambia cuando se realizan
12 * modificaciones grandes o importantes.
13 *
14 * El número a la derecha del punto (.), en este caso <q>00</q>, se
15 * conoce como número menor y se cambia cuando se realizan
16 * modificaciones menores.
17 */
18const VERSION = "1.00"
19
20/** Nombre del archivo de cache. */
21const CACHE = "ejemploPWA"
22
23/**
24 * Archivos requeridos para que la aplicación funcione fuera de
25 * línea.
26 */
27const ARCHIVOS = [
28 "favicon.ico",
29 "index.html",
30 "site.webmanifest",
31 "css/estilos.css",
32 "img/icono2048.png",
33 "img/maskable_icon.png",
34 "img/maskable_icon_x128.png",
35 "img/maskable_icon_x192.png",
36 "img/maskable_icon_x384.png",
37 "img/maskable_icon_x48.png",
38 "img/maskable_icon_x512.png",
39 "img/maskable_icon_x72.png",
40 "img/maskable_icon_x96.png",
41 "img/screenshot_horizontal.png",
42 "img/screenshot_vertical.png",
43 "js/registraServiceWorker.js",
44 "/"
45]
46
47// Verifica si el código corre dentro de un service worker.
48if (self instanceof ServiceWorkerGlobalScope) {
49 // Evento al empezar a instalar el servide worker,
50 self.addEventListener("install",
51 (/** @type {ExtendableEvent} */ evt) => {
52 console.log("El service worker se está instalando.")
53 evt.waitUntil(llenaElCache())
54 })
55
56 // Evento al solicitar información a la red.
57 self.addEventListener("fetch", (/** @type {FetchEvent} */ evt) => {
58 if (evt.request.method === "GET") {
59 evt.respondWith(buscaLaRespuestaEnElCache(evt))
60 }
61 })
62
63 // Evento cuando el service worker se vuelve activo.
64 self.addEventListener("activate",
65 () => console.log("El service worker está activo."))
66}
67
68async function llenaElCache() {
69 console.log("Intentando cargar caché:", CACHE)
70 // Borra todos los cachés.
71 const keys = await caches.keys()
72 for (const key of keys) {
73 await caches.delete(key)
74 }
75 // Abre el caché de este service worker.
76 const cache = await caches.open(CACHE)
77 // Carga el listado de ARCHIVOS.
78 await cache.addAll(ARCHIVOS)
79 console.log("Cache cargado:", CACHE)
80 console.log("Versión:", VERSION)
81}
82
83/** @param {FetchEvent} evt */
84async function buscaLaRespuestaEnElCache(evt) {
85 // Abre el caché.
86 const cache = await caches.open(CACHE)
87 const request = evt.request
88 /* Busca la respuesta a la solicitud en el contenido del caché, sin
89 * tomar en cuenta la parte después del símbolo "?" en la URL. */
90 const response = await cache.match(request, { ignoreSearch: true })
91 if (response === undefined) {
92 /* Si no la encuentra, empieza a descargar de la red y devuelve
93 * la promesa. */
94 return fetch(request)
95 } else {
96 // Si la encuentra, devuelve la respuesta encontrada en el caché.
97 return response
98 }
99}
skip_previous skip_next