Chrome 123 से, सर्विस वर्कर स्टैटिक राउटिंग एपीआई उपलब्ध है. इस एपीआई की मदद से, यह बताया जा सकता है कि कुछ संसाधन पाथ को कैसे फ़ेच किया जाना चाहिए. इसका मतलब है कि ब्राउज़र को सिर्फ़ कैश मेमोरी या सीधे नेटवर्क से जवाब फ़ेच करने के लिए, सर्विस वर्कर को चलाने की ज़रूरत नहीं होती. यह एपीआई, Chrome 116 से ऑरिजिन ट्रायल में है. इस पोस्ट में, Chrome 123 में एपीआई लॉन्च करने के बारे में जानकारी दी गई है.
एपीआई का इस्तेमाल करना
एपीआई का इस्तेमाल करने के लिए, सर्विस वर्कर के install इवेंट पर event.addRoutes को कॉल करें. इस तरीके में, इन प्रॉपर्टी के साथ रास्तों की सूची पास करें:
condition- इससे पता चलता है कि नियम कब लागू होता है. इन प्रॉपर्टी को स्वीकार करता है:
urlPattern: यह URLPattern का इंस्टेंस या एक स्ट्रिंग होती है. यह एक मान्य URLPattern को दिखाती है. इसेURLPatternकंस्ट्रक्टर में पास किया जा सकता है.requestMethod: यह एक स्ट्रिंग होती है, जिसमें अनुरोध का तरीका शामिल होता है.requestMode: यह एक स्ट्रिंग है, जिसमें Request mode शामिल होता है.requestDestination: यह एक स्ट्रिंग है, जिसमें अनुरोध का destination शामिल होता है.runningStatus: एक स्ट्रिंग, जो"running"या"not-running"में से कोई एक होती है. इससे सर्विस वर्कर के चालू होने की स्थिति के बारे में पता चलता है.
source- इससे यह तय होता है कि
conditionसे मैच करने वाले रिसॉर्स कैसे लोड किए जाते हैं. इनमें से कोई एक स्ट्रिंग:"network""cache""fetch-event""race-network-and-fetch-handler"
यहां दिए गए उदाहरण में, "/articles" से शुरू होने वाले यूआरएल को सर्विस वर्कर पर रीडायरेक्ट किया जाता है. ऐसा तब होता है, जब सर्विस वर्कर चालू हो. अगर एक से ज़्यादा शर्तें हैं, जैसे कि urlPattern और runningStatus, तो रूट का इस्तेमाल करने के लिए सभी शर्तों का पूरा होना ज़रूरी है.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/articles/*",
runningStatus: "running"
},
source: "fetch-event"
});
});
यहां दिए गए उदाहरण में, फ़ॉर्म में की गई पोस्ट सीधे तौर पर नेटवर्क को भेजी जाती हैं और सर्विस वर्कर को बायपास कर देती हैं.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
urlPattern: "/form/*",
requestMethod: "post"
},
source: "network"
});
});
यहां दिए गए उदाहरण में, .png या .jpg फ़ाइल एक्सटेंशन वाली फ़ाइलों को फ़ेच करने के लिए, "pictures" नाम के कैश स्टोरेज का इस्तेमाल किया गया है.
addEventListener('install', (event) => {
event.addRoutes({
condition: {
or: [
{urlPattern: "*.png"},
{urlPattern: "*.jpg"}
]
},
source: {
cacheName: "pictures"
}
});
});
ऑरिजिन ट्रायल में किए गए बदलाव
ओरिजनल ओरिजिन ट्रायल में InstallEvent.addRoutes() के बजाय InstallEvent.registerRouter() का इस्तेमाल किया गया था. साथ ही, registerRouter() तरीके को सिर्फ़ एक बार कॉल किया जा सकता था. यह बदलाव, ओरिजिन ट्रायल के दौरान कम्यूनिटी से मिले सुझावों के आधार पर किया गया है.
नया एपीआई, Chrome 121 में पेश किए गए URLPattern में हुए बदलावों का भी फ़ायदा उठाता है. साथ ही, इसमें अनुरोध करने का तरीका, मोड, और डेस्टिनेशन तय करने की सुविधा जोड़ी गई है. इसके अलावा, इसमें सोर्स के अतिरिक्त विकल्प भी जोड़े गए हैं.
Chrome DevTools में सहायता
रजिस्टर किए गए राऊटर के नियम, ऐप्लिकेशन पैनल के सर्विस वर्कर टैब में दिखते हैं.
अगर अनुरोध, रजिस्टर किए गए नियम से मेल खाता है, तो नेटवर्क पैनल में, साइज़ कॉलम में इसकी जानकारी दी जाती है. साइज़ कॉलम पर पॉइंटर घुमाने पर, रजिस्टर किया गया राउटर आईडी दिखता है. लागू होने वाले नियम, ऐप्लिकेशन टैब में दिखते हैं.
