web-dev-qa-db-fra.com

Non capturé (promis) TypeError: la requête a échoué

Je crée une application Web progressive pour un projet universitaire, mais lorsque j'ai vérifié la console, le message d'erreur suivant s'affiche:

Non capturé (promis) TypeError: la requête a échoué - serviceworker.js: 1

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

Les codes HTML et CSS s'affichent comme prévu, mais lorsque je fais un audit PWA à partir des outils de développement Chrome, il affiche ces échecs. Ils sont 'pas de service worker', 'no 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');
      })
    );
  });

javascripthtmlcssprogressive-web-appsuncaught-typeerror
8
K. Brennan

Supprimer cette ligne:

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

Vous n'êtes pas censé inclure votre logiciel sous forme de script dans la page. Vous êtes uniquement censé interagir avec elle en appelant navigator.serviceWorker.register () comme vous le feriez dans votre script ci-dessus.

Lighthouse ne le signale pas mais je m'assure que vous servez le site Web en HTTPS, n'est-ce pas? 

5
pate

J'ai eu une faute de frappe dans l'un des noms de fichiers que j'avais ajoutés à cached_urls. Il ne correspond pas au nom du fichier réel, je continue donc à avoir 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.

9
Jerry Sha

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'
];

2
Arnon Lauden

J'ai eu la même erreur. Le journal des 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 demandant une page du serveur.

L'astuce consiste à comprendre la portée de service worker . Par défaut, son étendue est le répertoire dans lequel il se trouve. Si vous accédez à votre script Service worker à partir de https://your.domain.com/static/service-worker.js, son étendue par défaut sera /static. Ainsi, 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')
  • Changez l’étendue lors de l’enregistrement:
    • 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.
0
Nino Filiu