Service Workers
Javascript Tutorial
Javascript Service workers
Have website-wise Service Workers
Service Workers
Find if browser supports Service Worker
To Check if the browser support supports the service worker API, user the following program code using a javascript.
- Include the following javascript code in the HTML file one wants to use check the service
- Recommended
- Include service worker .js file in the root folder
- Include the scope as a root / while registering the service worker
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Worker Sample</title>
</head>
<body>
<script type="module" src="/js/app.js"></script>
</body>
</html>Copy
/js/app.js
const APP = {
SW: null,
init: function () {
if ('serviceWorker' in navigator) {
/*1. See if page currently has service workers*/
console.log('Service worker IS supported by the Browser');
} else {
console.log('Service worker NOT supported by the Browser');
}
}
};
document.addEventListener('DOMContentLoaded', APP.init);Copy
/service-worker.js
/*Service Worker Javacsript file*/
console.log("Service worker is Running");Copy
Register Service worker file with scope
Register the javascript file to the browser's (navigator's) service worker services.
- Use the browser's serviceWorker object to register javascript (service-worker.js) file with the scope of "/" root or the path one wants to monitor.
Register Service Worker
navigator.serviceWorker.register("/service-worker.js",
{
scope: '/'
}
);Copy
app.js
const APP = {
SW: null,
init: function () {
if ('serviceWorker' in navigator) {
/*1. See if page currently has service workers*/
console.log('Service worker IS supported by the Browser');
navigator.serviceWorker.register("/service-worker.js", {
scope: '/'
});
} else {
console.log('Service worker NOT supported by the Browser');
}
}
};
document.addEventListener('DOMContentLoaded', APP.init);Copy
Get the registered Service Worker
Registering service worker using navigator.serviceWorker.register will return a Promise
Register service worker
navigator.serviceWorker.register("/service-worker.js", {
scope: "/"
})
.then(registration => {
APP.SW = registration.installing || registration.waiting || registration.active;
console.log('Service Worker Registered');
})Copy
Event listener on Service Worker change
Add an event listener on changing or updating or creating a new service worker
Event listener
navigator.serviceWorker.oncontrollerchange = (ev) =>{
console.log('GRS: New service worker activated')
}Copy
Unregister or delete all registered Service Workers
Delete or unregister the service workers using the following code
Event listener
/* Remove / unregister/ Delete the service workers */
navigator.serviceWorker.getRegistrations().then((regs)=>{
console.log('Inside unregister / delete function');
for(let reg of regs){
console.log('inside unregister for loop');
reg.unregister().then((isUnreg)=>{
console.log("Is it Unregistered?: ",isUnreg);
})
}
});Copy
Full life cycle of the Service Worker - sample programs
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Worker Sample</title>
</head>
<body>
<script type="module" src="/js/app.js"></script>
</body>
</html>Copy
/js/app.js
const APP = {
SW: null,
init() {
if ('serviceWorker' in navigator) {
console.log('Service worker IS supported by the Browser');
try {
navigator.serviceWorker.register("/service-worker.js", {
scope: "/"
})
.then(registration => {
APP.SW = registration.installing || registration.waiting || registration.active;
console.log('Service Worker Registered');
if (registration.installing) {
console.log('ServiceWorker - Installing');
} else if (registration.waiting) {
console.log('ServiceWorker - Waiting');
} else if (registration.active) {
console.log('ServiceWorker - Active')
}
})
} catch (error) {
console.log('Cannot do Service Worker Registration');
}
/* Check if Service worker controller is installed */
if (navigator.serviceWorker.controller) {
console.log("Service worker is installed?? Yes");
} else {
console.log('Service worker is NOT installed');
}
/* Event listener for Service worker change */
navigator.serviceWorker.oncontrollerchange = (ev) => {
console.log('GRS: New service worker activated')
}
/* Remove / unregister/ Delete the service workers */
navigator.serviceWorker.getRegistrations().then((regs)=>{
console.log('Inside unregister / delete function');
for(let reg of regs){
console.log('inside unregister for loop');
reg.unregister().then((isUnreg)=>{
console.log("Is it Unregistered?: ",isUnreg);
})
}
})
}
else {
console.log('Service worker NOT supported by the Browser');
}
}
}
document.addEventListener('DOMContentLoaded', APP.init);Copy
/service-worker.js
/*Service Worker Javacsript file*/
console.log('Service Worker : RUNNING from Root Directory');
console.log('The Service worker Object with braces: ', {self});
self.addEventListener('install',(ev)=>{
//Service worker installed
console.log('GRSEvent: Service worker installed');
})
self.addEventListener('activate',(ev)=>{
//Service worker activated
console.log('GRSEvent: Service worker activated');
})
self.addEventListener('fetch',(ev)=>{
//Service worker interrupts a http request
console.log('GRSEvent: Intercepted a http request',ev.request);
})
self.addEventListener('message',(ev)=>{
//Service worker will return a message for a request
console.log('GRSEvent: Message intercepted');
})Copy