वेब क्षमताओं का कोडलैब

वेब की क्षमताएं

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

हालांकि, कुछ सुविधाएं—जैसे फ़ाइल सिस्टम को ऐक्सेस करना और कुछ समय से इस्तेमाल में न होने की पहचान करना—कुछ डिवाइस के लिए उपलब्ध हैं, लेकिन वेब पर उपलब्ध नहीं हैं#39. ये सुविधाएं मौजूद नहीं होने का मतलब है कि कुछ तरह के ऐप्लिकेशन वेब पर डिलीवर नहीं किए जा सकते या वे काम के नहीं होते हैं.

हम डेवलपर के साथ-साथ दूसरे ब्राउज़र वेंडर से शुरुआती सुझाव लेते हुए, इन नई सुविधाओं को ओपन और पारदर्शी तरीके से डिज़ाइन करेंगे और इन्हें डेवलप करेंगे. इससे, हम इंटरऑपरेबल डिज़ाइन को पक्का करते रहेंगे.

आप क्या बनाते हैं

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

आप क्या #39;जानेंगे

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

आपको इनकी ज़रूरत होगी

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

कोडलैब (कोड बनाना सीखना) से जुड़े तरीके

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

बैज एपीआई का मकसद, उपयोगकर्ताओं को बैकग्राउंड में होने वाले कामों पर ध्यान देना होता है. इस कोडलैब में डेमो की आसानी के लिए, एपीआई का इस्तेमाल करके उपयोगकर्ताओं को #39; फ़ोरग्राउंड में होने वाले कुछ और ध्यान (33) पर ध्यान दें. इसके बाद, आप बैकग्राउंड में होने वाली गतिविधियों में मानसिक तौर पर ट्रांसफ़र कर सकते हैं.

एयरहॉर्नर इंस्टॉल करें

इस एपीआई के काम करने के लिए, आपको एक ऐसा PWA चाहिए जो होम स्क्रीन पर इंस्टॉल हो. इसलिए, सबसे पहले एक PWA इंस्टॉल करें. उदाहरण के लिए, दुनिया भर में मशहूर air

इसके बाद, पुष्टि करने का अनुरोध दिखेगा. इसके बाद, इंस्टॉल करें पर क्लिक करें.

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

बैज सेट करना

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

यह कैसे काम करता है? बुनियादी तौर पर, कोड यह होता है:

let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
  navigator.setExperimentalAppBadge(++hornCounter);
});

एयरहॉर्न की कई बार आवाज़ करें और PWA' का आइकॉन देखें: यह हर एक समय पर अपडेट होगा. एयरहॉर्न की आवाज़. यह इतना आसान है.

बैज हटाना

काउंटर 99 तक जाता है और फिर शुरू होता है. आप इसे मैन्युअल रूप से भी रीसेट कर सकते हैं. DevTools कंसोल टैब खोलें, नीचे की लाइन को चिपकाएं, और Enter दबाएं. 

navigator.setExperimentalAppBadge(0);

इसके अलावा, आप नीचे दिए गए स्निपेट में दिखाए गए बैज को साफ़ तौर पर साफ़ करके बैज से छुटकारा भी पा सकते हैं. अब आपके PWA&#39 आइकॉन को फिर से बैज की तरह दिखना चाहिए.

navigator.clearExperimentalAppBadge();

सुझाव, शिकायत या राय

इस एपीआई के बारे में आपकी क्या राय है? कृपया इस सर्वे के जवाब में हमारी मदद करें:

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

हां नहीं

क्या आपको वीडियो चलाने का उदाहरण मिला?

हां नहीं

आप और कुछ कहना चाहते हैं? क्या उनमें कोई सुविधा नहीं है? कृपया इस सर्वे में तुरंत सुझाव भेजें. धन्यवाद!

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

फ़ाइल पढ़ना

नेटिव फ़ाइल सिस्टम एपीआई का मूल कोट है. दुनिया भर की कोटेशन के साथ-साथ फ़ाइल के कॉन्टेंट को ऐक्सेस करने के लिए भी &कोटेशन पाएं. एक सादा .txt फ़ाइल बनाएं और कुछ टेक्स्ट डालें. इसके बाद, सुरक्षित किसी साइट पर जाने के लिएS) जैसी साइट पर जाएं. जैसे, example.com और DevTools कंसोल खोलें. कोड स्निपेट को कंसोल में नीचे चिपकाएं. नेटिव फ़ाइल सिस्टम एपीआई के लिए उपयोगकर्ता के जेस्चर (हाव-भाव) की ज़रूरत होती है. इसलिए, हम दस्तावेज़ पर दो बार क्लिक करके हैंडलर अटैच करते हैं. हमें बाद में फ़ाइल हैंडल की ज़रूरत पड़ेगी, इसलिए हम इसे सिर्फ़ एक ग्लोबल वैरिएबल बनाते हैं.

document.ondblclick = async () => {
  window.handle = await window.chooseFileSystemEntries();
  const file = await handle.getFile();
  document.body.textContent = await file.text();
};

इसके बाद, example.com पेज पर कहीं भी दो बार क्लिक करने पर फ़ाइल पिकर दिखेगा.

वह .txt फ़ाइल चुनें जिसे आपने पहले बनाया था. इसके बाद, body कॉन्टेंट को example.com के असली कॉन्टेंट से बदल दिया जाएगा.

फ़ाइल सेव करना

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

document.body.contentEditable = true;

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

document.onclick = async () => {
  const writer = await handle.createWriter();
  await writer.truncate(0);
  await writer.write(0, document.body.textContent);
  await writer.close();
};

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

बधाई हो! आपने अभी-अभी [citation needed] का दुनिया का सबसे छोटा टेक्स्ट एडिटर बनाया है.

सुझाव, शिकायत या राय

इस एपीआई के बारे में आपकी क्या राय है? कृपया इस सर्वे के जवाब में हमारी मदद करें:

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

हां नहीं

क्या आपको वीडियो चलाने का उदाहरण मिला?

हां नहीं

आप और कुछ कहना चाहते हैं? क्या उनमें कोई सुविधा नहीं है? कृपया इस सर्वे में तुरंत सुझाव भेजें. धन्यवाद!

आकार की पहचान करने वाला एपीआई, तेज़ी से काम करने वाले डेटा की पहचान करने वाले टूल (जैसे, मानव चेहरे के लिए) की ऐक्सेस देता है. साथ ही, यह इमेज और/या लाइव इमेज फ़ीड पर भी काम करता है. ऑपरेटिंग सिस्टम में Android की सुविधा देने वाले फ़ेस डिटेक्टर जैसे परफ़ॉर्म करने वाले और काफ़ी ऑप्टिमाइज़ किए गए फ़ीचर मौजूद हैं. आकार की पहचान करने वाले एपीआई में, इन स्थानीय तरीकों को लागू किया जाता है और JavaScript इंटरफ़ेस के सेट के ज़रिए उन्हें दिखाया जाता है.

फ़िलहाल, इन सुविधाओं का इस्तेमाल किया जा सकता है: FaceDetector इंटरफ़ेस से चेहरे की पहचान, BarcodeDetector इंटरफ़ेस से बारकोड की पहचान, और TextDetector इंटरफ़ेस से टेक्स्ट की पहचान करना (ऑप्टिकल कैरेक्टर रिकग्निशन).

चेहरे की पहचान

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

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

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

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

आप देखेंगे कि DOMException में कुछ समस्याएं हैं और सभी इमेज प्रोसेस नहीं हो रही हैं. ऐसा इसलिए, क्योंकि पेज के ऊपरी हिस्से में मौजूद इमेज को डेटा यूआरआई के तौर पर इनलाइन किया जाता है और इस तरह उन्हें ऐक्सेस किया जा सकता है. इस दौरान, फ़ोल्ड के नीचे दिखाई देने वाली इमेज किसी दूसरे डोमेन से आती हैं जिसे सीओआरएस के साथ काम करने के लिए #39;कॉन्फ़िगर नहीं किया गया है. डेमो के लिए, हमें इस बारे में चिंता करने की कोई ज़रूरत नहीं है.

चेहरे की पहचान ज़ाहिर करने वाली सुविधा

चेहरे की पहचान करने के साथ-साथ, macOS चेहरे के लैंडमार्क का पता लगाने के साथ भी काम करता है. चेहरे के लैंडमार्क की पहचान करने के लिए, नीचे दिए गए स्निपेट को कंसोल में चिपकाएं. रिमाइंडर: crbug.com/914348 की वजह से, लैंडमार्क की लाइन-अप बिल्कुल सही नहीं है, लेकिन आप देख सकते हैं कि यह सुविधा कहां से चल रही है और यह सुविधा कितनी असरदार हो सकती है.

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const faces = await new FaceDetector().detect(img);
    faces.forEach(face => {
      const div = document.createElement('div');
      const box = face.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left + left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      img.before(div);

      const landmarkSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      landmarkSVG.style.position = 'absolute';
      landmarkSVG.classList.add('landmarks');
      landmarkSVG.setAttribute('viewBox', `0 0 ${img.width} ${img.height}`);
      landmarkSVG.style.width = `${img.width}px`;
      landmarkSVG.style.height = `${img.height}px`;
      face.landmarks.map((landmark) => {                    
        landmarkSVG.innerHTML += `<polygon class="landmark-${landmark.type}" points="${
        landmark.locations.map((point) => {          
          return `${scaleX * point.x},${scaleY * point.y} `;
        }).join(' ')
      }" /></svg>`;          
      });
      div.before(landmarkSVG);
    });
  } catch(e) {
    console.error(e);
  }
});

बारकोड की पहचान करना

आकार की पहचान करने वाले एपीआई की दूसरी सुविधा बारकोड की पहचान करना है. पहले की तरह, हमें बारकोड वाले पेज की ज़रूरत है, जैसे कि यह पेज. जब आप किसी ब्राउज़र में इसे खोलेंगे, तब आपको अलग-अलग क्यूआर कोड दिखेंगे. ग्लिच प्रोजेक्ट को रीमिक्स करें या उसमें बदलाव करें.खास तौर पर, script.js फ़ाइल पर जाकर देखें कि यह कैसे ##39;

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

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const barcodes = await new BarcodeDetector().detect(img);
    barcodes.forEach(barcode => {
      const div = document.createElement('div');
      const box = barcode.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.textContent = `${barcode.rawValue}`;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

टेक्स्ट की पहचान

आकार की पहचान करने वाले एपीआई की आखिरी सुविधा है टेक्स्ट की पहचान करना. अब आपको ड्रिल की जानकारी है: हमें ऐसी इमेज वाले पेज की ज़रूरत है जिन पर टेक्स्ट हो, जैसे कि Google Books में स्कैन के नतीजे वाला यह पेज. जिन ब्राउज़र पर यह सुविधा काम करती है उन पर आपको टेक्स्ट पहचाना जाएगा. साथ ही, टेक्स्ट पैसेज के आस-पास एक बाउंडिंग बॉक्स दिखेगा. ग्लिच प्रोजेक्ट को रीमिक्स करें या उसमें बदलाव करें.खास तौर पर, script.js फ़ाइल पर जाकर देखें कि यह कैसे ##39;

इसकी डाइनैमिक तरीके से जांच करने के लिए, निजी टैब या मेहमान मोड में Search के नतीजों वाले पेज पर जाएं. अब नीचे दिए गए स्निपेट को Chrome DevTools Console टैब में चिपकाएं. थोड़ी सी इंतज़ार करने के बाद, कुछ टेक्स्ट पहचान लिए जाएंगे. 

document.querySelectorAll('img[alt]:not([alt=""])').forEach(async (img) => {
  try {
    const texts = await new TextDetector().detect(img);
    texts.forEach(text => {
      const div = document.createElement('div');
      const box = text.boundingBox;
      const computedStyle = getComputedStyle(img);
      const [top, right, bottom, left] = [
        computedStyle.marginTop,
        computedStyle.marginRight,
        computedStyle.marginBottom,
        computedStyle.marginLeft
      ].map(m => parseInt(m, 10));
      const scaleX = img.width / img.naturalWidth;
      const scaleY = img.height / img.naturalHeight;
      div.style.backgroundColor = 'rgba(255, 255, 255, 0.75)';
      div.style.position = 'absolute';
      div.style.top = `${scaleY * box.top + top}px`;
      div.style.left = `${scaleX * box.left - left}px`;
      div.style.width = `${scaleX * box.width}px`;
      div.style.height = `${scaleY * box.height}px`;
      div.style.color = 'black';
      div.style.fontSize = '14px';      
      div.innerHTML = text.rawValue;
      img.before(div);
    });
  } catch(e) {
    console.error(e);
  }
});

सुझाव, शिकायत या राय

इस एपीआई के बारे में आपकी क्या राय है? कृपया इस सर्वे के जवाब में हमारी मदद करें:

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

हां नहीं

क्या आपको वीडियो चलाने का उदाहरण मिला?

हां नहीं

आप और कुछ कहना चाहते हैं? क्या उनमें कोई सुविधा नहीं है? कृपया इस सर्वे में तुरंत सुझाव भेजें. धन्यवाद!

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

शेयर करने के लिए PWA इंस्टॉल करना

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

PWA को कुछ शेयर करना

इसके बाद, आपको शेयर करने के लिए किसी चीज़ की ज़रूरत होगी, जैसे कि Google Photos से कोई फ़ोटो. शेयर करें बटन का इस्तेमाल करें और शेयर करने के टारगेट के तौर पर स्क्रैपबुक PWA चुनें.

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

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

इसके बाद, शेयर करने का हिस्सा इस यूआरएल टेंप्लेट को अपने-आप भर देता है (या तो शेयर करने की कार्रवाई के ज़रिए या वेब शेयर एपीआई का इस्तेमाल करके प्रोग्रामैटिक तौर पर कंट्रोल किया जाता है), ताकि पाने वाला पक्ष पैरामीटर को निकाल सके और उनके साथ कुछ कर सके, जैसे कि उन्हें दिखाना.

{
  "action": "/_share-target",
  "enctype": "multipart/form-data",
  "method": "POST",
  "params": {
    "files": [{
      "name": "media",
      "accept": ["audio/*", "image/*", "video/*"]
    }]
  }
}

सुझाव, शिकायत या राय

इस एपीआई के बारे में आपकी क्या राय है? कृपया इस सर्वे के जवाब में हमारी मदद करें:

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

हां नहीं

क्या आपको वीडियो चलाने का उदाहरण मिला?

हां नहीं

आप और कुछ कहना चाहते हैं? क्या उनमें कोई सुविधा नहीं है? कृपया इस सर्वे में तुरंत सुझाव भेजें. धन्यवाद!

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

स्क्रीन सेवर सेट अप करना

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

स्क्रीन वेक लॉक सेट करना

अब आपको पता है कि आपका स्क्रीन सेवर काम कर रहा है, तो आप स्क्रीन सेवर का काम करने से रोकने के लिए, "screen" प्रकार के वेक लॉक का इस्तेमाल करेंगे. Wake Lock डेमो ऐप्लिकेशन पर जाएं और चालू करें screen वेक लॉक चेकबॉक्स पर क्लिक करें.

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

तो यह कैसे काम करता है? ज़्यादा जानकारी के लिए, वेक लॉक के डेमो ऐप्लिकेशन के ग्लिच प्रोजेक्ट पर जाएं और script.js देखें. कोड का मुख्य भाग नीचे दिए गए स्निपेट में है. नया टैब खोलें (या ऐसे किसी भी टैब का इस्तेमाल करें जिसे आपने खोला हो) और Chrome डेवलपर टूल कंसोल में नीचे दिए गए कोड को चिपकाएं. जब आप विंडो पर क्लिक करेंगे, तो आपको दिखाई देने वाला एक वेक लॉक दिखेगा, जो ठीक 10 सेकंड तक (कंसोल लॉग देखें) दिखेगा. साथ ही, आपके स्क्रीन सेवर को भी शुरू नहीं होना चाहिए.

if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {  
  let wakeLock = null;
  
  const requestWakeLock = async () => {
    try {
      wakeLock = await navigator.wakeLock.request('screen');
      wakeLock.addEventListener('release', () => {        
        console.log('Wake Lock was released');                    
      });
      console.log('Wake Lock is active');      
    } catch (e) {      
      console.error(`${e.name}, ${e.message}`);
    } 
  };

  requestWakeLock();
  window.setTimeout(() => {
    wakeLock.release();
  }, 10 * 1000);
}

सुझाव, शिकायत या राय

इस एपीआई के बारे में आपकी क्या राय है? कृपया इस सर्वे के जवाब में हमारी मदद करें:

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

हां नहीं

क्या आपको वीडियो चलाने का उदाहरण मिला?

हां नहीं

आप और कुछ कहना चाहते हैं? क्या उनमें कोई सुविधा नहीं है? कृपया इस सर्वे में तुरंत सुझाव भेजें. धन्यवाद!

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

निजता से जुड़ी ज़रूरी बातें

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

संपर्कों को ऐक्सेस करना

संपर्कों को ऐक्सेस करना आसान काम है. पिकर खुलने से पहले, आप तय कर सकते हैं कि आपको कौनसे फ़ील्ड चाहिए (विकल्प name, email, और telephone हैं) और आप एक से ज़्यादा संपर्कों को ऐक्सेस करना चाहते हैं या सिर्फ़ एक संपर्क को. आप डेमो ऐप्लिकेशन खोलकर, Android डिवाइस पर इस एपीआई की जांच कर सकते हैं. नीचे दिया गया स्निपेट स्रोत कोड का काम का सेक्शन है:

getContactsButton.addEventListener('click', async () => {
  const contacts = await navigator.contacts.select(
      ['name', 'email'],
      {multiple: true});
  if (!contacts.length) {
    // No contacts were selected, or picker couldn't be opened.
    return;
  }
  console.log(contacts);
});

टेक्स्ट को कॉपी करना और चिपकाना

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

ताकि अब आप इमेज को कॉपी करके चिपका सकें. नई बात यह है कि आप क्लिपबोर्ड पर इमेज भी लिख सकते हैं. कुछ समय के लिए, एसिंक्रोनस क्लिपबोर्ड एपीआई पर टेक्स्ट कॉपी करने और चिपकाने की सुविधा काम करती है. आप navgator.clipboard.writeText() पर कॉल करके और फिर बाद में उस टेक्स्ट को navgator.clipboard.readText() को कॉल करके, क्लिपबोर्ड पर टेक्स्ट कॉपी कर सकते हैं.

इमेज कॉपी करना और चिपकाना

अब आप क्लिपबोर्ड पर इमेज भी लिख सकते हैं. इसके काम करने के लिए, आपको ब्लॉब के रूप में इमेज डेटा की ज़रूरत होगी जिसे आप क्लिपबोर्ड आइटम कंस्ट्रक्टर को पास करें. आखिर में, आप navgator.clipboard.write() पर कॉल करके इस क्लिपबोर्ड आइटम को कॉपी कर सकते हैं.

// Copy: Writing image to the clipboard
try {
  const imgURL = 'https://developers.google.com/web/updates/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem(Object.defineProperty({}, blob.type, {
      value: blob,
      enumerable: true
    }))
  ]);
  console.log('Image copied.');
} catch(e) {
  console.error(e, e.message);
}

इमेज को क्लिपबोर्ड से वापस चिपकाना बहुत आसान है, लेकिन उसमें ब्लॉब को क्लिपबोर्ड से वापस लेना शामिल है. एक से ज़्यादा होने की वजह से, आपको उनमें से तब तक लूप में रहना चाहिए, जब तक कि आपकी दिलचस्पी #33 न हो. सुरक्षा कारणों से, इस समय यह PNG इमेज तक सीमित है, लेकिन आने वाले समय में ज़्यादा इमेज फ़ॉर्मैट भी काम कर सकते हैं.

async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      try {
        for (const type of clipboardItem.types) {
          const blob = await clipboardItem.getType(type);
          console.log(URL.createObjectURL(blob));
        }
      } catch (e) {
        console.error(e, e.message);
      }
    }
  } catch (e) {
    console.error(e, e.message);
  }
}

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

ऐक्सेस देने के बाद, आप क्लिपबोर्ड से इमेज को पढ़ सकते हैं और उसे ऐप्लिकेशन में चिपका सकते हैं:

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

हम चाहते हैं कि आप हमारे अधिकारों के लैंडिंग पेज को समय-समय पर देखते रहें. हम इसे अप-टू-डेट रखेंगे और इसमें उन एपीआई के बारे में पूरी जानकारी देने वाले लेख दिखेंगे जिन पर हम काम करते हैं. रॉक इन #39;!
बनाए रखें

टॉम और पूरी क्षमता टीम 🐡