[RESOLU] Progressive Web App : problème sur service worker

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour à tous,

Je me suis mis depuis quelques jours à travailler sur quelques tutos sur les progressive web app (pwa). C’est un moyen de faire des applications mobiles grâce au html et javascript sans utiliser les langages natifs.

Malheureusement, je bloque sur un point. Lors de l’audit avec devtool tous les points sont quasi validés sauf au niveau du service worker. J’ai cette erreur que je n’arrive pas à corriger :

Image utilisateur
Image utilisateur

User will not be prompted to Install the Web App Failures: Service worker does not successfully serve the manifest's start_url, Timed out waiting for fetched start_url.

Voici l’url de mon app : https://chopelink.com/pwa/

Voici le contenu de mon manifest.json :

{
  "name": "App Test",
  "short_name": "App",
  "icons": [
    {
      "src": "images/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "images/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "theme_color": "#2196f3",
  "background_color": "#E81E7C",
  "display": "standalone",
  "start_url": "/index.html"
}

Mon service worker :

var cacheName = 'todoAppCache';
var filesToCache = [
    '/',
    'styles/inline.css',
    'index.html'];

// install service worker
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

// active service worker
self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          console.log('[ServiceWorker] Removing old cache', key);
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});;



self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        return fetch(event.request).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have two streams.
            var responseToCache = response.clone();

            caches.open(cacheName)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

Et le contenu de mon app.js :

// si navigateur accepte on install le service worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker
         .register('./service-worker.js')
         .then(function() { console.log('Service Worker Registered'); });
}


window.addEventListener("beforeinstallprompt", function(e) { 
  // log the platforms provided as options in an install prompt 
  console.log(e.platforms); // e.g., ["web", "android", "windows"] 
  e.userChoice.then(function(outcome) { 
    console.log(outcome); // either "accepted" or "dismissed"
  }, handleError); 
});

Qu’est se qui ne va pas ?

Merci d’avance pour votre aide ou vos pistes.

Florian

Édité par arglow

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte