web-dev-qa-db-ja.com

キャッチされていない（約束）TypeError：要求が失敗しました

私は大学のプロジェクト用にプログレッシブWebアプリを作成していますが、コンソールを確認したときにこのエラーが発生しています：

キャッチされていない（約束）TypeError：要求が失敗しました-serviceworker.js：1

このエラーの原因はわかりません。

HTMLとCSSは期待どおりに表示されますが、Chrome Dev ToolsからPWA監査を行うと、 これらのエラー。「サービスワーカーなし」、「 「オフライン時に200なし」および「ユーザーがWebアプリのインストールを求められない」

どんな助けも大歓迎です！

前もって感謝します！

*{
  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-appstypeerror
14
K. Brennan

この行を削除します。

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

SWをスクリプトとしてページに含めることは想定されていません。上記のスクリプトで行うように、navigator.serviceWorker.register（）を呼び出すことによってのみ対話することになっています。

Lighthouseはそれを報告していませんが、私は確認しています：あなたはウェブサイトに明白なHTTPSを提供していますか？

7
pate

Cached_urlsに追加したファイル名の1つにタイプミスがありました。実際のファイルの名前と一致しなかったため、エラーが発生し続けました

私はすぐにcached_urlsを空のリストに設定することでそれを見つけ、エラーがなくなったことを見つけました。

17
Jerry Sha

追加 '/'。 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'
];
6
Arnon Lauden

同じエラーが発生しました。エラーログは非常に簡潔ですが、前述のように、サーバーからページを要求するサービスワーカーからの失敗した要求に起因する可能性が非常に高くなります。

秘Theは、 サービスワーカーのスコープ を理解することです。デフォルトでは、そのスコープはそれが入っているディレクトリです。サービスワーカースクリプトに_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_を取得しようとした場合にエラーになります。 2つのソリューション：

  • 相対パスを使用してファイルにアクセスする：cache.add('../index.html')
  • 登録時にスコープを変更します：
    • navigator.serviceWorker.register('static/service-worker.js', {scope: '/'})を使用します
    • Webサイトの提供時にHTTPヘッダー_Service-Worker-Allowed: /_を追加します
4
Nino Filiu