Service Workers are a special type of Web Worker with the ability to intercept, modify, and respond to all network requests using the Fetch API. Service Workers can access the Cache API, and asynchronous client-side data stores, such as IndexedDB, to store resources.
Micrsoft docs Service worker explanation
Kongsberg Vessel Insight worker-registration.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/pwa-assets/ngsw-worker.js', { scope: '/' });
}Events
Service Workers in JavaScript have several event listeners that are used to manage their lifecycle and handle network requests. Here are some of the most common ones:
install: This event is fired when the service worker is being installed. It’s often used to cache resources.
self.addEventListener('install', event => {
// Perform install steps
});
activate: This event is fired when the service worker starts. It’s often used to clean up old caches.
self.addEventListener('activate', event => {
// Perform activate steps
});
fetch: This event is fired for every network request made by your site. It’s used to intercept requests and handle them within the service worker.
self.addEventListener('fetch', event => {
// Handle fetch event
});
message: This event is fired when the service worker receives a message from a page it controls. This can be used to communicate between the service worker and its controlled pages.
self.addEventListener('message', event => {
// Handle message event
});
push: This event is fired when a push message is received. This is used in conjunction with the Push API.
self.addEventListener('push', event => {
// Handle push event
});
sync: This event is fired when a sync event is fired. It’s used in conjunction with the Background Sync API to allow deferring actions until the user has stable connectivity.
Sample forContact_Manager application
// Define some variables
const CACHE_NAME = 'contact-manager-cache-v1';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js',
'/images/profile.png',
// Add more URLs as needed
];
// Install event
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
// Fetch event
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Cache hit - return response
if (response) {
return response;
}
// Clone the request. A request is a stream and
// can only be consumed once. We need to make a copy
// of the request before using it in fetch() as fetch()
// will consume the request.
const fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
response => {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
// Activate event
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
/**
This service worker does not include an 'online' event listener because service workers do not have access to the 'online' and 'offline' events. You would typically handle network status changes in your main JavaScript code, not in the service worker.
**/Angular Service Workers
- https://blog.angular-university.io/angular-service-worker/
- In angular.json set serviceWorker as true
- ngsw.json helps to configure Service Workers
- Here the files that have to be cached. Caching
Questions
- What is ashared_worker in Service Workers, found this in Leetcode when going through Chrome Task manager?