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

हमने 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 में तीन तर्क होते हैं:

पैरामीटर
id string
इस बैकग्राउंड फ़ेच की पहचान यूनीक तरीके से करता है.

अगर आईडी किसी मौजूदा बैकग्राउंड से मेल खाता है, तो backgroundFetch.fetch अस्वीकार कर देगा फ़ेच करें.

requests Array<Request|string> अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
फ़ेच की जाने वाली चीज़ें. स्ट्रिंग को यूआरएल के तौर पर देखा जाएगा और new Request(theString) से Request.

आप दूसरे ऑरिजिन से चीज़ें फ़ेच कर सकते हैं, बशर्ते संसाधन इसके ज़रिए अनुमति दें CORS.

ध्यान दें: फ़िलहाल, Chrome ऐसे अनुरोधों को स्वीकार नहीं करता जो सीओआरएस प्रीफ़्लाइट ज़रूरी है.

options एक ऐसा ऑब्जेक्ट जिसमें ये चीज़ें शामिल हो सकती हैं:
options.title string
ब्राउज़र के लिए टाइटल, जो प्रोग्रेस के साथ दिखेगा.
options.icons Array<IconDefinition>
`src`, `size`, और `type` वाले ऑब्जेक्ट का कलेक्शन.
options.downloadTotal number
जवाबों का कुल साइज़ (अन-जीज़िप किए जाने के बाद).

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

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

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) में ये चीज़ें शामिल हैं:

प्रॉपर्टी
id string
बैकग्राउंड फ़ेच का आईडी.
uploadTotal number
सर्वर को भेजी जाने वाली बाइट की संख्या.
uploaded number
भेजे गए बाइट की संख्या.
downloadTotal number
बैकग्राउंड फ़ेच के रजिस्टर होने के दौरान दी गई वैल्यू या शून्य.
downloaded number
सफलता के साथ मिलने वाली बाइट की संख्या.

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

result

निम्न में से एक:

  • "" - बैकग्राउंड फ़ेच करने की सुविधा चालू है. इसलिए, अभी तक कोई नतीजा नहीं मिला.
  • "success" - बैकग्राउंड फ़ेच किया गया.
  • "failure" - बैकग्राउंड को फ़ेच नहीं किया जा सका. यह वैल्यू सिर्फ़ तब दिखती है, जब बैकग्राउंड फ़ेच नहीं किया जा सकता, क्योंकि ब्राउज़र में, बैकग्राउंड को फ़ेच करने की प्रोसेस पूरी नहीं हो पाती और इसे फिर से शुरू नहीं किया जा सकता.
failureReason

निम्न में से एक:

  • "" - बैकग्राउंड को फ़ेच नहीं किया जा सका.
  • "aborted" – उपयोगकर्ता ने बैकग्राउंड को फ़ेच करने की प्रोसेस रद्द की या abort() को कॉल किया गया.
  • "bad-status" - किसी एक जवाब की स्थिति 'ठीक नहीं है' थी, जैसे कि 404.
  • "fetch-error" - किसी दूसरी वजह से फ़ेच नहीं किया जा सका, उदाहरण के लिए सीओआरएस, MIX, गलत आंशिक रिस्पॉन्स या फ़ेच करने के लिए सामान्य नेटवर्क विफलता फिर से प्रयास नहीं किया जा सकता.
  • "quota-exceeded" - बैकग्राउंड में स्टोरेज कोटा पूरा हो गया फ़ेच करें.
  • "download-total-exceeded" - दिया गया `downloadTotal` था पार हो गया है.
recordsAvailable boolean
क्या इन अनुरोधों/रिस्पॉन्स को ऐक्सेस किया जा सकता है?

एक बार गलत होने पर match और matchAll का इस्तेमाल नहीं किया जा सकता.

तरीके
abort() यह फ़ंक्शन Promise<boolean>
बैकग्राउंड फ़ेच करने की प्रोसेस रद्द करता है.

अगर फ़ेच करने की प्रोसेस रद्द कर दी जाती है, तो लौटाए गए प्रॉमिस की वैल्यू 'सही' हो जाती है.

matchAll(request, opts) वापस करता है Promise<Array<BackgroundFetchRecord>>
अनुरोध पाएं और जवाब शामिल हैं.

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

ज़्यादा जानकारी के लिए नीचे देखें.

match(request, opts) Promise<BackgroundFetchRecord>
जैसा ऊपर बताया गया है, लेकिन इससे रिज़ॉल्व हो जाता है पहला मिलान.
इवेंट
progress uploaded, downloaded, result या इनमें से किसी एक पर ट्रिगर होता है failureReason बदलाव.

प्रोग्रेस ट्रैक की जा रही है

ऐसा 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 है और यह ऐसा दिखता है:

प्रॉपर्टी
request Request
वह अनुरोध जो किया गया था.
responseReady Promise<Response>
फ़ेच किया गया जवाब.

जवाब, प्रॉमिस के पीछे होता है, क्योंकि हो सकता है कि यह अब तक न मिला हो. वादा फ़ेच न होने पर, अस्वीकार कर दिया जाएगा.

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

इवेंट
backgroundfetchsuccess सब कुछ फ़ेच किया गया.
backgroundfetchfailure एक या ज़्यादा फ़ेच नहीं किए जा सके.
backgroundfetchabort एक या उससे ज़्यादा फ़ेच नहीं किए जा सके.

यह वाकई तब काम आता है, जब आपको इससे जुड़े डेटा को हटाने की ज़रूरत हो.

backgroundfetchclick उपयोगकर्ता ने डाउनलोड की प्रोसेस के यूज़र इंटरफ़ेस (यूआई) पर क्लिक किया.

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

प्रॉपर्टी
registration BackgroundFetchRegistration
तरीके
updateUI({ title, icons }) आपको प्रारंभ में सेट किए गए शीर्षक/आइकॉन बदलने देता है. ऐसा करना ज़रूरी नहीं है, लेकिन इसकी मदद से अगर ज़रूरी हो, तो ज़्यादा जानकारी दें. ऐसा आप इस समय के दौरान सिर्फ़ *एक बार* कर सकते हैं backgroundfetchsuccess और backgroundfetchfailure इवेंट.

सफलता/फ़ेल होने पर प्रतिक्रिया देना

हम 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');
  }
});

अन्य संसाधन

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