टाइपस्क्रिप्ट में सर्विस वर्कर

Articles

यह लेख टाइपस्क्रिप्ट में सर्विस वर्कर्स को समझाता है।

हम टाइपस्क्रिप्ट में सर्विस वर्कर्स को व्यावहारिक उदाहरणों सहित समझाएंगे।

YouTube Video

टाइपस्क्रिप्ट में सर्विस वर्कर

सर्विस वर्कर एक 'रिक्वेस्ट प्रॉक्सी' है जो ब्राउज़र और नेटवर्क के बीच बैठता है। यह fetch इंटरसेप्शन, कैश नियंत्रण, ऑफ़लाइन समर्थन और बैकग्राउंड प्रोसेसिंग (सिंक और पुश) को सक्षम बनाता है। टाइपस्क्रिप्ट का उपयोग करने से टाइप सेफ्टी मिलती है और मेंटेनबिलिटी बढ़ती है।

टाइपस्क्रिप्ट सेटअप करना

`tsconfig.json` (WebWorker टाइप्स को सक्षम करें)

आइए देखे कि tsconfig.json में वेबवर्कर टाइप को कैसे सक्षम किया जाता है।

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ES2020",
 5    "lib": ["ES2020", "WebWorker"],
 6    "moduleResolution": "Bundler",
 7    "strict": true,
 8    "noEmitOnError": true,
 9    "outDir": "out",
10    "skipLibCheck": true
11  },
12  "include": ["sw.ts"]
13}

lib ऐरे में WebWorker जोड़ने से आप ServiceWorkerGlobalScope जैसे टाइप्स का उपयोग कर सकते हैं।
DOM और WebWorker के प्रकार अलग-अलग होते हैं, इसलिए ब्राउज़र (मुख्य ऐप) और Service Worker के लिए tsconfig.json सेटिंग्स को अलग रखना सामान्य प्रथा है।
Service Worker फ़ाइलें अंततः उस पथ पर आउटपुट की जाती हैं जो स्कोप से मेल खाता है (आमतौर पर साइट रूट /sw.js)।
सुरक्षा कारणों से, सर्विस वर्कर केवल HTTPS (या localhost) पर चलते हैं।

ब्राउज़र पक्ष पर पंजीकरण कोड

`register-sw.ts`

1// register-sw.ts
2async function registerServiceWorker() {
3  if (!('serviceWorker' in navigator)) return;
4
5  try {
6    const registration = await navigator.serviceWorker.register(
7      '/sw.js', { scope: '/' }
8    );

यह प्रक्रिया एक Service Worker को पंजीकृत करती है। scope से तात्पर्य है उन पथों की सीमा जिसे Service Worker नियंत्रित कर सकता है। उदाहरण के लिए, यदि आप /sw.js को सीधे रूट के नीचे रखते हैं और scope को रूट डायरेक्टरी (/) पर सेट करते हैं, तो आप पूरी साइट के सभी संसाधनों को नियंत्रित कर सकते हैं। दूसरी ओर, यदि आप किसी विशिष्ट डायरेक्टरी जैसे /app/ निर्दिष्ट करते हैं, तो केवल उस डायरेक्टरी के अंतर्गत आने वाली सामग्री ही नियंत्रित होगी।

1    // If there's a waiting worker, notify the user.
2    if (registration.waiting) {
3      promptUserToUpdate(registration);
4    }

waiting दर्शाता है कि एक नया Service Worker स्थापित हो गया है और सक्रिय होने की प्रतीक्षा कर रहा है। इस चरण में, मौजूदा पृष्ठ अभी भी पुराने Service Worker द्वारा नियंत्रित होते हैं, इसलिए आमतौर पर उपयोगकर्ता से पुष्टिकरण के लिए कहा जाता है, और स्वीकृति मिलने के बाद, skipWaiting() को कॉल करके नए Service Worker को तुरंत सक्रिय किया जाता है। यह आपको अगली पृष्ठ पुनः लोड होने की प्रतीक्षा किए बिना नवीनतम प्रक्रियाओं को लागू करने की अनुमति देता है।

 1    // When a new SW is installing, monitor its state changes
 2    registration.addEventListener('updatefound', () => {
 3      const newWorker = registration.installing;
 4      if (!newWorker) return;
 5      newWorker.addEventListener('statechange', () => {
 6        if (newWorker.state === 'installed' &&
 7            navigator.serviceWorker.controller) {
 8          // New content available, prompt the user
 9          promptUserToUpdate(registration);
10        }
11      });
12    });

updatefound तब ट्रिगर होता है जब नए Service Worker की स्थापना शुरू हो जाती है। जब यह ईवेंट होता है, तो एक नया वर्कर registration.installing में सेट कर दिया जाता है, इसलिए उसके statechange को मॉनिटर करके आप पता लगा सकते हैं कि इंस्टॉलेशन कब पूरा हो गया (installed)। इसके अलावा, अगर navigator.serviceWorker.controller मौजूद है, तो इसका मतलब है कि एक पुराना Service Worker पहले से ही पेज को नियंत्रित कर रहा है, इसलिए यह उपयोगकर्ता को नए वर्शन के बारे में सूचित करने का मौका है।

1    // When the active worker changes (e.g., after skipWaiting), reload if desired
2    navigator.serviceWorker.addEventListener('controllerchange', () => {
3      // Optionally reload to let the new SW take over
4      window.location.reload();
5    });
6  } catch (err) {
7    console.error('Service Worker registration failed: ', err);
8  }
9}

controllerchange ईवेंट उस क्षण ट्रिगर होता है जब नया Service Worker मौजूदा पृष्ठ को नियंत्रित करना शुरू करता है। इस बिंदु पर पृष्ठ को पुनः लोड करने से नई कैश रणनीतियाँ और प्रोसेसिंग तुरंत लागू हो जाएंगी। हालांकि, स्वचालित पुनः लोडिंग उपयोगकर्ता अनुभव को खराब कर सकती है, इसलिए उपयोगकर्ता की सहमति प्राप्त करने के बाद ही पुनः लोड करना बेहतर है।

1function promptUserToUpdate(reg: ServiceWorkerRegistration) {
2  // Show UI to user. If user accepts:
3  if (reg.waiting) {
4    reg.waiting.postMessage({ type: 'SKIP_WAITING' });
5  }
6}
7
8registerServiceWorker();

यदि Service Worker को क्लाइंट से postMessage({ type: 'SKIP_WAITING' }) प्राप्त होता है और फिर self.skipWaiting() को कॉल किया जाता है, तो आप एक अद्यतन को प्रोत्साहित कर सकते हैं।

`sw.ts` में स्कोप घोषणा

अब, एक सामान्य सर्विस वर्कर का उदाहरण देखें जो ऐप शेल कैशिंग लागू करता है।

टाइपस्क्रिप्ट में सर्विस वर्कर्स उपयोग करते समय, self को सही टाइप देना फायदेमंद है।

1// sw.ts
2export default null;
3declare const self: ServiceWorkerGlobalScope;

TypeScript में, self को डिफ़ॉल्ट रूप से any माना जाता है, इसलिए अतिरिक्त टाइपिंग के बिना, आपको Service Worker-विशिष्ट APIs जैसे skipWaiting() या clients के लिए टाइप पूर्णता या टाइप जांच नहीं मिलेगी।
ServiceWorkerGlobalScope निर्धारित करने से ऑटो-समापन सक्षम होता है, गलत उपयोग रुकता है, और सामान्य DOM स्क्रिप्ट्स से अलग सुरक्षित विकास संभव होता है।

मूल सर्विस वर्कर (इंस्टॉल/सक्रिय/फेच)

यह कैश वर्शन मैनेजमेंट, इंस्टॉल पर प्रीकैचिंग, सक्रिय पर पुराने कैश हटाना, और फेच पर कैश रणनीतियाँ दिखाता है (स्टैटिक एसेट्स के लिए कैश-फर्स्ट, APIs के लिए नेटवर्क-फर्स्ट)।

`sw.ts` (मिनिमल सेटअप + कैश ढांचा)

 1const CACHE_NAME = 'app-shell-v1';
 2const STATIC_ASSETS = [
 3  '/',
 4  '/index.html',
 5  '/styles.css',
 6  '/main.js',
 7  '/fallback.png'
 8];
 9
10self.addEventListener('install', (event: ExtendableEvent) => {
11  // Pre-cache application shell
12  event.waitUntil(
13    caches.open(CACHE_NAME)
14      .then(cache => cache.addAll(STATIC_ASSETS))
15      // Activate immediately (optional: coordinate with client)
16      .then(() => self.skipWaiting())
17  );
18});

install इवेंट के दौरान, ऐप के स्टैटिक संसाधन (App Shell) पहले से ही कैश में रखे जाते हैं। self.skipWaiting() को कॉल करने से, नया Service Worker तुरंत सक्रिय हो जाता है और अगली एक्सेस का इंतज़ार किए बिना ताज़ा कैश उपलब्ध करा देता है।

 1self.addEventListener('activate', (event: ExtendableEvent) => {
 2  // Clean up old caches and take control of clients immediately
 3  event.waitUntil(
 4    caches.keys().then(keys =>
 5      Promise.all(keys
 6        .filter(key => key !== CACHE_NAME)
 7        .map(key => caches.delete(key)))
 8    ).then(() => self.clients.claim())
 9  );
10});

activate इवेंट में पुराने कैश वर्शन हटा दिए जाते हैं और Service Worker को अपडेटेड रखा जाता है। इसके अलावा, self.clients.claim() को कॉल करके, नया Service Worker पेज को रीलोड किए बिना सभी क्लाइंट्स को नियंत्रित कर सकता है।

 1self.addEventListener('fetch', (event: FetchEvent) => {
 2  const request = event.request;
 3  const url = new URL(request.url);
 4
 5  // Navigation requests (SPA) -> network-first with fallback to cached index.html
 6  if (request.mode === 'navigate') {
 7    event.respondWith(
 8      fetch(request).catch(() => caches.match('/index.html') as Promise<Response>)
 9    );
10    return;
11  }
12
13  // Simple API routing: network-first for /api/
14  if (url.pathname.startsWith('/api/')) {
15    event.respondWith(networkFirst(request));
16    return;
17  }
18
19  // Static assets: cache-first
20  event.respondWith(cacheFirst(request));
21});

fetch में आप रिक्वेस्ट इंटरसेप्ट कर सकते हैं और रिस्पांस नियंत्रित कर सकते हैं। आप कैश-फर्स्ट या नेटवर्क-फर्स्ट जैसी रणनीतियां लागू कर सकते हैं, जो ऑफ़लाइन समर्थन और प्रदर्शन के लिए उपयोगी हैं।

1self.addEventListener('message', (event: ExtendableMessageEvent) => {
2  const data = (event as any).data;
3  if (!data) return;
4
5  if (data.type === 'SKIP_WAITING') {
6    // Force the waiting service worker to become active
7    self.skipWaiting();
8  }
9});

यदि SKIP_WAITING प्राप्त होता है, तो self.skipWaiting() को कॉल करने से आप प्रतीक्षारत Service Worker को तुरंत सक्रिय कर सकते हैं। इसके परिणामस्वरूप, अगले अनुरोध से नया संस्करण लागू हो जाएगा, जिसमें पृष्ठ को पुनः लोड करने की आवश्यकता नहीं होगी।

व्यावहारिक कैश रणनीति का अवलोकन

`cache-first`

कैश-फर्स्ट पहले कैश को देखता है और उपलब्ध होने पर तुरंत रिस्पांस लौटाता है। अगर नहीं है, तो यह नेटवर्क से प्राप्त करता है और परिणाम को कैश में रखता है। यह स्थैतिक फाइलों के लिए उपयुक्त है।

 1async function cacheFirst(request: Request): Promise<Response> {
 2  const cache = await caches.open(CACHE_NAME);
 3  const cached = await cache.match(request);
 4  if (cached) {
 5    return cached;
 6  }
 7  const response = await fetch(request);
 8  if (response && response.ok) {
 9    cache.put(request, response.clone());
10  }
11  return response;
12}

यह कोड कैश-फर्स्ट का एक उदाहरण दर्शाता है। अगर कैश है तो वह लौटाता है; अन्यथा, नेटवर्क से प्राप्त कर कैश में सेव करता है। यह उन स्थैतिक संसाधनों के लिए उपयुक्त है जो शायद ही कभी बदलते हैं, जैसे चित्र या CSS।

`network-first`

नेटवर्क-फर्स्ट पहले नेटवर्क से कोशिश करता है और असफल होने पर कैश का सहारा लेता है। यह उन APIs के लिए उपयुक्त है जहाँ ताजगी महत्वपूर्ण है।

 1async function networkFirst(request: Request): Promise<Response> {
 2  const cache = await caches.open(CACHE_NAME);
 3  try {
 4    const response = await fetch(request);
 5    if (response && response.ok) {
 6      cache.put(request, response.clone());
 7    }
 8    return response;
 9  } catch (err) {
10    const cached = await cache.match(request);
11    if (cached) return cached;
12    return new Response(JSON.stringify({ error: 'offline' }), {
13      status: 503,
14      headers: { 'Content-Type': 'application/json' }
15    });
16  }
17}

यह कोड नेटवर्क-फर्स्ट का एक उदाहरण दर्शाता है। अगर नेटवर्क रिस्पांस मिला, तो उसे कैश में सेव करता है; अगर विफल हुआ, तो कैश्ड संस्करण लौटाता है। यह उन संसाधनों के लिए उपयुक्त है जिन्हें ताजे डेटा की आवश्यकता होती है, जैसे समाचार लेख या API प्रतिक्रियाएँ।

`stale-while-revalidate`

stale-while-revalidate पहले कैश लौटाता है और साथ ही बैकग्राउंड में नेटवर्क से उसे अपडेट करता है। यह प्रतिक्रिया की गति और ताजगी का संतुलन बनाता है।

 1async function staleWhileRevalidate(request: Request, cacheName = CACHE_NAME): Promise<Response> {
 2  const cache = await caches.open(cacheName);
 3  const cachedResponse = await cache.match(request);
 4  const networkFetch = fetch(request).then(networkResponse => {
 5    if (networkResponse && networkResponse.ok) {
 6      cache.put(request, networkResponse.clone());
 7    }
 8    return networkResponse;
 9  }).catch(() => undefined);
10
11  // Return cached immediately if exists, otherwise wait network
12  return cachedResponse || (await networkFetch) || new Response('offline', { status: 503 });
13}

यह कोड अगर कैश उपलब्ध हो तो तुरंत लौटाता है, और बैकग्राउंड में नेटवर्क से नये डेटा प्राप्त कर कैश को अपडेट करता है। यह उपयोगकर्ताओं को तेज प्रतिक्रिया देता है और अगले एक्सेस के लिए अपडेटेड कंटेंट का उपयोग करता है, जिससे यह UI या हल्के डेटा वितरण के लिए उपयुक्त बनता है।

अपडेट प्रवाह का अनुकूलन (अपडेट सूचना और सुरक्षित रीलोड)

Service Worker अपडेट तुरंत लागू नहीं होते; नया संस्करण तब तक प्रतीक्षारत रहेगा जब तक मौजूदा टैब बंद नहीं हो जाते।

यहाँ, हम एक सिस्टम लागू करते हैं जो नए संस्करण के तैयार होने पर क्लाइंट को सूचित करता है और उपयोगकर्ता की कार्रवाई के अनुसार पेज को सुरक्षित रूप से रीलोड करता है।

जब नया संस्करण तैयार हो जाए तो `Service Worker` साइड से क्लाइंट को सूचित करें।

 1// In sw.ts: after 'activate' or when new version is ready, broadcast a message
 2async function notifyClientsUpdated() {
 3  const all = await self.clients.matchAll({ type: 'window' });
 4  for (const client of all) {
 5    client.postMessage({ type: 'SW_UPDATED' });
 6  }
 7}
 8
 9// e.g., call this at the end of 'activate'
10self.addEventListener('activate', (event) => {
11  event.waitUntil((async () => {
12    if ('navigationPreload' in self.registration) {
13      await self.registration.navigationPreload.enable();
14    }
15    // cache cleanup
16    const cacheNames = await caches.keys();
17    await Promise.all(
18      cacheNames.map((name) => {
19        if (name !== CACHE_NAME) {
20          return caches.delete(name);
21        }
22      })
23    );
24
25    await self.clients.claim();
26    await notifyClientsUpdated();
27  })());
28});

इस कोड में, notifyClientsUpdated को activate ईवेंट के अंत में कॉल किया जाता है ताकि सभी जुड़े क्लाइंट्स को नए संस्करण की सूचना दी जा सके। clients.claim() एक ऐसी विधि है जो फिलहाल खुले पृष्ठों (क्लाइंट्स) को तुरंत नए सक्रिय Service Worker के नियंत्रण में ले आती है। आमतौर पर, एक Service Worker केवल अगले लोड पर पृष्ठ को नियंत्रित करता है, परंतु clients.claim() का उपयोग करके आप पृष्ठ को तुरंत नियंत्रित कर सकते हैं, पुनः लोड किए बिना।

क्लाइंट पर अपडेट UI दिखाएं, और उपयोगकर्ता की कार्रवाई से रीलोड करें

1// in app startup
2navigator.serviceWorker.addEventListener('message', (e) => {
3  if (e.data?.type === 'SW_UPDATED') {
4    // Show a non-intrusive toast or banner: "New version available"
5    // When user clicks "Reload", call:
6    window.location.reload();
7  }
8});

क्लाइंट को message ईवेंट के माध्यम से SW_UPDATED मिलता है और वह UI में अपडेट सूचना दिखाता है। जब उपयोगकर्ता रीलोड करना चुनता है, तो window.location.reload() निष्पादित होता है और पेज के पुराने HTML, CSS, और अन्य संसाधनों को ताज़ा संस्करण में अपडेट कर देता है। यह सुनिश्चित करता है कि clients.claim() के साथ बदले गए Service Worker द्वारा किया गया कैश और नियंत्रण पूरे पेज पर दर्शाया जाए।

ऑफ़लाइन फॉलबैक

महत्वपूर्ण नेविगेशन के लिए /offline.html तैयार करें, और एक न्यूनतम UI प्रदान करें जो सिर्फ शब्दों से भी अर्थ स्पष्ट करे। अगर API कॉल विफल हो जाए, तो संभव हो तो अंतिम कैश की गई स्थिति दिखाएँ और बेहतर UX के लिए बैकग्राउंड में पुनः प्राप्त करने का प्रयास करें।

कार्यान्वयन उदाहरण

 1// sw.ts
 2const CACHE_NAME = 'app-cache-v1';
 3
 4// Cache offline.html during install
 5self.addEventListener('install', (event) => {
 6  event.waitUntil((async () => {
 7    const cache = await caches.open(CACHE_NAME);
 8    await cache.addAll(['/offline.html']);
 9  })());
10});
11
12// Handle fetch requests
13self.addEventListener('fetch', (event) => {
14  const request = event.request;
15
16  // Navigation requests (e.g., page transitions)
17  if (request.mode === 'navigate') {
18    event.respondWith((async () => {
19      try {
20        // Try to fetch from the network as usual
21        return await fetch(request);
22      } catch (err) {
23        // On failure, return offline fallback page
24        const cache = await caches.open(CACHE_NAME);
25        return await cache.match('/offline.html') as Response;
26      }
27    })());
28  }
29});

install ईवेंट के दौरान /offline.html को प्री-कैश करें ताकि नेटवर्क अनुपलब्ध होने पर कम-से-कम एक बेसिक पेज लौटा सकें।
fetch इवेंट में, आप request.mode === 'navigate' के साथ नेविगेशन रिक्वेस्ट की निगरानी कर सकते हैं और विशेष रूप से पेज के ट्रांजिशन को लक्षित कर सकते हैं।
जब नेटवर्क फेल हो जाए तो /offline.html पर फॉलबैक करें, ताकि यह ऑफ़लाइन भी दिख सके।

क्लाइंट और `Service Worker` के बीच संदेश विनिमय

चूंकि Service Worker पेज लाइफसाइकल से स्वतंत्र रूप से संचालित होता है, इसलिए अवस्थाओं को सूचित करने और कमांड निष्पादित करने के लिए द्विदिश मेसेजिंग महत्वपूर्ण है। संदेशों के लिए प्रकार निर्धारित करना गलत संदेश भेजने से रोकने में मदद करता है, कोड पूर्णता सक्षम करता है, और आपके कार्यान्वयन को अधिक मजबूत बनाता है।

कोड उदाहरण

संदेश के प्रकारों की परिभाषा

1type SwToClient =
2  | { type: 'SW_READY' }
3  | { type: 'SW_UPDATED' }
4  | { type: 'CACHE_CLEARED' }
5  | { type: 'PING'; ts: number };
6
7type ClientToSw =
8  | { type: 'CLEAR_CACHE' }
9  | { type: 'PING'; ts: number };

SwToClient वह संदेश प्रकार है जो सर्विस वर्कर से क्लाइंट को जाता है।
ClientToSw वह संदेश प्रकार है जो क्लाइंट से सर्विस वर्कर को जाता है।
यह आपको द्विदिशी संचार के माध्यम से अदल-बदल किए जा सकने वाले इवेंट्स के प्रकार स्पष्ट करने में सक्षम बनाता है।

सर्विस वर्कर पक्ष पर प्रोसेसिंग

 1self.addEventListener('message', (event) => {
 2  const data = event.data as ClientToSw;
 3  if (data?.type === 'CLEAR_CACHE') {
 4    event.waitUntil((async () => {
 5      const keys = await caches.keys();
 6      await Promise.all(keys.map((k) => caches.delete(k)));
 7      await broadcast({ type: 'CACHE_CLEARED' });
 8    })());
 9  } else if (data?.type === 'PING') {
10    event.source?.postMessage({ type: 'PING', ts: data.ts } as SwToClient);
11  }
12});

सर्विस वर्कर, क्लाइंट से संदेश प्राप्त करता है और टाइप के आधार पर प्रोसेसिंग करता है।
CLEAR_CACHE के लिए, यह कैश डिलीट करता है और फिर सभी क्लाइंट्स को CACHE_CLEARED से सूचित करता है।
PING के लिए, यह मूल क्लाइंट को टाइमस्टैम्प सहित PING संदेश से उत्तर देता है।

सर्विस वर्कर से सभी क्लाइंट्स को सूचित करना

1async function broadcast(msg: SwToClient) {
2  const clients = await self.clients.matchAll({ includeUncontrolled: true });
3  for (const c of clients) c.postMessage(msg);
4}

सभी विंडो टैब्स प्राप्त करने के लिए clients.matchAll का उपयोग करें।
प्रत्येक को postMessage भेजकर, आप संदेश प्रसारित कर सकते हैं।
इसे अद्यतन सूचनाओं (जैसे SW_UPDATED) और त्रुटि सूचनाओं के लिए इस्तेमाल किया जा सकता है।

क्लाइंट पक्ष पर प्रोसेसिंग

1navigator.serviceWorker.controller?.postMessage({
2  type: 'PING',
3  ts: Date.now()
4} as ClientToSw);

क्लाइंट से PING भेजकर और Service Worker से प्रतिक्रिया प्राप्त करके, आप सत्यापित कर सकते हैं कि द्विदिश संचार सही तरीके से काम कर रहा है। यह कनेक्शन स्थितियों और संदेश प्रोसेसिंग का परीक्षण करना आसान बनाता है।

 1navigator.serviceWorker.addEventListener('message', (e) => {
 2  const msg = e.data as SwToClient;
 3  switch (msg.type) {
 4    case 'SW_READY':
 5      console.log('Service Worker is ready');
 6      // Example: hide loading spinner or enable offline UI
 7      break;
 8    case 'SW_UPDATED':
 9      console.log('A new version of the Service Worker is available');
10      // Example: show update notification or reload prompt
11      const shouldReload = confirm('A new version is available. Reload now?');
12      if (shouldReload) {
13        window.location.reload();
14      }
15      break;
16    case 'CACHE_CLEARED':
17      console.log('Cache cleared');
18      // Example: show confirmation message to user
19      alert('Cache has been successfully cleared.');
20      break;
21    case 'PING':
22      console.log(`Received PING response, ts=${msg.ts}`);
23      break;
24  }
25});

{^ i18n_speak クライアント側では Service Worker から送信されるメッセージを受信し、種類に応じて処理を分岐します。SW_READY は初期化完了、SW_UPDATED は新バージョン検出、CACHE_CLEARED はキャッシュ削除完了、PING は通信確認を示します。各メッセージに応じて、UI の更新やリロード、通知表示などを行います。^}

टाइप किए गए संदेश के लाभ

टाइप किए गए संदेशों का उपयोग करने से यह स्पष्ट होता है कि कौन से संदेश भेजे और प्राप्त किए जा सकते हैं, और ऑटो-कम्प्लीशन एवं टाइप चेकिंग से सुरक्षा बढ़ती है।
postMessage एक-से-एक संचार को सक्षम करता है और broadcast एक-से-अनेक संचार को।
आप अपडेट सूचना (SW_UPDATED), कैश प्रबंधन (CACHE_CLEARED), और स्वास्थ्य जांच (PING) जैसी आवश्यक विशेषताएँ आसानी से लागू कर सकते हैं।

सारांश

टाइपस्क्रिप्ट का उपयोग सर्विस वर्कर API कॉल्स और संदेशों को टाइप-सुरक्षात्मक बनाता है, जिससे विकास की दक्षता और मेंटेनबिलिटी बहुत बढ़ती है।
install, activate, और fetch जीवन-चक्र ईवेंट्स को समझना, और प्रत्येक स्थिति के अनुसार सही कैशिंग रणनीति (जैसे cache-first या network-first) चुनना, बेहतर उपयोगकर्ता अनुभव देता है।
ऑपरेशन्स के लिए, कैश वर्शन प्रबंधन और अपडेट प्रवाह (updatefound, waiting, SKIP_WAITING आदि) को समझना आवश्यक है।
क्लाइंट-Service Worker संचार के लिए टाइप्ड मैसेजिंग अपनाने से आप गलत कार्यान्वयन को रोक सकते हैं और एक ऐसी प्रणाली स्थापित कर सकते हैं जिसे दीर्घकालिक रूप से बढ़ाना और बनाए रखना आसान हो।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

टाइपस्क्रिप्ट में वेब वर्कर

टाइपस्क्रिप्ट में सर्विस वर्कर

YouTube Video

टाइपस्क्रिप्ट में सर्विस वर्कर

टाइपस्क्रिप्ट सेटअप करना

tsconfig.json (WebWorker टाइप्स को सक्षम करें)

ब्राउज़र पक्ष पर पंजीकरण कोड

register-sw.ts

sw.ts में स्कोप घोषणा

मूल सर्विस वर्कर (इंस्टॉल/सक्रिय/फेच)

sw.ts (मिनिमल सेटअप + कैश ढांचा)

व्यावहारिक कैश रणनीति का अवलोकन

cache-first

network-first

stale-while-revalidate

अपडेट प्रवाह का अनुकूलन (अपडेट सूचना और सुरक्षित रीलोड)

जब नया संस्करण तैयार हो जाए तो Service Worker साइड से क्लाइंट को सूचित करें।

क्लाइंट पर अपडेट UI दिखाएं, और उपयोगकर्ता की कार्रवाई से रीलोड करें

ऑफ़लाइन फॉलबैक

कार्यान्वयन उदाहरण

क्लाइंट और Service Worker के बीच संदेश विनिमय

कोड उदाहरण

टाइप किए गए संदेश के लाभ

सारांश

YouTube Video

`tsconfig.json` (WebWorker टाइप्स को सक्षम करें)

`register-sw.ts`

`sw.ts` में स्कोप घोषणा

`sw.ts` (मिनिमल सेटअप + कैश ढांचा)

`cache-first`

`network-first`

`stale-while-revalidate`

जब नया संस्करण तैयार हो जाए तो `Service Worker` साइड से क्लाइंट को सूचित करें।

क्लाइंट और `Service Worker` के बीच संदेश विनिमय