Je crée une application Web progressive pour un projet universitaire, mais lorsque j'ai vérifié la console, j'ai cette erreur:

Erreur non capturée (promise) TypeError: la demande a échoué - serviceworker.js: 1

Je ne comprends pas d'où vient cette erreur.

Le HTML et le CSS s'affichent comme prévu, mais lorsque je fais un audit PWA à partir des outils de développement Chrome, il affiche ces échecs. Ce sont «aucun travailleur de service», «aucun 200 en mode hors connexion» et «utilisateur non invité à installer l'application Web».

Toute aide est appréciée!

Merci d'avance!

*{
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: #4E5863;
}

.indexLogo{
  height: 180px;
  text-align: center;
  padding: 36px 0;
  border-bottom: 1px solid #E5E9F2;
}

.intuPotteriesLogo, .manchesterAirportLogo{
  width: 252px;
  height: auto;
}

.indexTitle{
  text-align: center;
  padding: 36px 0;
  font-weight: 500;
  border-bottom: 1px solid #E5E9F2;
  font-size: 24px;
}

header{
  width: 100%;
  text-align: center;
}

#headerStokeCityOfCulture{
  width: 100%;
}

#container{
  width: 100%;
  text-align: center;
}

.hotLinks{
  border: 2px solid #ABB5C3;
  width: 22%;
  margin: 10px 10px;
  display: inline-block;
}

.hotLinksLogos{
  width: 100%;
}

.hotLinksTitle{
  text-align: center;
  padding: 10px;
  border-top: 2px solid #ABB5C3;
}

.searchBarContainer{
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #E5E9F2;
}

.searchBox{
  width: 90%;
  height: 30px;
  font-size: 18px;
  text-align: center;
  background-color: #E5E9F2;
  border: none;
  color: black;
}

.bookingItem{
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #E5E9F2;
  text-decoration: none;
  font-size: 20px;
}

.bookingItemIcon{
  height: 60px;
}

.bookingItemLeft{
  width: 25%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.bookingItemRight{
  width: 65%;
  display: inline-block;
  vertical-align: middle;
  padding-left: 15px;
}

.bookingTitle{
  font-size: 20px;
  font-weight: 500;
}

.bookingAddress{
  font-size: 18px;
  font-weight: 400;
}

#searchPageContainer{
  height: 1200px;
  background-color: #F7F8F8;
  text-align: center;
}

.searchIdeas{
  padding: 10px;
  color: #515B64;
}

.searchIdeasFirstItem{
  padding-top: 40px;
}

.profileContainer{
  border-bottom: 1px solid #E5E9F2;
}

.profilePictureContainer{
  text-align: center;
  padding: 20px;
  display: inline-block;
}

#profilePicture{
  height: 100px;
}

#userName{
  padding-top: 5px;
}

.profileDetailsContainer{
  display: inline-block;
  vertical-align: top;
  padding: 20px;
  width: 55%;
}

#fullUserName{
  padding-bottom: 5px;
}

#usersHometown{
  padding-bottom: 15px;
}

.tripsFriendsPhotosContainer{
  width: 40%;
  display: inline-block;
}

.recentTripLogos{
  border: 2px solid #ABB5C3;
  width: 42%;
  margin: 20px 0 0 20px;
  display: inline-block;
}

fieldset{
  margin: 20px;
  border: none;
}

input[type=text]{
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=radio]{
  margin: 10px 0;
}

label{
  padding-right: 10px;
}

textarea{
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.formTitles{
  font-size: 20px;
  font-weight: 500;
}

#reviewInstructions{
  margin: 20px;
}

#submitButton{
  border-radius: 10px;
  padding: 10px;
  background-color: #48525E;
  color: white;
}

footer{
  width: 100%;
  text-align: center;
  border: 2px solid #ABB5C3;
  background-color: white;
  clear: both;
}

.footerLinks{
  display: inline-block;
  padding: 20px;
  text-decoration: none;
  color: black;
}

.footerIcons{
  height: 30px;
}

.discoverContainer, .discoverDescription, .discoverDirections, .discoverTitle, .discoverDirectionsTitle, .discoverReviewHeading,
.discoverReview, .discoverReviewTitle, .discoverContentPhotos, .bookingQrCodesContainer, .profileContainer, .container{
  width: 90%;
  margin: 0 auto;
}

.discoverContainer, .bookingQrCodesContainer, .profileContainer{
  text-align: center;
  margin-bottom: 20px;
}

.discoverPhotos{
  width: 40%;
}

.recentTripsContainer a img{
  width: 25%;
}

h1{
  font-size: 20px;
  padding: 10px 0;
}

h2{
  font-size: 16px;
}





@media screen
  and (max-width: 600px) {

  .profileContainer, .container{
    text-align: left;
    width: 100%;
  }

  body{
    margin-bottom: 70px;
  }

  .hotLinks{
    border: 2px solid #ABB5C3;
    width: 43%;
    margin: 20px 10px;
    display: inline-block;
  }

  .footerLinks{
    display: inline;
    padding: 0;
  }

  .footerIconsContainer{
    display: inline-block;
    text-align: center;
    width: 24%;
  }

  .footerIcons{
    height: 20px;
    padding: 10px 0 0;
  }

  .footerIconText{
    font-size: 16px;
    padding: 5px;
  }

  footer{
    width: 100%;
    text-align: center;
    border: 2px solid #ABB5C3;
    background-color: white;
    clear: both;
    position: fixed;
    bottom: 0;
  }

  .discoverContainer{
    width: 100%;
    text-align: center;
  }

  .discoverLogo{
    padding: 20px 10px;
    width: 40%;
    float: left;
  }

  .discoverAddress{
    padding: 20px;
    font-size: 20px;
    font-weight: 500;
  }

  .discoverDescription, .discoverDirections, .discoverReview{
    clear: both;
    padding: 0 20px;
  }

  .discoverDirectionsTitle, .discoverTitle, .memberSinceTitle, .reviewsTitle{
    font-size: 18px;
    font-weight: 500;
    padding: 20px 20px 0 20px;
  }

  .discoverReviewTitle{
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px 0 20px;
  }

  #map{
    width: 90%;
    height: 600px;
    margin: 20px auto;
    background-color: grey;
  }

  .discoverContentPhotos{
    width: 100%;
    text-align: center;
  }

  .discoverTitle{
    text-align: left;
  }

  .discoverPhotos{
    width: 46%;
    padding-top: 10px;
  }

  .bookingQrCodesContainer{
    text-align: center;
    padding-bottom: 30px;
  }

  .aboutUserTitle{
    font-size: 20px;
    padding-top: 20px;
  }

  .aboutUserText, .aboutUserTitle, .usersReview{
    padding-left: 20px;
    padding-right: 20px;
  }

  .reviewTitles{
    font-size: 16px;
    font-weight: 500;
    padding: 0 20px;
  }

  #submitReviewsButton{
    margin: 10px 0 0 20px;
    border-radius: 10px;
    padding: 10px;
    background-color: #48525E;
    color: white;
  }

  .reviewForm{
    margin-left: 20px;
  }

  #todaysWeatherTitle{
    margin-bottom: 15px;
  }

  #container-openweathermap-widget-12 > div{
    margin: 0 auto 100px;
  }

  .weather-left-card__wind, .weather-left-card__link, .weather-left-card__links span, .weather-left-card__rising{
    font-size: 16px !important;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <meta name="description" content="An application to learn about Stoke on Trent's events and places to visit!">
    <title>Voyage App</title>
    <link rel="stylesheet" href="style.css">
    <link rel="manifest" href="manifest.json">
    <link rel="icon" type="image/png" href="images/favicons.ico/favicon.ico" />
  </head>
  <body>
    <header>
      <h1 class="indexTitle">Discover Stoke-on-Trent</h1>
    </header>
    <picture id="headerStokeCityOfCulture">
      <source class="full-width" media="(min-width: 600px)" srcset="images/cityOfCulture-large.jpg">
      <source class="full-width" media="(min-width: 420px)" srcset="images/cityOfCulture-medium.jpg">
      <img src="images/cityOfCulture-small.jpg" alt="Stoke City of Culture" style="width:100%;">
    </picture>
    <div id="container">
      <a href="intupotteries.html">
        <div class="hotLinks">
          <img class="hotLinksLogos" src="images/intuPotteries.jpg" alt="intu Potteries Shopping Centre Logo">
          <h4 class="hotLinksTitle">intu Potteries</h4>
        </div>
      </a>
      <a href="emmabridgewater.html">
        <div class="hotLinks">
          <img class="hotLinksLogos" src="images/emmaBridgewater.jpg" alt="Emma Bridgewater Pottery Logo">
          <h4 class="hotLinksTitle">Emma Bridgewater</h4>
        </div>
      </a>
      <a href="altontowers.html">
        <div class="hotLinks">
          <img class="hotLinksLogos" src="images/altonTowers.jpg" alt="Alton Towers Theme Park Logo">
          <h4 class="hotLinksTitle">Alton Towers</h4>
        </div>
      </a>
      <a href="trenthamEstate.html">
        <div class="hotLinks">
          <img class="hotLinksLogos" src="images/trenthamEstate.jpg" alt="Trentham Estate Logo">
          <h4 class="hotLinksTitle">Trentham Estate</h4>
        </div>
      </a>
      <a href="bet365.html">
        <div class="hotLinks">
          <img class="hotLinksLogos" src="images/bet365.jpg" alt="Bet365 Stadium Logo - The home of Stoke City Football Club">
          <h4 class="hotLinksTitle">Bet365 Stadium</h4>
        </div>
      </a>
      <a href="freeportTalke.html">
        <div class="hotLinks">
          <img class="hotLinksLogos" src="images/freeportTalke.jpg" alt="Freeport Talke Shopping Centre Logo">
          <h4 class="hotLinksTitle">Freeport Talke</h4>
        </div>
      </a>
      <h4 id="todaysWeatherTitle">Todays Weather</h4>
      <div id="weatherContainer"></div>
    </div>
    <footer>
      <a class="footerLinks" href="index.html">
        <div id="discover" class="footerIconsContainer">
          <img class="footerIcons" src="images/binoculars.jpg" alt="Binoculars icon">
          <p class="footerIconText">Discover</p>
        </div>
      </a>
      <a class="footerLinks" href="bookings.html">
        <div id="bookings" class="footerIconsContainer">
          <img class="footerIcons" src="images/ticket.jpg" alt="Binoculars icon">
          <p class="footerIconText">Bookings</p>
        </div>
      </a>
      <a class="footerLinks" href="search.html">
        <div id="search" class="footerIconsContainer">
          <img class="footerIcons" src="images/search.jpg" alt="Binoculars icon">
          <p class="footerIconText">Search</p>
        </div>
      </a>
      <a class="footerLinks" href="account.html">
        <div id="account" class="footerIconsContainer">
          <img class="footerIcons" src="images/person.jpg" alt="Binoculars icon">
          <p class="footerIconText">Account</p>
        </div>
      </a>
    </footer>
    <script>
      if ('serviceWorker' in navigator) {
          navigator.serviceWorker.register('serviceworker.js').then(function(registration) {
          console.log('Service worker registered successfully', registration);
        }).catch(function(err) {
          console.log('Service worker registration failed: ', err);
        });
      };
    </script>
    <script src="https://www.gstatic.com/firebasejs/4.10.0/firebase.js"></script>
    <script src="serviceworker.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>
var cache_name = 'gih-cache';
var cached_urls = [
  'offline.html',
  'fourohfour.html',
  'account.html',
  'altontowers.html',
  'bet365.html',
  'booking-altonTowers.html',
  'booking-manchesterAirport.html',
  'booking-northStaffsHotel.html',
  'bookings.html',
  'emmabridgewater.html',
  'freeportTalke.html',
  'index.html',
  'intupotteries.html',
  'search.html',
  'trenthamEstate.html',
  'style.css'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cache_name)
    .then(function(cache) {
      return cache.addAll(cached_urls);
    })
  );
});

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheName.startsWith('pages-cache-') && staticCacheName !== cacheName) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
    console.log('Fetch event for ', event.request.url);
    event.respondWith(
      caches.match(event.request).then(function(response) {
        if (response) {
          console.log('Found ', event.request.url, ' in cache');
          return response;
        }
        console.log('Network request for ', event.request.url);
        return fetch(event.request).then(function(response) {
          if (response.status === 404) {
            return caches.match('fourohfour.html');
          }
          return caches.open(cached_urls).then(function(cache) {
           cache.put(event.request.url, response.clone());
            return response;
          });
        });
      }).catch(function(error) {
        console.log('Error, ', error);
        return caches.match('offline.html');
      })
    );
  });
19
K. Brennan 15 avril 2018 à 20:25

5 réponses

Meilleure réponse

Supprimez cette ligne:

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

Vous n'êtes pas censé inclure votre SW en tant que script dans la page. Vous n'êtes censé interagir avec lui qu'en appelant navigator.serviceWorker.register () comme vous le faites dans votre script ci-dessus.

Lighthouse ne le signale pas mais je m'assure: vous servez le site Web HTTPS à droite?

9
pate 16 avril 2018 à 04:06

J'ai eu la même erreur. Le journal d'erreurs est très succinct mais comme mentionné précédemment, il est très probable qu'il provienne d'une demande échouée du technicien de service pour demander la page du serveur.

L'astuce consiste à comprendre la étendue du travailleur de service. Par défaut, sa portée est le répertoire dans lequel il se trouve. Si vous accédez à votre script de service worker à partir de https://your.domain.com/static/service-worker.js, sa portée par défaut sera /static. Donc, si vous tapez cache.add('index.html'), il demandera en fait https://your.domain.com/static/index.html, ce qui entraînera une erreur si vous essayez d'obtenir https://your.domain.com/index.html. Deux solutions:

  • Accéder aux fichiers en utilisant des chemins relatifs: cache.add('../index.html')
  • Modifiez la portée lors de l'inscription:
    • Utilisez navigator.serviceWorker.register('static/service-worker.js', {scope: '/'})
    • Ajoutez l'en-tête HTTP Service-Worker-Allowed: / lors de la diffusion de votre site Web
6
Nino Filiu 11 févr. 2019 à 22:37

J'ai eu exactement la même erreur, en essayant de comprendre le concept PWA et l'API de cache, avec ce code (extrait)

    installEvent.waitUntil(
    caches.open(staticCacheName)
    .then( staticCache =>{
        // fichiers souhaités en cache
        staticCache.addAll([
            '/assets/font.txt', 
            '/assets/icon.txt'
        ])
        // fichiers à mettre impérativement en cache
        return staticCache.addAll([
            'css/stylesheet.css',
            'js/javascript.js'
        ])
    })
)

Le fait est que les fichiers du tableau étaient des noms fictifs. Quand j'ai créé pour de vrai les fichiers et les dossiers (css / stylesheet.css), le technicien a continué et l'erreur a disparu

0
Olivier Vanre 16 déc. 2019 à 16:55

J'avais une faute de frappe dans l'un des noms de fichiers que j'avais ajoutés à cached_urls. Il ne correspondait pas au nom du vrai fichier, j'ai donc continué à recevoir l'erreur

Je l'ai trouvé en définissant rapidement cached_urls sur une liste vide et j'ai constaté que l'erreur avait disparu.

25
Jerry Sha 27 nov. 2018 à 17:45

Ajouter '/'. Vos membres cached_urls vous demandent d'inclure le signe barre oblique:

var cached_urls = [
  '/offline.html',
  '/fourohfour.html',
  '/account.html',
  '/altontowers.html',
  '/bet365.html',
  '/booking-altonTowers.html',
  '/booking-manchesterAirport.html',
  '/booking-northStaffsHotel.html',
  '/bookings.html',
  '/emmabridgewater.html',
  '/freeportTalke.html',
  '/index.html',
  '/intupotteries.html',
  '/search.html',
  '/trenthamEstate.html',
  '/style.css'
];
8
Arnon Lauden 16 juin 2018 à 09:35