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

Jake Archibald

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

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

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

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

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

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

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

बैकग्राउंड फ़ेच करने की सुविधा इस तरह काम करती है:

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

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

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

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

एपीआई

सुविधा की पहचान

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

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 के साथ रिज़ॉल्व हो जाता है. मैं बाद में उन सभी चीज़ों के बारे में बताया है. अगर उपयोगकर्ता ने डाउनलोड की सुविधा से ऑप्ट आउट किया है, तो प्रॉमिस अस्वीकार कर दिया जाएगा या पैरामीटर अमान्य है.

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

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

इस तरह की, बैकग्राउंड फ़ेच की सुविधा का इस्तेमाल किया जा सकता है:

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

...बैकग्राउंड फ़ेच करने की अपनी पसंद का आईडी पास करके. अगर कोई पैरामीटर नहीं है, तो 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 होगा.

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

ज़्यादातर सर्विस वर्कर इवेंट की तरह, 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 में, कम्यूनिटी ग्रुप की ड्राफ़्ट रिपोर्ट के तौर पर देखा जा सकता है.