Can I Cache Map In Service Worker
What is Service Worker:
A service worker is a script that runs independently in the browser groundwork. On the user side, it can intercept its network requests and decide what to load (fetch).
Service workers mainly serve features like groundwork sync, button notifications and they are unremarkably used for'offline first' applications, giving the developers the opportunity to take complete control over the user feel.
Before information technology'due south time there has been API called AppCache, which has been trying to serve the offline experience feature. All the same, there have been numerous problems in the interface of the AppCache API and Service Workers are here, going over them.
The service worker life wheel:
The service worker lifecycle is completely separate from the web page. It's a programmable network proxy, which is terminated when it'southward not used and restarted when it'south next needed. Service Workers heavily rely on the use of Javascript Promises , so it's skilful to go over them if they are new to y'all.
During installation, the service worker can cache some static avails like web pages. If the browser cache the files successfully, the service worker gets installed.
Afterwards, the worker needs to exist activated. During activation the service worker tin manage and decide what to happen to the one-time caches, typically they are existence deleted and replaced with the new versions.
Lastly, after activation, the service worker takes control over all pages in his telescopic, without the folio which initially registered the service worker, which needs to exist refreshed. The service worker is smart in terms of retentiveness usage and volition exist terminated if at that place is nothing to fetch and there are no message events occurring.
Below is a picture of the place of a service worker between the browser and the network.
The website request chain using Service Worker.
Prerequisites :
- HTTPS unless on localhost
- Service workers require the use of HTTPS connection. Before deployment, the workers does work under the localhost server but if you want to upload it to the internet you lot need to take the HTTPS setup on your server. Ane good place to host costless demos are the GitHub Pages, which are server over HTTPS.
- Browser back up
- Service Workers are highly supported over the internet by Chrome, Firefox, Opera, Safari and Edge, which makes them worthy for deployment.
Registration:
To set upward a service worker it needs to be registered. This is done in your page's Javascript. In one case a service worker is registered this volition cause the browser to showtime installing it in the background.
if (navigator.serviceWorker) {
window.addEventListener( 'load' , () => {
navigator.serviceWorker
.register('/service_worker.js ')
// Gives us registration object
.then(reg => console.log(' Service Worker Registered'))
. catch (swErr => console.log(
`Service Worker Installation Error: ${swErr}}`));
});
}
Installing:
After the service worker gets registered it needs to be installed, this is washed in the service worker file and where you typically desire to fetch your enshroud assets.
The following steps demand to exist taken:
- Open a cache
- Cache the assets
- Ostend if the caching is successful
var cacheName = 'geeks-cache-v1' ;
var cacheAssets = [
'/avails/pages/offline-page.html' ,
'/assets/styles/offline-page.css' ,
'/assets/script/offline-folio.js' ,
];
self.addEventListener( 'install' , e => {
e.waitUntil(
caches.open(cacheName)
.and then(cache => {
console.log(`Service Worker: Caching Files: ${cache}`);
enshroud.addAll(cacheAssets)
.and so(() => self.skipWaiting())
})
);
})
Activating:
self.addEventListener( 'activate' , e => {
console.log( 'Service Worker: Activated' );
e.waitUntil(
caches.keys().then(cacheNames => {
return Hope.all(
cacheNames.map(
cache => {
if (cache !== cacheName) {
console.log( 'Service Worker: Clearing Old Cache' );
render caches. delete (cache);
}
}
)
)
})
);
})
Fetching upshot:
Once the service worker is set up, information technology should starting time to collaborate and apply the cached responses. When a particular user navigates through the web pages, the service worker begins to receive fetch events. The following case demonstrates a instance when the worker receives a fetch effect and search for a matching cache if in that location is one, it returns the cached file/value, otherwise, it returns the default response of the call to fetch
var cacheName = 'geeks-enshroud-v1' ;
self.addEventListener( 'fetch' , e => {
console.log( 'Service Worker: Fetching' );
e.respondWith(
fetch(e.request)
.then(res => {
const resClone = res.clone();
caches.open up(cacheName)
.then(cache => {
cache.put(due east.request, resClone);
});
return res;
}). catch (
err => caches.lucifer(e.request)
.so(res => res)
)
);
});
Service Worker can't:'
Still, the Service Worker can:
Common use cases:
Reference: https://developers.google.com/web/fundamentals/primers/service-workers/
Can I Cache Map In Service Worker,
Source: https://www.geeksforgeeks.org/service-workers-in-javascript/
Posted by: henryresprommed.blogspot.com
0 Response to "Can I Cache Map In Service Worker"
Post a Comment