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.