未捕獲（承諾）類型錯誤：請求失敗

Question

我正在為大學項目創建一個漸進式 Web 應用程序，但是當我檢查控制台時出現此錯誤：

未捕獲（承諾）類型錯誤：請求失敗 - 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'); }) ); });

Answer 1

我在添加到 cached_urls 的文件名之一中有拼寫錯誤。 它與真實文件的名稱不匹配，所以我不斷收到錯誤消息

我通過快速將 cached_urls 設置為空列表來找到它，發現錯誤消失了。

Answer 2

刪除這一行：

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

您不應該將您的軟件作為腳本包含在頁面中。 您只應該像在上面的腳本中一樣通過調用navigator.serviceWorker.register()與它進行交互。

Lighthouse 沒有報告它，但我確定：您正在為網站提供公開的 HTTPS 服務，對嗎？

Answer 3

我有同樣的錯誤。 錯誤日志非常簡潔，但如前所述，它很可能源自 Service Worker 向服務器請求頁面的失敗請求。

訣竅是了解服務工作者范圍。 默認情況下，它的范圍是它所在的目錄。如果你從https://your.domain.com/static/service-worker.js訪問你的 service worker 腳本，它的默認范圍將是/static 。 因此，如果您鍵入cache.add('index.html') ，它實際上會請求https://your.domain.com/static/index.html ，如果您嘗試獲取https://your.domain.com/index.html ，則會導致錯誤https://your.domain.com/index.html 。 兩種解決方案：

• 使用相對路徑訪問文件： cache.add('../index.html')
• 注冊時更改范圍：
  • 使用navigator.serviceWorker.register('static/service-worker.js', {scope: '/'})
  • 在為您的網站提供服務時添加 HTTP 標頭Service-Worker-Allowed: /

Answer 4

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

Answer 5

我有完全相同的錯誤，試圖找出 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'
        ])
    })
)

事實是數組中的文件是虛擬名稱。 當我真正創建文件和文件夾（css/stylesheet.css）時，服務工作者繼續，錯誤消失了

Answer 6

加了“。” 在“filesToCache”中的所有路徑之前，例如：“/index.html”更改為“./index.html”並且它可以工作。 加油！