165
rated 0 times
[
172]
[
7]
/ answers: 1 / hits: 48636
/ 6 Years ago, sun, april 15, 2018, 12:00:00
I am creating a Progressive Web App for a university project, but when I checked the console I have this error:
Uncaught (in promise) TypeError: Request failed - 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'.
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');
})
);
});
More From » html
