offline.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estas Offline</title>
    <!-- Inline the page's stylesheet. -->
    <style>
      @font-face {
        font-family: "titulo";
        src: url(font/titulo.ttf);
      }
      @font-face {
        font-family: "principal";
        src: url(font/letra.ttf);
      }
      body {
        margin: 2em;
        background-color: #A82ACB;
      }
  
      h1 {
        font-family: titulo;
        color: #000000;
        text-align: center;
      }
  
      p {
        font-family: principal;
        margin-block: 1rem;
        text-align: center;
        font-size: 30px;
      }
  
      button {
        display: block;
        margin: auto;
      }
      img{
        display: block;
        margin: auto;
      }

      @media screen and (max-width: 479px) {
        img{
          width: 256px;
          height: 256px;
        }
      }
      </style>
    </head>
    <body>
      <img src="img/pwa/error-512x512.png" alt="imagen error">
      <h1>Estás desconectado</h1>
  
      <p>Haz clic en el botón para intentar recargar la pagina</p>
      <button type="button">⤾ Recargar</button>
  
      <!-- Inline the page's JavaScript file. -->
      <script>
        // Metodo de recarga manual.
        document.querySelector("button").addEventListener("click", () => {
          window.location.reload();
        });

      </script>
    </body>
  </html>