इंपेरेटिव कैशिंग गाइड

Andrew Guan

Demián Renzulli

कुछ वेबसाइटों को सर्विस वर्कर से संपर्क करने की ज़रूरत पड़ सकती है. को नतीजे के बारे में सूचित किया. यहां कुछ उदाहरण दिए गए हैं:

• कोई पेज सर्विस वर्कर को यूआरएल की सूची भेजता है प्रीफ़ेच, ताकि जब उपयोगकर्ता किसी पेज पर क्लिक करे दस्तावेज़ या पेज के सबरिसॉर्स कैश में पहले से ही मौजूद हैं. इसे और नेविगेशन को और तेज़ कर दिया.
• यह पेज, सर्विस वर्कर को प्रमुख लेखों के सेट को वापस पाने और कैश मेमोरी में सेव करने के लिए कहता है ऑफ़लाइन उद्देश्यों के लिए उपलब्ध है.

सर्विस वर्कर को इस तरह के गैर-ज़रूरी काम सौंपने का एक फ़ायदा यह है कि मुख्य थ्रेड का इस्तेमाल करें, ताकि ज़्यादा ज़रूरी टास्क बेहतर ढंग से हैंडल किए जा सकें. जैसे, उपयोगकर्ता के इंटरैक्शन का जवाब देना.

इस गाइड में हम जानेंगे कि एक पेज से दूसरे पेज पर जाने के लिए, एकतरफ़ा बातचीत स्टैंडर्ड ब्राउज़र एपीआई और Workbox लाइब्रेरी का इस्तेमाल करके सर्विस वर्कर. हम इस तरह के ज़रूरी कैश मेमोरी इस्तेमाल करने के उदाहरण.

प्रोडक्शन केस

1-800-flower.com ने इसके ज़रिए सर्विस वर्कर को ज़रूरी कैश मेमोरी (प्रीफ़ेचिंग) लागू की प्रीफ़ेच करने के लिए postMessage() ताकि प्रॉडक्ट की जानकारी वाले पेजों पर तेज़ी से नेविगेट किया जा सके.

वे यह तय करने के लिए कि कौनसे आइटम प्रीफ़ेच करने हैं, वे मिले-जुले तरीके का इस्तेमाल करते हैं:

• पेज लोड होने के दौरान, वे सर्विसर वर्कर से टॉप नौ आइटम का JSON डेटा हासिल करने के लिए कहते हैं और नतीजे के तौर पर मिलने वाले ऑब्जेक्ट को कैश मेमोरी में जोड़ें.
• बचे हुए आइटम के लिए, वह mouseover को सुनता है इवेंट होता है, ताकि, जब किसी जब उपयोगकर्ता कर्सर को किसी आइटम के ऊपर ले जाता है, तो वे "मांग" पर संसाधन को फ़ेच करने को ट्रिगर कर सकते हैं.

वे JSON को स्टोर करने के लिए, कैश एपीआई का इस्तेमाल करते हैं जवाब:

जब कोई उपयोगकर्ता किसी आइटम पर क्लिक करता है, तो उससे जुड़े JSON डेटा को कैश मेमोरी से पिक अप किया जा सकता है. इसके लिए, नेटवर्क पर जाने की ज़रूरत नहीं होती. इससे नेविगेशन और भी तेज़ हो जाता है.

Workbox का इस्तेमाल करना

वर्कबॉक्स की मदद से, इन डिवाइसों पर आसानी से मैसेज भेजे जा सकते हैं एक सर्विस वर्कर, workbox-window पैकेज के ज़रिए, मॉड्यूल का एक सेट होता है जो विंडो कॉन्टेक्स्ट में चलने के लिए हों. ये दूसरे वर्कबॉक्स पैकेज के पूरक हैं जो सर्विस वर्कर में चलते हैं.

सर्विस वर्कर को पेज के बारे में बताने के लिए, सबसे पहले रजिस्टर्ड सर्विस वर्कर:

const wb = new Workbox('/sw.js');
wb.register();

इसके बाद, आपके पास सीधे तौर पर मैसेज भेजने की सुविधा होती है. इसके लिए, आपको रजिस्ट्रेशन, ऐक्टिवेशन की जांच करना या बुनियादी कम्यूनिकेशन एपीआई के बारे में सोचना:

wb.messageSW({"type": "PREFETCH", "payload": {"urls": ["/data1.json", "data2.json"]}}); });

सर्विस वर्कर, message हैंडलर को इन चीज़ों के लिए लागू करता है ये मैसेज सुनें. यह विकल्प के तौर पर कोई जवाब दे सकता है. हालांकि, इस तरह के मामलों में ज़रूरी नहीं:

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'PREFETCH') {
    // do something
  }
});

ब्राउज़र एपीआई का इस्तेमाल करना

अगर वर्कबॉक्स लाइब्रेरी आपकी ज़रूरतों के हिसाब से काफ़ी नहीं है, तो यहां देखें कि सर्विस में विंडो कैसे लागू की जा सकती है ब्राउज़र एपीआई का इस्तेमाल करके, कर्मचारी से बातचीत करते समय.

postMessage API का इस्तेमाल पेज से सर्विस वर्कर तक एकतरफ़ा बातचीत करने के लिए किया जा सकता है.

पेज कॉल करता है postMessage() सर्विस वर्कर इंटरफ़ेस:

navigator.serviceWorker.controller.postMessage({
  type: 'MSG_ID',
  payload: 'some data to perform the task',
});

सर्विस वर्कर, message हैंडलर को इन चीज़ों के लिए लागू करता है ये मैसेज सुनें.

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === MSG_ID) {
    // do something
  }
});

{type : 'MSG_ID'} एट्रिब्यूट देना ज़रूरी नहीं है. हालांकि, यह पेज को ये काम करने की अनुमति देने का एक तरीका है सर्विस वर्कर को अलग-अलग तरह के निर्देश भेजें (यानी, ' प्रीफ़ेच करने' बनाम 'साफ़ करने के लिए' स्टोरेज') कहा जाता है. सर्विस वर्कर, इस फ़्लैग के आधार पर अलग-अलग एक्ज़ीक्यूशन पाथ में बंट सकता है.

अगर कार्रवाई पूरी होती है, तो उपयोगकर्ता को इसके फ़ायदे मिल पाएंगे. अगर ऐसा नहीं होता है, तो इससे मुख्य यूज़र फ़्लो में कोई बदलाव नहीं होगा. उदाहरण के लिए, जब 1-800-flower.com पहले से कैश मेमोरी में सेव करने की कोशिश करता है, तो पेज को यह जानने की ज़रूरत नहीं होती कि सर्विस वर्कर सफल रहा या नहीं. अगर ऐसा है, तो उपयोगकर्ता को ज़्यादा तेज़ नेविगेशन का आनंद मिलेगा. अगर ऐसा नहीं है, तो भी पेज को नए पेज पर जाने की ज़रूरत है. इसमें थोड़ा ज़्यादा समय लगेगा.

प्रीफ़ेच करने का एक आसान उदाहरण

ज़रूरी कैश मेमोरी इस्तेमाल करने के सबसे आम तरीकों में से एक है प्रीफ़ेच करना, जिसका मतलब है फ़ेच करना उपयोगकर्ता के उस यूआरएल पर जाने से पहले, दिए गए रिसॉर्स के हिसाब से.

साइटों में प्रीफ़ेच लागू करने के अलग-अलग तरीके हैं:

• पेजों में लिंक प्रीफ़ेच टैग का इस्तेमाल करना: संसाधनों को ब्राउज़र की कैश मेमोरी पांच मिनट के लिए सेव होती है. इसके बाद, रिसॉर्स के लिए Cache-Control के सामान्य नियम लागू हो जाते हैं लागू करें.
• पिछली तकनीक के साथ, सेवा में रनटाइम कैश मेमोरी की रणनीति का इस्तेमाल करें प्रीफ़ेच के लाइफ़टाइम को बढ़ाने के लिए वर्कर सीमा से परे हैं.

प्रीफ़ेच करने की आसान स्थितियों के लिए, जैसे कि दस्तावेज़ों या खास ऐसेट (JS, सीएसएस वगैरह), वे तकनीकें, सबसे सही तरीका होती हैं.

अगर अतिरिक्त तर्क की ज़रूरत हो, तो तो अपने इंटरनल यूआरएल को फ़ेच करने के लिए, इस टास्क को पूरी तरह से सर्विस वर्कर.

सर्विस वर्कर को इस तरह की कार्रवाइयां सौंपने के ये फ़ायदे हैं:

• फ़ेच करने और पोस्ट-फ़ेच प्रोसेसिंग के भारी बोझ को ऑफ़लोड करें (जिसे शामिल किया जाएगा दूसरे थ्रेड में). ऐसा करने से, मुख्य थ्रेड खाली हो जाता है, ताकि वह ज़्यादा ज़रूरी हैंडल कर सके जैसे कि उपयोगकर्ता के इंटरैक्शन का जवाब देना.
• एक से ज़्यादा क्लाइंट (जैसे कि टैब) को सामान्य फ़ंक्शन का दोबारा इस्तेमाल करने की अनुमति देना और सेवा का इस्तेमाल कर सकते हैं. साथ ही, यह मुख्य थ्रेड को ब्लॉक नहीं करते.

प्रॉडक्ट की जानकारी वाले पेजों को प्रीफ़ेच करें

पहली बार postMessage() का इस्तेमाल इस तारीख को करें और कैश मेमोरी में सेव करने के लिए यूआरएल की अरे को पास कर सकता है:

navigator.serviceWorker.controller.postMessage({
  type: 'PREFETCH',
  payload: {
    urls: [
      'www.exmaple.com/apis/data_1.json',
      'www.exmaple.com/apis/data_2.json',
    ],
  },
});

सर्विस वर्कर में, message हैंडलर को इन कामों के लिए लागू करें किसी भी ऐक्टिव टैब से भेजे गए मैसेज को रोकें और प्रोसेस करें:

addEventListener('message', (event) => {
  let data = event.data;
  if (data && data.type === 'PREFETCH') {
    let urls = data.payload.urls;
    for (let i in urls) {
      fetchAsync(urls[i]);
    }
  }
});

पिछले कोड में, हमने fetchAsync() नाम का एक छोटा हेल्पर फ़ंक्शन शुरू किया था. यह फ़ंक्शन यूआरएल का कलेक्शन बनाया जा सकता है और हर एक यूआरएल को फ़ेच करने का अनुरोध किया जा सकता है:

async function fetchAsync(url) {
  // await response of fetch call
  let prefetched = await fetch(url);
  // (optionally) cache resources in the service worker storage
}

रिस्पॉन्स मिलने के बाद, संसाधन के कैश मेमोरी हेडर पर भरोसा किया जा सकता है. कई मामलों में हालांकि, प्रॉडक्ट की जानकारी वाले पेजों की तरह, रिसॉर्स को कैश मेमोरी में सेव नहीं किया जाता (जिसका मतलब है कि उनके पास no-cache में से Cache-control हेडर). इस तरह के मामलों में, यह तरीका अपनाया जा सकता है: सर्विस वर्कर की कैश मेमोरी में फ़ेच किए गए संसाधन को सेव करने के लिए. इसका एक अतिरिक्त फ़ायदा यह है कि आप ऑफ़लाइन स्थितियों में प्रस्तुत की जाने वाली फ़ाइल है.

JSON डेटा के अलावा अन्य

सर्वर एंडपॉइंट से JSON डेटा फ़ेच करने के बाद, इसमें अक्सर ऐसे अन्य यूआरएल भी शामिल होते हैं जो प्रीफ़ेच करने लायक जानकारी, जैसे कि इस फ़र्स्ट-लेवल से जुड़ी इमेज या एंडपॉइंट का अन्य डेटा डेटा शामिल है.

मान लें कि हमारे उदाहरण में, जवाब में मिला JSON डेटा, किराने की खरीदारी की साइट की जानकारी है:

{
  "productName": "banana",
  "productPic": "https://cdn.example.com/product_images/banana.jpeg",
  "unitPrice": "1.99"
 }

fetchAsync() कोड में बदलाव करें, ताकि प्रॉडक्ट की सूची में बदलाव किया जा सके और हीरो इमेज को कैश मेमोरी में सेव किया जा सके हर स्थिति के लिए:

async function fetchAsync(url, postProcess) {
  // await response of fetch call
  let prefetched = await fetch(url);

  //(optionally) cache resource in the service worker cache

  // carry out the post fetch process if supplied
  if (postProcess) {
    await postProcess(prefetched);
  }
}

async function postProcess(prefetched) {
  let productJson = await prefetched.json();
  if (productJson && productJson.product_pic) {
    fetchAsync(productJson.product_pic);
  }
}

आप 404 जैसी स्थितियों के लिए, इस कोड से जुड़े कुछ अपवाद भी जोड़ सकते हैं. हालांकि, प्रीफ़ेच के लिए सर्विस वर्कर का इस्तेमाल करने की खासियत यह है कि यह बिना किसी पेज और मुख्य थ्रेड का नतीजा हो सकता है. यह जानकारी भी दी जा सकती है कि प्रीफ़ेच किए गए कॉन्टेंट की पोस्ट-प्रोसेसिंग होती है, जो उसे ज़्यादा सुविधाजनक और डेटा के साथ अलग कर देती है हैंडलिंग. आपकी कोई सीमा नहीं है.

नतीजा

इस लेख में, हमने पेज और सेवा के बीच एकतरफ़ा बातचीत वर्कर: ज़रूरी कैश मेमोरी. यहां दिए गए उदाहरण, सिर्फ़ एक तरीका दिखाने के लिए हैं और यही तरीका अन्य मामलों में भी लागू किया जा सकता है. उदाहरण के लिए, ऑफ़लाइन इस्तेमाल, बुकमार्क करने, और दूसरी चीज़ों की मांग पर लोकप्रिय लेखों को कैश मेमोरी में सेव किया जाता है.

पेज और सर्विस वर्कर के संचार के ज़्यादा पैटर्न के लिए, इसे देखें:

• ब्रॉडकास्ट अपडेट: सूचित करने के लिए सर्विस वर्कर के पेज पर कॉल करना (उदाहरण के लिए, webapp का नया वर्शन उपलब्ध है).
• दो-तरफ़ा बातचीत: किसी सर्विस वर्कर को टास्क सौंपना (उदाहरण के लिए, बहुत ज़्यादा डाउनलोड करने की सुविधा मिलती है).