Why does the error.html page not appear? pwa js

this is my code for my APW.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="Description" content="PWA JS." />
    <title>Administrador de Pacientes</title>
    <link rel="manifest" href="manifest.json" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="apple-touch-icon" href="img/icons/icon-96x96.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="theme-color" content="black" />
  </head>
  <body>
    <h2 class="text-center my-5 titulo">Admin de Pacientes de Veterinaria</h2>
    <div class="container mt-5 p-5">
      <div id="contenido" class="row">
        <div class="col-md-6 agregar-cita">
          <form id="nueva-cita">
            <legend class="mb-4">Datos del Paciente</legend>
            <div class="form-group row">
              <label class="col-sm-4 col-lg-4 col-form-label"
                >Nombre Mascota:</label
              >
              <div class="col-sm-8 col-lg-8">
                <input
                  type="text"
                  id="mascota"
                  name="mascota"
                  class="form-control"
                  placeholder="Nombre Mascota"
                />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-lg-4 col-form-label"
                >Propietario:</label
              >
              <div class="col-sm-8 col-lg-8">
                <input
                  type="text"
                  id="propietario"
                  name="propietario"
                  class="form-control"
                  placeholder="Nombre Dueño de la Mascota"
                />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-lg-4 col-form-label">Teléfono:</label>
              <div class="col-sm-8 col-lg-8">
                <input
                  type="tel"
                  id="telefono"
                  name="telefono"
                  class="form-control"
                  placeholder="Número de Teléfono"
                />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-lg-4 col-form-label">Fecha:</label>
              <div class="col-sm-8 col-lg-8">
                <input
                  type="date"
                  id="fecha"
                  name="fecha"
                  class="form-control"
                />
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-4 col-lg-4 col-form-label">Hora:</label>
              <div class="col-sm-8 col-lg-8">
                <input type="time" id="hora" name="hora" class="form-control" />
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-4 col-lg-4 col-form-label">Sintomas:</label>
              <div class="col-sm-8 col-lg-8">
                <textarea
                  id="sintomas"
                  name="sintomas"
                  class="form-control"
                ></textarea>
              </div>
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-success w-100 d-block">
                Crear Cita
              </button>
            </div>
          </form>
        </div>
        <div class="col-md-6">
          <h2 id="administra" class="mb-4"></h2>
          <ul id="citas" class="list-group lista-citas"></ul>
        </div>
      </div>
      <!--.row-->
    </div>
    <!--.container-->

    <script src="js/app.js"></script>
    <script src="js/apv.js"></script>
  </body>
</html>

sw.js

const nombreCache = "apv-v1";

const archivos = [
  "/",
  "/index.html",
  "/error.html",
  "/css/bootstrap.css",
  "/css/styles.css",
  "/js/app.js",
  "/js/apv.js",
  "/manifest.json",
];

// Cuando se instala
self.addEventListener("install", (e) => {
  console.log("Instalado el service worker");

  e.waitUntil(
    caches.open(nombreCache).then((cache) => {
      console.log("cacheando");
      cache.addAll(archivos);
    })
  );
});

// Activar el service worker
self.addEventListener("activate", (e) => {
  console.log("service worker activado");
});

// Evento fetch par adescargar archivos estaticos
self.addEventListener("fetch", (e) => {
  console.log("Fetch...", e);

  e.respondWith(
    caches
      .match(e.request)
      .then((respuestaCache) => {
        return respuestaCache;
      })
      .catch(() => caches.match("/error.html"))
  );
});

my problem is the .catch not work.

manifest.js

{
  "name": "APV",
  "short_name": "APV",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#D41872",
  "theme_color": "#D41872",
  "orientarion": "portrait",
  "icons": [
    {
      "src": "img/icons/Icon-72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "img/icons/Icon-120.png",
      "type": "image/png",
      "sizes": "120x120"
    },
    {
      "src": "img/icons/Icon-128.png",
      "type": "image/png",
      "sizes": "128x128"
    }
  ]
}

/js/app.js

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("./sw.js")
    .then((registrado) => console.log("se instalo correctamente", registrado))
    .catch((e) => console.log("Fallo", e));
} else {
  console.log("service workers no soportados");
}

/js/apv.js

const mascotaInput = document.querySelector('#mascota');
const propietarioInput = document.querySelector('#propietario');
const telefonoInput = document.querySelector('#telefono');
const fechaInput = document.querySelector('#fecha');
const horaInput = document.querySelector('#hora');
const sintomasInput = document.querySelector('#sintomas');

// Contenedor para las citas
const contenedorCitas = document.querySelector('#citas');

// Formulario nuevas citas
const formulario = document.querySelector('#nueva-cita')
formulario.addEventListener('submit', nuevaCita);

// Heading
const heading = document.querySelector('#administra');


let editando = false;


// Eventos
eventListeners();
function eventListeners() {
    mascotaInput.addEventListener('change', datosCita);
    propietarioInput.addEventListener('change', datosCita);
    telefonoInput.addEventListener('change', datosCita);
    fechaInput.addEventListener('change', datosCita);
    horaInput.addEventListener('change', datosCita);
    sintomasInput.addEventListener('change', datosCita);
}

const citaObj = {
    mascota: '',
    propietario: '',
    telefono: '',
    fecha: '',
    hora:'',
    sintomas: ''
}


function datosCita(e) {
    //  console.log(e.target.name) // Obtener el Input
     citaObj[e.target.name] = e.target.value;
}

// CLasses
class Citas {
    constructor() {
        this.citas = []
    }
    agregarCita(cita) {
        this.citas = [...this.citas, cita];
    }
    editarCita(citaActualizada) {
        this.citas = this.citas.map( cita => cita.id === citaActualizada.id ? citaActualizada : cita)
    }

    eliminarCita(id) {
        this.citas = this.citas.filter( cita => cita.id !== id);
    }
}

class UI {

    constructor({citas}) {
        this.textoHeading(citas);
    }

    imprimirAlerta(mensaje, tipo) {
        // Crea el div
        const divMensaje = document.createElement('div');
        divMensaje.classList.add('text-center', 'alert', 'd-block', 'col-12');
        
        // Si es de tipo error agrega una clase
        if(tipo === 'error') {
             divMensaje.classList.add('alert-danger');
        } else {
             divMensaje.classList.add('alert-success');
        }

        // Mensaje de error
        divMensaje.textContent = mensaje;

        // Insertar en el DOM
        document.querySelector('#contenido').insertBefore( divMensaje , document.querySelector('.agregar-cita'));

        // Quitar el alert despues de 3 segundos
        setTimeout( () => {
            divMensaje.remove();
        }, 3000);
   }

   imprimirCitas({citas}) { // Se puede aplicar destructuring desde la función...
       
        this.limpiarHTML();

        this.textoHeading(citas);

        citas.forEach(cita => {
            const {mascota, propietario, telefono, fecha, hora, sintomas, id } = cita;

            const divCita = document.createElement('div');
            divCita.classList.add('cita', 'p-3');
            divCita.dataset.id = id;

            // scRIPTING DE LOS ELEMENTOS...
            const mascotaParrafo = document.createElement('h2');
            mascotaParrafo.classList.add('card-title', 'font-weight-bolder');
            mascotaParrafo.innerHTML = `${mascota}`;

            const propietarioParrafo = document.createElement('p');
            propietarioParrafo.innerHTML = `<span class="font-weight-bolder">Propietario: </span> ${propietario}`;

            const telefonoParrafo = document.createElement('p');
            telefonoParrafo.innerHTML = `<span class="font-weight-bolder">Teléfono: </span> ${telefono}`;

            const fechaParrafo = document.createElement('p');
            fechaParrafo.innerHTML = `<span class="font-weight-bolder">Fecha: </span> ${fecha}`;

            const horaParrafo = document.createElement('p');
            horaParrafo.innerHTML = `<span class="font-weight-bolder">Hora: </span> ${hora}`;

            const sintomasParrafo = document.createElement('p');
            sintomasParrafo.innerHTML = `<span class="font-weight-bolder">Síntomas: </span> ${sintomas}`;

            // Agregar un botón de eliminar...
            const btnEliminar = document.createElement('button');
            btnEliminar.onclick = () => eliminarCita(id); // añade la opción de eliminar
            btnEliminar.classList.add('btn', 'btn-danger', 'mr-2');
            btnEliminar.innerHTML = 'Eliminar <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'

            // Añade un botón de editar...
            const btnEditar = document.createElement('button');
            btnEditar.onclick = () => cargarEdicion(cita);

            btnEditar.classList.add('btn', 'btn-info');
            btnEditar.innerHTML = 'Editar <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>'

            // Agregar al HTML
            divCita.appendChild(mascotaParrafo);
            divCita.appendChild(propietarioParrafo);
            divCita.appendChild(telefonoParrafo);
            divCita.appendChild(fechaParrafo);
            divCita.appendChild(horaParrafo);
            divCita.appendChild(sintomasParrafo);
            divCita.appendChild(btnEliminar)
            divCita.appendChild(btnEditar)

            contenedorCitas.appendChild(divCita);
        });    
   }

   textoHeading(citas) {
        if(citas.length > 0 ) {
            heading.textContent = 'Administra tus Citas '
        } else {
            heading.textContent = 'No hay Citas, comienza creando una'
        }
    }

   limpiarHTML() {
        while(contenedorCitas.firstChild) {
            contenedorCitas.removeChild(contenedorCitas.firstChild);
        }
   }
}


const administrarCitas = new Citas();
console.log(administrarCitas);
const ui = new UI(administrarCitas);

function nuevaCita(e) {
    e.preventDefault();

    const {mascota, propietario, telefono, fecha, hora, sintomas } = citaObj;

    // Validar
    if( mascota === '' || propietario === '' || telefono === '' || fecha === ''  || hora === '' || sintomas === '' ) {
        ui.imprimirAlerta('Todos los mensajes son Obligatorios', 'error')

        return;
    }

    if(editando) {
        // Estamos editando
        administrarCitas.editarCita( {...citaObj} );

        ui.imprimirAlerta('Guardado Correctamente');

        formulario.querySelector('button[type="submit"]').textContent = 'Crear Cita';

        editando = false;

    } else {
        // Nuevo Registrando

        // Generar un ID único
        citaObj.id = Date.now();
        
        // Añade la nueva cita
        administrarCitas.agregarCita({...citaObj});

        // Mostrar mensaje de que todo esta bien...
        ui.imprimirAlerta('Se agregó correctamente')
    }


    // Imprimir el HTML de citas
    ui.imprimirCitas(administrarCitas);

    // Reinicia el objeto para evitar futuros problemas de validación
    reiniciarObjeto();

    // Reiniciar Formulario
    formulario.reset();

}

function reiniciarObjeto() {
    // Reiniciar el objeto
    citaObj.mascota = '';
    citaObj.propietario = '';
    citaObj.telefono = '';
    citaObj.fecha = '';
    citaObj.hora = '';
    citaObj.sintomas = '';
}


function eliminarCita(id) {
    administrarCitas.eliminarCita(id);

    ui.imprimirCitas(administrarCitas)
}

function cargarEdicion(cita) {

    const {mascota, propietario, telefono, fecha, hora, sintomas, id } = cita;

    // Reiniciar el objeto
    citaObj.mascota = mascota;
    citaObj.propietario = propietario;
    citaObj.telefono = telefono;
    citaObj.fecha = fecha
    citaObj.hora = hora;
    citaObj.sintomas = sintomas;
    citaObj.id = id;

    // Llenar los Inputs
    mascotaInput.value = mascota;
    propietarioInput.value = propietario;
    telefonoInput.value = telefono;
    fechaInput.value = fecha;
    horaInput.value = hora;
    sintomasInput.value = sintomas;

    formulario.querySelector('button[type="submit"]').textContent = 'Guardar Cambios';

    editando = true;

}

error.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="Description" content="PWA JS." />
    <title>Administrador de Pacientes</title>
    <link rel="manifest" href="manifest.json" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="apple-touch-icon" href="img/icons/icon-96x96.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="theme-color" content="black" />
  </head>
  <body>
    <h2 class="text-center my-5 titulo">Admin de Pacientes de Veterinaria</h2>
    <div class="container mt-5 p-5">
      <h1 class="text-center">Hubo un error no se pudo mostrar</h1>
    </div>
    <!--.container-->

    <script src="js/app.js"></script>
  </body>
</html>
  • css/bootstrap.css
  • css/styles.css
  • img/icons/Icon-72.png
  • img/icons/Icon-120.png
  • img/icons/Icon-128.png

My problem is that when I start the application my manifest does not appear sometimes and when I put an invalid url url:localhost/dafads.html this does not give me anything, it only shows a connection error.

All you need to do is clear the last directory in the URL. The link for the page you are looking for should be visible on the previous page. If it is not to be found on that page then you can also go back to the previous page and look for the correct link there.

This may help you,
Rachel Gomez

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.