EJEMPLO WEB APP PWA APLICACION WEB PROGRESIVA HTML CSS JS

 index.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>Document</title>

    <link rel="stylesheet" href="css/styles.css" />

    <link rel="manifest" href="/manifest.json" />

    <meta name="theme-color" content="#f9d627" />

  </head>

  <body>

    <div class="cba-header">

      <img

        src="images/beerjs-logo.png"

        alt="beerjs-logo"

        class="cba-header__logo"

      />

      <h1 class="cba-header__title">

        BeerJS

        <strong>Cba</strong>

      </h1>

    </div>

    <script src="js/main.js"></script>

  </body>

</html>

--------------------------------------------------

manifest.json

{

    "short_name": "BeerJS",

    "name": "BeerJS Cba Web Application",

    "icons": [

        {

            "src": "images/icon-192x192.png",

            "sizes": "192x192",

            "type": "image/png"

        },

        {

            "src": "images/icon-256x256.png",

            "sizes": "256x256",

            "type": "image/png"

        },

        {

            "src": "images/icon-384x384.png",

            "sizes": "384x384",

            "type": "image/png"

        },

        {

            "src": "images/icon-512x512.png",

            "sizes": "512x512",

            "type": "image/png"

        }

    ],

    "start_url": "index.html",

    "background_color": "#f9d627",

    "display": "standalone",

    "scope": "/",

    "theme_color": "#f9d627",

    "description": "Weather forecast information"

}

-------------------------------------------

sw.js

const STATIC_CACHE = "static-v1";


const APP_SHELL = [

  "/",

  "index.html",

  "css/styles.css",

  "js/main.js",

  "images/beerjs-logo.png",

];


self.addEventListener("install", (e) => {

  const cacheStatic = caches

    .open(STATIC_CACHE)

    .then((cache) => cache.addAll(APP_SHELL));


  e.waitUntil(cacheStatic);

});


self.addEventListener("fetch", (e) => {

  console.log("fetch! ", e.request);

  e.respondWith(

    caches

      .match(e.request)

      .then((res) => {

        return res || fetch(e.request);

      })

      .catch(console.log)

  );

  //   e.waitUntil(response);

});


----------------------------------

js/main.js

//Configurar SW

let swLocation = "sw.js";

// "/beerjs/sw.js";


if (navigator.serviceWorker) {

  if (window.location.href.includes("localhost")) swLocation = "/sw.js"; //Varia según el host

  navigator.serviceWorker.register(swLocation);

}


//Logic of web app

console.log("Hello world!!");

------------------------------------------------

/images



----------------------------------------------------
css/styles.css

body {
  background-color: #f9d627;
  font-family: NeutraText, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.cba-header {
  display: flex;
  margin: 0 auto;
}

.cba-header__title {
  font-weight: 400;
  font-size: 46px;
  padding: 38px 0 0 10px;
  margin: 0;
}

.cba-header__logo {
  height: 106px;
}

--------------------------------------

Comentarios

Publicar un comentario

Entradas populares de este blog

Como proteger una api json con php al pasar el parametro POST[id] de los ataques sql injection y xss

 Como proteger una api json con php al pasar el parametro POST_[id] de los ataques sql injection y xss ChatGPT Para proteger una API JSON en PHP contra ataques de inyección SQL y XSS al pasar parámetros como POST[id], puedes seguir algunas prácticas de seguridad: Validación de entrada: Antes de usar cualquier dato recibido del usuario, valida y filtra la entrada para asegurarte de que cumple con los requisitos esperados. Puedes utilizar funciones como filter_input() o filter_var() para validar y sanitizar los datos. Preparación de consultas SQL: Si estás realizando consultas SQL directamente en tu base de datos, utiliza sentencias preparadas (prepared statements) y parámetros vinculados (bound parameters) en lugar de construir consultas SQL concatenando cadenas de texto. Las sentencias preparadas ayudan a prevenir la inyección SQL al separar los datos de las instrucciones SQL. Escape de salida: Cuando devuelvas datos a través de la API JSON, asegúrate de escapar apropiadamente los ...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

NUMEROS SERIE DE DISCO RIGIDO Y PENDRIVER USB CON PHP

 Para listar todos los dispositivos USB conectados y obtener su número de serie en PHP usando wmic, necesitas ajustar el comando wmic. El comando que tienes está intentando filtrar las unidades basadas en una letra de unidad, lo cual no funcionará para todos los dispositivos USB. En su lugar, puedes usar el siguiente enfoque:     Usa wmic diskdrive para obtener todos los dispositivos conectados, y luego puedes filtrarlos por MediaType o DeviceID para identificar cuáles son dispositivos USB. Aquí tienes el código corregido: php // Ejecutar el comando para listar todas las unidades de disco, incluyendo USB $output2 = shell_exec('wmic diskdrive where "MediaType=\'Removable Media\'" get DeviceID,SerialNumber,Model'); // Ver la salida completa (para depuración) echo "<pre>$output2</pre>"; Explicación:     wmic diskdrive where "MediaType='Removable Media'" get DeviceID,SerialNumber,Model: Este comando obtiene todas las unidade...
Leer más