A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features which don't need a web page or user interaction. It's essentially an event-driven programmable network proxy allowing you to control how network requests from your page are handled. With it, you can create offline experiences, intercept network requests and take appropriate action based on whether the network is available, and modify the contents of responses.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker .register('/sw.js') .then(registration => { console.log('Service Worker registered: ', registration); }) .catch(err => { console.log('Registration failed: ', err); }); }); }The code above registers our service worker file (sw.js). This will allow us to use all of its features such as caching assets for offline access and responding to push notifications.
In order to use the Service Worker API, you must first register your service worker script. This is done by calling navigator.serviceWorker.register(), passing in the URL of your service worker script as an argument. For example:
navigator.serviceWorker.register('/sw.js');The registration process will return a promise that resolves with a ServiceWorkerRegistration object.. You can then use this object to access various properties and methods related to the registered service worker.
Now that you understand what a service worker is and have registered your script, it's time to install the service worker. To do this, you need to use the navigator.serviceWorker.register() method in your JavaScript code. This will register the service worker with the browser and start listening for events such as push notifications or background sync requests.
// Register our service worker
navigator.serviceWorker.register('/sw.js')
.then(function (registration) {
console.log('Service Worker registration successful');
})
.catch(function (err) {
console.log('Service Worker registration failed: ', err);
});