我一直在做一个用 HTML、CSS 和 JS 编写的项目，并在屏幕上随机显示不同的视频。我希望它是一个 PWA，所以它做到了。它工作得很好，但是当我打开 Chrome DevTools 和“应用程序”页面时，在“清单”部分它会抛出一个警告：“没有检测到匹配的服务工作人员。您可能需要重新加载页面，或者检查服务工作人员的当前页面还控制清单中的起始 URL。”
我对服务人员了解不多，我想知道为什么它有效，但似乎无效。另一个问题是我从来没有弹出“添加到主屏幕”。但是如果我手动添加它，它会完美运行。它也可以离线工作。
网站链接：https ://ondersumer07.github.io/vinematik/
我的 main.js 中的服务人员代码：
window.addEventListener("load", () => {
registerSW();
});
async function registerSW() {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('./sw.js');
} catch (e) {
console.log(`SW registration failed`);
}
}
}
我的 sw.js：
//CACHING FILES//
const filesToCache = [
'./',
'./offline.html',
'./css/offline.css',
];
const staticCacheName = 'pages-cache-v2';
self.addEventListener('install', event => {
console.log('Attempting to install service worker and cache static assets');
event.waitUntil(
caches.open(staticCacheName)
.then(cache => {
return cache.addAll(filesToCache);
})
);
});
//LOADING FILES WHEN OFFLINE//
self.addEventListener('fetch', event => {
console.log('Fetch event for ', event.request.url);
event.respondWith(
caches.match(event.request)
.then(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(response => {
// TODO 5 - Respond with custom 404 page
return caches.open(staticCacheName).then(cache => {
cache.put(event.request.url, response.clone());
return response;
});
});
}).catch(error => {
console.log('Error, ', error);
return caches.match('./offline.html');
})
);
});
// TODO 6 - Respond with custom offline page
self.addEventListener('activate', event => {
console.log('Activating new service worker...');
const cacheWhitelist = [staticCacheName];
}
})
);
})
);
});
哈士奇WWW
相关分类