如何解决离线时空白页
当我离线时,我只能看到一个空白页。我一直在尝试从offline.html删除清单,但是没有用。我认为我在offline.html中写错了。但是我不知道是什么。帮我。我做错了什么?
https://thirsty-hopper-b0ad0a.netlify.app/
#serviceworker.js
const CACHE_NAME = "version-1";
const urlsToCache = [ 'index.html','offline.html' ];
const self = this;
// Install SW
self.addEventListener('install',(event) => {
event.waitUntil(
caches.open(CACHE_NAME)
.then((cache) => {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
)
});
// Listen for requests
self.addEventListener('fetch',(event) => {
event.respondWith(
caches.match(event.request)
.then(() => {
return fetch(event.request)
.catch(() => caches.match('offline.html'))
})
)
});
// Activate the SW
self.addEventListener('activate',(event) => {
const cacheWhitelist = [];
cacheWhitelist.push(CACHE_NAME);
event.waitUntil(
caches.keys().then((cacheNames) => Promise.all(
cacheNames.map((cacheName) => {
if(!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
))
)
});
#manifest.json
{
"short_name": "Pizza Joint","name": "Pizza Joint","icons": [
{
"src":"./icons/android-chrome-192x192.png","sizes":"192x192","type":"image/png"
},{
"src":"./icons/android-chrome-512x512.png","sizes":"512x512",{
"src":"./icons/apple-touch-icon.png","sizes":"180x180",{
"src":"./icons/favicon-16x16.png","sizes":"16x16",{
"src":"./icons/favicon-32x32.png","sizes":"32x32","type":"image/png"
}
],"start_url": "/","display": "standalone","theme_color": "#161616","background_color": "#161616"
}
#index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./icons/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#161616" />
<meta name="description" content="Best app for ordering your favorite pizza" />
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
<link rel="manifest" href="./manifest.json" />
<title>Pizza Joint</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load',() => {
navigator.serviceWorker.register('./serviceworker.js')
.then((reg) => console.log('Success: ',reg.scope))
.catch((err) => console.log('Failure: ',err));
});
} else {
console.log('Service Worker is not supported by browser.');
}
</script>
</body>
</html>
#offline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./icons/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#161616" />
<meta name="description" content="Best app for ordering your favorite pizza" />
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png" />
<title>Pizza Joint</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load',err));
});
} else {
console.log('Service Worker is not supported by browser.');
}
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。