Service Worker is a new concept to me. As I delved into learning how to incorporate Service Worker into My Next.js Application, I encountered an issue with the fetch event handler. Oddly enough, the fetch event handler doesn't trigger upon initially registering the service worker. However, upon refreshing the page, it functions perfectly fine and I am baffled by this behavior. Here is the structure of my app's public folder:
/public
/assets
/icons
manifest.json
service-worker.js
service-worker-registration.js
manifest.js:
{
"name": "FakeHulu",
"short_name": "FakeHulu",
"description": "My Own version of Hulu",
"icons": [
{
"src": "/icons/manifest-icon-192.maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
}, ...
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"start_url": "/",
"display": "fullscreen",
"orientation": "portrait"
}
service-worker-registration.js:
if("serviceWorker" in navigator){
window.navigator.serviceWorker.register("/service-worker.js", { scope: '/' }).then(sw => console.log("serviceWorker Supported and register"))
}
service-worker.js:
self.addEventListener("install" , evt => {
evt.waitUntil(caches.open("main_cache").then(cache => cache.addAll(["/", "/something"])));
self.skipWaiting();
});
self.addEventListener("activate" , evt => {
console.log(evt);
clients.claim();
});
self.addEventListener("fetch" , evt => {
console.log(evt);
});