0

Estoy tratando de ver como es que funcionan las pwa, ya tengo el archivo manifest.json y el serviceWorker.js, ya también utilice lighthouse y tiene un reporte del 100%.

El problema es que al abrir la pagina desde el celular y agregarla a la pantalla de inicio me da una url diferente, la url de la pagina es https://luis-pedroza.github.io/PokedexPWA/ pero al agregarla a la pantalla de inicio con el celular me da https://luis-pedroza.github.io/index.html/ la cual no existe.

Otra cosa es que al abrir la pagina desde el navegador de pc no me da la opción de instalarla como aplicación. No se a que se deban estos errores.

mi archivo service-worker.js es el siguiente

const CACHE_NAME = 'pokedex-pwa-cache-v1';
const urlsToCache = [
  './index.html',
  './style.css',
  './functions.js',
  './pokeball.webp',
  './wall.webp',
  './none.webp'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
      .then(() => self.skipWaiting())
      .catch(error => {
        console.error('Error al precachear recursos:', error);
      })
  );
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys()
      .then(cacheNames => {
        return Promise.all(
          cacheNames.filter(cacheName => cacheName !== CACHE_NAME)
            .map(cacheName => caches.delete(cacheName))
        );
      })
      .then(() => self.clients.claim())
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request)
          .then(networkResponse => {
            // Se clona la respuesta antes de almacenarla en caché,
            // ya que la respuesta se consumirá por el navegador para mostrarla
            const clonedResponse = networkResponse.clone();
            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, clonedResponse);
              });
            return networkResponse;
          })
          .catch(error => {
            console.error('Error al recuperar el recurso desde la red:', error);
            // Aquí puedes responder con una página de "Sin conexión" o cualquier otra lógica de manejo de errores
          });
      })
  );
});

1 respuesta 1

0

En al menos Chrome y Edge para saber los problemas con una PWA, abres la consola F12 y te vas a la pestaña Lighthouse. Si no estuviera presente presiona el icono + para agregarlo.

Luego marca la opción Aplicación Progresiva y presiona el botón para analizar

introducir la descripción de la imagen aquí

Te deberá dar un resultado como este:

introducir la descripción de la imagen aquí

Ahí te indica que no puede instalarse porque tienes problemas con los tamaños de los iconos.

Para el otro problema, prueba agregar esto en el <head>

<base href="/PokedexPWA/" />

Si eso no funciona, prueba además cambiar en el manifesto la propiedad start_url

"start_url": "https://luis-pedroza.github.io/PokedexPWA/",

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.