问题描述
我正在为大学项目创建渐进式Web应用程序,但是当我检查控制台时出现此错误:
I am creating a Progressive Web App for a university project, but when I checked the console I have this error:
我不明白这个错误的来源。
I don't understand where this error is coming from.
HTML和CSS按预期显示,但是当我从Chrome开发工具进行PWA审核时,它显示
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'.
任何帮助表示赞赏!
提前致谢!
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');
})
);
});
推荐答案
删除此行:
<script src="serviceworker.js"></script>
您不应该将SW作为脚本包含在页面中。你应该通过调用navigator.serviceWorker.register()来与它进行交互,就像你在上面的脚本中一样。
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.
Lighthouse没有报告它,但我' m确保:你服务网站公开HTTPS吗?
Lighthouse is not reporting it but I'm making sure: you're serving the website overt HTTPS right?
这篇关于未捕获(承诺)TypeError:请求失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!