पेश है बैकग्राउंड में डेटा फ़ेच करने की सुविधा

Jake Archibald

हमने 2015 में बैकग्राउंड सिंक की सुविधा लॉन्च की थी. इससे सेवा वर्कर, तब तक काम को रोक सकता है, जब तक उपयोगकर्ता के पास इंटरनेट कनेक्शन नहीं होता. इसका मतलब है कि उपयोगकर्ता कोई मैसेज टाइप कर सकता है, 'भेजें' पर क्लिक कर सकता है, और साइट से बाहर निकल सकता है. ऐसा करने पर, मैसेज अब भेजा जाएगा या फिर तब भेजा जाएगा, जब इंटरनेट कनेक्शन उपलब्ध होगा.

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

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

बैकग्राउंड फ़ेच करने की सुविधा, Chrome के 74 वर्शन से डिफ़ॉल्ट रूप से उपलब्ध है.

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

खुद डेमो आज़माएं और कोड ब्राउज़ करें.

यह कैसे काम करता है

बैकग्राउंड फ़ेच इस तरह काम करता है:

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

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

कुछ प्लैटफ़ॉर्म (जैसे, Android) पर, पहले चरण के बाद ब्राउज़र बंद हो सकता है. ऐसा इसलिए होता है, क्योंकि ब्राउज़र, फ़ेच करने की प्रोसेस को ऑपरेटिंग सिस्टम को सौंप सकता है.

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

एपीआई

सुविधा का पता लगाना

किसी भी नई सुविधा की तरह, आपको यह पता लगाना होगा कि ब्राउज़र पर यह सुविधा काम करती है या नहीं. बैकग्राउंड फ़ेच के लिए, यह उतना ही आसान है जितना:

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

बैकग्राउंड फ़ेच करने की प्रोसेस शुरू की जा रही है

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

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
      sizes: '300x300',
      src: '/ep-5-icon.png',
      type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
  });
});

backgroundFetch.fetch में तीन आर्ग्युमेंट होते हैं:

backgroundFetch.fetch, ऐसा प्रॉमिस देता है जो BackgroundFetchRegistration के साथ रिज़ॉल्व हो जाता है. मैं इसके बारे में बाद में जानकारी दूंगी. अगर उपयोगकर्ता ने डाउनलोड करने की सुविधा से ऑप्ट आउट किया है या दिए गए पैरामीटर में से कोई एक अमान्य है, तो प्रॉमिस अस्वीकार कर दिया जाता है.

एक ही बैकग्राउंड फ़ेच के लिए कई अनुरोध करने से, उन चीज़ों को जोड़ा जा सकता है जो उपयोगकर्ता के लिए एक ही चीज़ हैं. उदाहरण के लिए, किसी मूवी को हज़ारों संसाधनों में बांटा जा सकता है. आम तौर पर, ऐसा MPEG-DASH के साथ होता है. साथ ही, इसमें इमेज जैसे अन्य संसाधन भी शामिल हो सकते हैं. किसी गेम का लेवल, कई JavaScript, इमेज, और ऑडियो रिसॉर्स में हो सकता है. हालांकि, उपयोगकर्ता के लिए यह सिर्फ़ "फ़िल्म" या "लेवल" है.

बैकग्राउंड में फ़ेच की जा रही किसी मौजूदा फ़ाइल का डेटा पाना

बैकग्राउंड में फ़ेच की जा रही किसी मौजूदा फ़ाइल को इस तरह देखा जा सकता है:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

...बैकग्राउंड फ़ेच करने की अपनी पसंद का id पास करके. अगर उस आईडी के साथ कोई बैकग्राउंड फ़ेच ऐक्टिव नहीं है, तो get undefined दिखाता है.

बैकग्राउंड फ़ेच को रजिस्टर होने के बाद से, तब तक "चालू" माना जाता है, जब तक कि वह पूरा नहीं हो जाता, पूरा नहीं होता या उसे रोका नहीं जाता.

getIds का इस्तेमाल करके, बैकग्राउंड में फ़ेच किए गए सभी चालू डेटा की सूची देखी जा सकती है:

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

बैकग्राउंड फ़ेच के लिए रजिस्ट्रेशन

BackgroundFetchRegistration (ऊपर दिए गए उदाहरणों में bgFetch) में ये चीज़ें होती हैं:

प्रोग्रेस ट्रैक करना

ऐसा करने के लिए, progress इवेंट का इस्तेमाल करें. याद रखें कि downloadTotal वह वैल्यू है जो आपने दी है. अगर आपने कोई वैल्यू नहीं दी है, तो 0 वैल्यू दिखेगी.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

अनुरोध और जवाब पाना

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record एक BackgroundFetchRecord है और यह इस तरह दिखता है:

सर्विस वर्कर इवेंट

इवेंट ऑब्जेक्ट में ये चीज़ें होती हैं:

सफलता/असफलता पर प्रतिक्रिया देना

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

अगर बैकग्राउंड फ़ेच पूरा हो जाता है, तो आपके सेवा वर्कर को backgroundfetchsuccess इवेंट मिलेगा और event.registration बैकग्राउंड फ़ेच रजिस्ट्रेशन होगा.

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

ज़्यादातर सेवा वर्कर इवेंट की तरह, event.waitUntil का इस्तेमाल करें, ताकि सेवा वर्कर को पता चले कि इवेंट कब पूरा हुआ.

उदाहरण के लिए, आपके सर्विस वर्कर में:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

हो सकता है कि गड़बड़ी सिर्फ़ एक 404 कोड की वजह से हुई हो, जो आपके लिए ज़रूरी न हो. इसलिए, ऊपर बताए गए तरीके से कुछ रिस्पॉन्स को कैश मेमोरी में कॉपी करना अब भी फ़ायदेमंद हो सकता है.

क्लिक करने पर प्रतिक्रिया देना

डाउनलोड की प्रोग्रेस और नतीजा दिखाने वाले यूज़र इंटरफ़ेस (यूआई) पर क्लिक किया जा सकता है. सेवा वर्कर में मौजूद backgroundfetchclick इवेंट की मदद से, इस पर प्रतिक्रिया दी जा सकती है. ऊपर बताए गए उदाहरण में, event.registration बैकग्राउंड में फ़ेच होने वाला रजिस्ट्रेशन होगा.

इस इवेंट के लिए, आम तौर पर विंडो खोली जाती है:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

अन्य संसाधन

• एक्सप्लेनर
• खास जानकारी
• chromestatus.com एंट्री

सुधार: इस लेख के पिछले वर्शन में, बैकग्राउंड फ़ेच को "वेब स्टैंडर्ड" के तौर पर गलत तरीके से बताया गया था. फ़िलहाल, यह एपीआई स्टैंडर्ड ट्रैक पर नहीं है. इसकी जानकारी, WICG में ड्राफ़्ट कम्यूनिटी ग्रुप रिपोर्ट के तौर पर देखी जा सकती है.