कॉन्टेंट इंडेक्स करने वाले एपीआई की मदद से, उन पेजों को इंडेक्स करना जिन पर ऑफ़लाइन काम करने की सुविधा है

सर्विस वर्कर को ब्राउज़र को यह बताने में सक्षम बनाना कि कौनसे पेज ऑफ़लाइन काम करते हैं

Jeff Posnick

कॉन्टेंट इंडेक्स करने वाला एपीआई क्या है?

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

यह एक खोज समस्या है; आपका PWA उपयोगकर्ताओं को इंटरनेट के बिना इस्तेमाल किए जा सकने वाले कॉन्टेंट की जानकारी कैसे दे सकता है, ताकि वे उपलब्ध कॉन्टेंट को खोज और देख सकें? कॉन्टेंट इंडेक्स करने वाले एपीआई का इस्तेमाल करके, इस समस्या को हल किया जा सकता है. डेवलपर के लिए बना यह समाधान, सर्विस वर्कर के लिए बनाया गया एक्सटेंशन है. इससे डेवलपर, ऑफ़लाइन इस्तेमाल किए जा सकने वाले पेजों के यूआरएल और मेटाडेटा को ऐसे लोकल इंडेक्स में जोड़ सकते हैं जिसे ब्राउज़र मैनेज करता है. यह सुविधा, Chrome 84 और उसके बाद के वर्शन में उपलब्ध है.

इंडेक्स में आपके PWA का कॉन्टेंट और इंस्टॉल किए गए अन्य PWA का कॉन्टेंट अपने-आप भर जाने के बाद, ब्राउज़र पर यह दिखेगा, जैसा कि यहां दिखाया गया है.

Chrome के नए टैब पेज पर मौजूद, डाउनलोड मेन्यू आइटम का स्क्रीनशॉट.
सबसे पहले, Chrome के 'नया टैब' पेज पर डाउनलोड मेन्यू आइटम को चुनें.
इंडेक्स में जोड़े गए मीडिया और लेख.
इंडेक्स में जोड़े गए मीडिया और लेख, आपके लिए लेख सेक्शन में दिखेंगे.

इसके अलावा, जब Chrome को पता चलता है कि कोई उपयोगकर्ता ऑफ़लाइन है, तो वह कॉन्टेंट का सुझाव दे सकता है.

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

उदाहरण देखें

कॉन्टेंट इंडेक्स करने वाले एपीआई के बारे में जानने का सबसे अच्छा तरीका, सैंपल के तौर पर ऐप्लिकेशन आज़माना है.

  1. पक्का करें कि इसके साथ काम करने वाले ब्राउज़र और प्लैटफ़ॉर्म का इस्तेमाल किया जा रहा हो. फ़िलहाल, यह Android पर Chrome 84 या उसके बाद के वर्शन तक ही सीमित है. about://version पर जाकर देखें कि Chrome का किस वर्शन का इस्तेमाल किया जा रहा है.
  2. https://contentindex.dev पर जाएं
  3. सूची में एक या उससे ज़्यादा आइटम के आगे बने + बटन पर क्लिक करें.
  4. (वैकल्पिक) अपने डिवाइस का वाई-फ़ाई और सेल्युलर डेटा कनेक्शन अक्षम करें या अपने ब्राउज़र को ऑफ़लाइन ले जाने के लिए हवाई जहाज़ मोड सक्षम करें.
  5. Chrome के मेन्यू में डाउनलोड चुनें और आपके लिए लेख टैब पर जाएं.
  6. पहले से सेव किए गए कॉन्टेंट को ब्राउज़ करें.

GitHub पर सैंपल ऐप्लिकेशन का सोर्स देखा जा सकता है.

स्क्रैपबुक PWA ऐप्लिकेशन का एक और सैंपल, जिसमें वेब शेयर टारगेट एपीआई के साथ कॉन्टेंट इंडेक्स करने वाले एपीआई के इस्तेमाल के बारे में बताया गया है. यह कोड एक तकनीक के बारे में बताता है, ताकि कॉन्टेंट इंडेक्स करने वाले एपीआई को कैश मेमोरी एपीआई का इस्तेमाल करके, वेब ऐप्लिकेशन में सेव किए गए आइटम के साथ सिंक रखा जा सके.

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

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

किस तरह के यूआरएल को ऑफ़लाइन सुविधा वाले यूआरएल के तौर पर इंडेक्स किया जा सकता है?

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

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

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

खास जानकारी

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

कॉन्टेंट इंडेक्स करने का पहला चरण, मौजूदा ServiceWorkerRegistration की पहचान फ़ाइल पाना है. navigator.serviceWorker.ready का इस्तेमाल करना सबसे आसान तरीका है:

const registration = await navigator.serviceWorker.ready;

// Remember to feature-detect before using the API:
if ('index' in registration) {
  // Your Content Indexing API code goes here!
}

अगर किसी वेब पेज के बजाय, सर्विस वर्कर से ही कॉन्टेंट इंडेक्स करने वाले एपीआई को कॉल किया जा रहा है, तो सीधे registration के ज़रिए ServiceWorkerRegistration से संपर्क किया जा सकता है. इसे ServiceWorkerGlobalScope. के हिस्से के तौर पहले ही तय किया जा चुका है

इंडेक्स में जोड़ा जा रहा है

यूआरएल और उनसे जुड़े मेटाडेटा को इंडेक्स करने के लिए, add() तरीके का इस्तेमाल करें. यह आपको तय करना होता है कि इंडेक्स में आइटम कब जोड़े जाएं. आप किसी इनपुट के जवाब में, जैसे कि "ऑफ़लाइन सेव करें" बटन पर क्लिक करके इंडेक्स में जोड़ना चाहें. इसके अलावा, कैश मेमोरी में सेव किए गए डेटा को जब भी समय-समय पर सिंक करने की सुविधा से अपडेट किया जाता है, तब आपके पास आइटम अपने-आप जोड़ने का विकल्प होता है.

await registration.index.add({
  // Required; set to something unique within your web app.
  id: 'article-123',

  // Required; url needs to be an offline-capable HTML page.
  url: '/articles/123',

  // Required; used in user-visible lists of content.
  title: 'Article title',

  // Required; used in user-visible lists of content.
  description: 'Amazing article about things!',

  // Required; used in user-visible lists of content.
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],

  // Optional; valid categories are currently:
  // 'homepage', 'article', 'video', 'audio', or '' (default).
  category: 'article',
});

एंट्री जोड़ने से सिर्फ़ कॉन्टेंट के इंडेक्स पर असर पड़ता है. इससे कैश मेमोरी में कुछ भी नहीं जुड़ता है.

एज केस: अगर आपके आइकॉन fetch हैंडलर पर निर्भर हैं, तो window कॉन्टेक्स्ट से add() को कॉल करें

add() को कॉल करने पर, Chrome हर आइकॉन के यूआरएल का अनुरोध करेगा. इससे यह पक्का किया जा सकेगा कि इंडेक्स किए गए कॉन्टेंट की सूची दिखाते समय, आइकॉन की एक कॉपी इस्तेमाल की जाए.

  • अगर window कॉन्टेक्स्ट से (दूसरे शब्दों में, अपने वेब पेज से) add() को कॉल किया जाता है, तो यह अनुरोध आपके सर्विस वर्कर पर एक fetch इवेंट ट्रिगर करेगा.

  • अगर अपने सर्विस वर्कर में (शायद किसी दूसरे इवेंट हैंडलर के अंदर) add() को कॉल किया जाता है, तो अनुरोध से सर्विस वर्कर के fetch हैंडलर को ट्रिगर नहीं किया जाएगा. आइकॉन सीधे ही फ़ेच किए जाएंगे. इसके लिए, किसी सर्विस वर्कर की भागीदारी नहीं होगी. अगर आपके आइकॉन आपके fetch हैंडलर पर निर्भर करते हैं, तो इस बात का ध्यान रखें. इसकी वजह यह हो सकती है कि वे सिर्फ़ लोकल कैश मेमोरी में मौजूद होते हैं, नेटवर्क पर नहीं. अगर ऐसा है, तो पक्का करें कि आप add() को सिर्फ़ window कॉन्टेक्स्ट से कॉल करें.

इंडेक्स के कॉन्टेंट की लिस्टिंग करना

getAll() वाला तरीका, इंडेक्स की गई एंट्री और उनके मेटाडेटा की ऐसी सूची के लिए प्रॉमिस देता है जिसे बार-बार पढ़ा जा सकता है. वापस की गई एंट्री में, add() के साथ सेव किया गया पूरा डेटा शामिल होगा.

const entries = await registration.index.getAll();
for (const entry of entries) {
  // entry.id, entry.launchUrl, etc. are all exposed.
}

इंडेक्स से आइटम हटाना

इंडेक्स से किसी आइटम को हटाने के लिए, आइटम के id के साथ delete() को कॉल करें:

await registration.index.delete('article-123');

delete() को कॉल करने से सिर्फ़ इंडेक्स पर असर पड़ता है. यह कैश मेमोरी से कुछ भी नहीं मिटाता है.

उपयोगकर्ता के डेटा को मिटाने के इवेंट को मैनेज करना

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

'मिटाएं' मेन्यू आइटम.

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

आपको अपने contentdelete हैंडलर में registration.index.delete() को कॉल करने की ज़रूरत नहीं है. अगर इवेंट ट्रिगर कर दिया गया है, तो ब्राउज़र उस इंडेक्स को पहले ही मिटा चुका है.

self.addEventListener('contentdelete', (event) => {
  // event.id will correspond to the id value used
  // when the indexed content was added.
  // Use that value to determine what content, if any,
  // to delete from wherever your app stores it—usually
  // the Cache Storage API or perhaps IndexedDB.
});

एपीआई के डिज़ाइन के बारे में सुझाव, शिकायत या राय

क्या एपीआई में ऐसा कुछ है जो खराब है या उम्मीद के मुताबिक काम नहीं करता है? या क्या कोई ऐसी चीज़ छूट गई है जो आपको अपने आइडिया को लागू करने के लिए चाहिए?

कॉन्टेंट इंडेक्स करने वाले एपीआई के बारे में जानकारी देने वाले GitHub रेपो में, कोई समस्या दर्ज करें या किसी मौजूदा समस्या पर अपने विचार जोड़ें.

क्या लागू करने में कोई समस्या है?

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली?

https://new.crbug.com पर जाकर गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें, इसे फिर से बनाने के आसान निर्देश दें, और कॉम्पोनेंट को Blink>ContentIndexing पर सेट करें.

क्या आपको इस एपीआई का इस्तेमाल करना है?

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

  • हैशटैग #ContentIndexingAPI और उसका इस्तेमाल कहां और कैसे किया जा रहा है, इस बारे में जानकारी देकर @ChromiumDev को एक ट्वीट भेजें.

कॉन्टेंट इंडेक्स करने की सुविधा से, सुरक्षा और निजता पर क्या असर पड़ता है?

W3C की सुरक्षा और निजता से जुड़े सवालों की सूची के जवाब में दिए गए जवाब देखें. अगर आपका कुछ और सवाल है, तो कृपया प्रोजेक्ट के GitHub रेपो के ज़रिए चर्चा शुरू करें.

Unsplash पर मक्सिम कहरलिटस्की की हीरो इमेज.