//Cache polyfil to support cacheAPI in all browsers importScripts("./cache-polyfill.js"); var cacheName = "cache-v4"; //Files to save in cache var files = [ "./", "./index.html", //SW treats query string as new request "https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700", //caching 3rd party content "./assets/scripts.js", "./assets/style.js", "./manifest.webmanifest", "./assets/favicons/browserconfig.xml", "./assets/favicons/android-icon-36x36.png", "./assets/favicons/android-icon-48x48.png", "./assets/favicons/android-icon-72x72.png", "./assets/favicons/android-icon-96x96.png", "./assets/favicons/android-icon-144x144.png", "./assets/favicons/android-icon-192x192.png", "./assets/favicons/favicon-32x32.png", "./assets/favicons/favicon-16x16.png", "./assets/favicons/favicon-96x96.png", "./assets/favicons/favicon.ico", "https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js", ]; //Adding `install` event listener self.addEventListener("install", (event) => { console.info("Event: Install"); event.waitUntil( caches.open(cacheName).then((cache) => { //[] of files to cache & if any of the file not present `addAll` will fail return cache .addAll(files) .then(() => { console.info("All files are cached"); return self.skipWaiting(); //To forces the waiting service worker to become the active service worker }) .catch((error) => { console.error("Failed to cache", error); }); }) ); }); /* FETCH EVENT: triggered for every request made by index page, after install. */ //Adding `fetch` event listener self.addEventListener("fetch", (event) => { console.info("Event: Fetch"); var request = event.request; var url = new URL(request.url); if (url.origin === location.origin) { // Static files cache event.respondWith(cacheFirst(request)); } else { // Dynamic API cache event.respondWith(networkFirst(request)); } // // Checking for navigation preload response // if (event.preloadResponse) { // console.info('Using navigation preload'); // return response; // } }); async function cacheFirst(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request); } async function networkFirst(request) { const dynamicCache = await caches.open(cacheName); try { const networkResponse = await fetch(request); // Cache the dynamic API response dynamicCache.put(request, networkResponse.clone()).catch((err) => { console.warn(request.url + ": " + err.message); }); return networkResponse; } catch (err) { const cachedResponse = await dynamicCache.match(request); return cachedResponse; } } /* ACTIVATE EVENT: triggered once after registering, also used to clean up caches. */ //Adding `activate` event listener self.addEventListener("activate", (event) => { console.info("Event: Activate"); //Navigation preload is help us make parallel request while service worker is booting up. //Enable - chrome://flags/#enable-service-worker-navigation-preload //Support - Chrome 57 beta (behing the flag) //More info - https://developers.google.com/web/updates/2017/02/navigation-preload#the-problem // Check if navigationPreload is supported or not // if (self.registration.navigationPreload) { // self.registration.navigationPreload.enable(); // } // else if (!self.registration.navigationPreload) { // console.info('Your browser does not support navigation preload.'); // } //Remove old and unwanted caches event.waitUntil( caches .keys() .then((cacheNames) => { return Promise.all( cacheNames.map((cache) => { if (cache !== cacheName) { return caches.delete(cache); //Deleting the old cache (cache v1) } }) ); }) .then(function () { console.info("Old caches are cleared!"); // To tell the service worker to activate current one // instead of waiting for the old one to finish. return self.clients.claim(); }) ); }); /* PUSH EVENT: triggered everytime, when a push notification is received. */ //Adding `push` event listener self.addEventListener("push", (event) => { console.info("Event: Push"); var title = "Push notification demo"; var body = { body: "click to return to application", tag: "demo", icon: "./images/icons/apple-touch-icon.png", badge: "./images/icons/apple-touch-icon.png", //Custom actions buttons actions: [ { action: "yes", title: "I ♥ this app!" }, { action: "no", title: "I don't like this app" }, ], }; event.waitUntil(self.registration.showNotification(title, body)); }); /* BACKGROUND SYNC EVENT: triggers after `bg sync` registration and page has network connection. It will try and fetch github username, if its fulfills then sync is complete. If it fails, another sync is scheduled to retry (will will also waits for network connection) */ self.addEventListener("sync", (event) => { console.info("Event: Sync"); //Check registered sync name or emulated sync from devTools if (event.tag === "github" || event.tag === "test-tag-from-devtools") { event.waitUntil( //To check all opened tabs and send postMessage to those tabs self.clients .matchAll() .then((all) => { return all.map((client) => { return client.postMessage("online"); //To make fetch request, check app.js - line no: 122 }); }) .catch((error) => { console.error(error); }) ); } }); /* NOTIFICATION EVENT: triggered when user click the notification. */ //Adding `notification` click event listener self.addEventListener("notificationclick", (event) => { var url = "https://demopwa.in/"; //Listen to custom action buttons in push notification if (event.action === "yes") { console.log("I ♥ this app!"); } else if (event.action === "no") { console.warn("I don't like this app"); } event.notification.close(); //Close the notification //To open the app after clicking notification event.waitUntil( clients .matchAll({ type: "window", }) .then((clients) => { for (var i = 0; i < clients.length; i++) { var client = clients[i]; //If site is opened, focus to the site if (client.url === url && "focus" in client) { return client.focus(); } } //If site is cannot be opened, open in new window if (clients.openWindow) { return clients.openWindow("/"); } }) .catch((error) => { console.error(error); }) ); });