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

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

Jeff Posnick

पूरा हुआ: Content इंडेक्स करने वाला एपीआई, capabilities प्रोजेक्ट का हिस्सा है, Android के लिए Chrome 84 में लॉन्च किया गया.

Content इंडेक्स API क्या है?

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

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

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

सबसे पहले, Chrome के नए टैब पेज पर, डाउनलोड किए गए वीडियो मेन्यू आइटम को चुनें.

इंडेक्स में जोड़े गए मीडिया और लेख आपके लिए लेख सेक्शन.

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

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

ध्यान दें: Content इंडेक्स करने वाले एपीआई को खोजा नहीं जा सकता. हालांकि, आपके पास पूरी सूची देखने का विकल्प है इंडेक्स की गई सभी एंट्री में से, इंडेक्स किए गए मेटाडेटा के लिए क्वेरी करने का कोई तरीका नहीं है. का इस्तेमाल किया है.

इसे चलाकर देखें

Content इंडेक्स करने वाले एपीआई के बारे में जानने का सबसे सही तरीका है कि इसके लिए, सैंपल का इस्तेमाल किया जाए का इस्तेमाल करें.

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

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

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

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

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

किस तरह के यूआरएल को, ऑफ़लाइन होने की क्षमता के तौर पर इंडेक्स किया जा सकता है?

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

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

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

खास जानकारी

Contentindex API में तीन तरह के काम किए जा सकते हैं: जोड़ना, लिस्टिंग करना, और मेटाडेटा हटाना. इन तरीकों को 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!
}

अगर किसी सर्विस वर्कर से कॉन्टेंट इंडेक्स करने वाले एपीआई को कॉल किया जा रहा है, वेब पेज के बजाय, यहां दी गई ServiceWorkerRegistration सीधे registration से. यह पहले से तय किया जाएगा 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() को कॉल करने से सिर्फ़ इंडेक्स पर असर पड़ता है. यह कैश मेमोरी में सेव होने का विकल्प चुनें.

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

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

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

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

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

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.
});

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

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

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

Content इंडेक्स करने के लिए एपीआई की जानकारी देने वाले GitHub रेपो पर कोई समस्या दर्ज करें या अपनी राय दें करने के लिए प्रोत्साहित करते हैं.

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

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

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

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

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

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

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

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

Unस्प्लैश पर, मैक्सिम काहर्लीत्स्की की हीरो इमेज.