Javascript 未捕获（承诺）类型错误：请求失败

Uncaught (in promise) TypeError: Request failed

提问by K. Brennan

I am creating a Progressive Web App for a university project, but when I checked the console I have this error:

我正在为大学项目创建一个渐进式 Web 应用程序，但是当我检查控制台时出现此错误：

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

未捕获（承诺）类型错误：请求失败 - serviceworker.js:1

I don't understand where this error is coming from.

我不明白这个错误是从哪里来的。

The HTML and CSS are showing on as expected, but when I do a PWA audit from the Chrome Dev Tools, it's showing these failures. They are 'no service worker', 'no 200 when offline' and 'user not prompted to install web app'.

HTML 和 CSS 正按预期显示，但是当我从 Chrome Dev Tools 进行 PWA 审核时，它显示了这些失败。它们是“无服务工作者”、“离线时无 200”和“用户未提示安装 Web 应用程序”。

Any help is appreciated!

任何帮助表示赞赏！

Thanks in advance!

提前致谢！

*{
  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');
      })
    );
  });

采纳答案by pate

Remove this line:

删除这一行：

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

You're not supposed to include your SW as a script in the page. You're only supposed to interact with it by calling the navigator.serviceWorker.register() as you do in your script above.

您不应该将您的软件作为脚本包含在页面中。您只应该像在上面的脚本中一样通过调用 navigator.serviceWorker.register() 与它进行交互。

Lighthouse is not reporting it but I'm making sure: you're serving the website overt HTTPS right?

Lighthouse 没有报告它，但我确定：您正在为网站提供公开的 HTTPS 服务，对吗？

回答by Jerry Sha

I had a typo in one of the filenames that I had added to cached_urls. It did not match the name of the real file so I kept getting the error

我在添加到 cached_urls 的文件名之一中有拼写错误。它与真实文件的名称不匹配，所以我不断收到错误消息

I found it by quickly setting cached_urls to an empty list and found that the error went away.

我通过快速将 cached_urls 设置为空列表来找到它，发现错误消失了。

回答by Nino Filiu

I had the same error. The error log is very succint but as previously mentionned, it is very likely to originate from failed request from the service worker to request page from the server.

我有同样的错误。错误日志非常简洁，但如前所述，它很可能源自 Service Worker 向服务器请求页面的失败请求。

The trick is to understand the service worker scope. By default, its scope is the directory it's in. If you access your service worker script from https://your.domain.com/static/service-worker.js, its default scope will be /static. So, if you type cache.add('index.html'), it will actually request https://your.domain.com/static/index.html, which will result in an error if you were trying to get https://your.domain.com/index.html. Two solutions:

诀窍是了解服务工作者范围。默认情况下，它的范围是它所在的目录。如果你从 访问你的服务工作者脚本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。两种解决方案：

• Access files using relative paths: cache.add('../index.html')
• Change the scope when registering:
  • Use navigator.serviceWorker.register('static/service-worker.js', {scope: '/'})
  • Add the HTTP header Service-Worker-Allowed: /when serving your website

• 使用相对路径访问文件： cache.add('../index.html')
• 注册时更改范围：
  • 用 navigator.serviceWorker.register('static/service-worker.js', {scope: '/'})
  • Service-Worker-Allowed: /在为您的网站提供服务时添加 HTTP 标头

回答by Arnon Lauden

Add '/'. Your cached_urls members require you to include the slash sign:

添加 '/'。您的 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'
];

回答by Olivier Vanre

i had exactly the same error, trying to figure out the PWA concept and cache API, with this code (extract)

我有完全相同的错误，试图找出 PWA 概念和缓存 API，使用此代码（摘录）

    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'
        ])
    })
)

the fact is that the files in the array were dummy names. When i created for real the files and the folders (css/stylesheet.css), the service worker went on, and the error disappeared

事实是数组中的文件是虚拟名称。当我真正创建文件和文件夹（css/stylesheet.css）时，服务工作者继续，错误消失了