Неподготовлено (в обещании) TypeError: запрос не выполнен

Я создаю Progressive Web App для университетского проекта, но когда я проверял консоль, у меня появляется эта ошибка:

Uncaught (in promise) TypeError: Request failed - serviceworker.js:1

Я не понимаю, откуда эта ошибка.

HTML и CSS отображаются, как и ожидалось, но когда я делаю аудит PWA из Chrome Dev Tools, он показывает эти сбои. Это "нет работника службы", "нет 200 в автономном режиме" и "пользователю не предлагается установить веб-приложение".

Любая помощь приветствуется!

Заранее спасибо! 

*{
  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 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>

ОТВЕТЫ

Ответ 1

Удалите эту строку:

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

Вы не должны включать свой SW в качестве скрипта на странице. Вы должны только взаимодействовать с ним, вызывая navigator.serviceWorker.register(), как вы это делаете в своем сценарии выше.

Маяк не сообщает об этом, но я уверен: вы обслуживаете веб-сайт с открытым HTTPS?

Ответ 2

У меня была опечатка в одном из имен файлов, которые я добавил в cached_urls. Он не соответствует имени реального файла, поэтому я продолжал получать сообщение об ошибке

Я нашел это, быстро установив cached_urls в пустой список и обнаружил, что ошибка исчезла.

Ответ 3

Добавлять '/'. Ваши члены cached_urls требуют, чтобы вы указали знак косой черты:

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

Ответ 4

У меня была такая же ошибка. Журнал ошибок очень лаконичен, но, как упоминалось ранее, очень вероятно, что он возник из неудачного запроса работника службы для запроса страницы с сервера.

Хитрость заключается в том, чтобы понять область работника службы. По умолчанию его областью является каталог, в котором он находится. Если вы обращаетесь к своему рабочему сценарию из https://your.domain.com/static/service-worker.js, его областью по умолчанию будет /static. Таким образом, если вы введете cache.add('index.html'), он фактически запросит https://your.domain.com/static/index.html, что приведет к ошибке, если вы пытаетесь получить https://your.domain.com/index.html. Два решения:

  • Доступ к файлам с использованием относительных путей: cache.add('../index.html')
  • Изменить область при регистрации:
    • Используйте navigator.serviceWorker.register('static/service-worker.js', {scope: '/'})
    • Добавьте заголовок HTTP Service-Worker-Allowed: / при обслуживании вашего сайта

Ответ 5

Я столкнулся с той же ошибкой. Оказалось, что у меня неверный путь к кешированному файлу в cache.addAll(). Исправление пути избавило от ошибки.