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

1. शुरुआती जानकारी और सेटअप

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

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

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

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

आपको क्या बनाना होगा

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

आपको इनके बारे में जानकारी मिलेगी

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

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

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

कोडलैब इस्तेमाल करने का तरीका

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

2. Badging API

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

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

इस एपीआई के काम करने के लिए, आपको होम स्क्रीन पर इंस्टॉल किया गया PWA इंस्टॉल करना होगा. इसलिए, सबसे पहले एक PWA इंस्टॉल करें. जैसे, दुनिया भर में मशहूर airhorner.com. स्क्रीन पर सबसे ऊपर दाएं कोने में मौजूद, इंस्टॉल करें बटन पर क्लिक करें या मैन्युअल तरीके से इंस्टॉल करने के लिए, तीन बिंदु वाले मेन्यू का इस्तेमाल करें.

8b7fa8b3c94c6bdd.png

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

98e90422167ac786.png

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

बैज सेट करना

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

b5e39de7a1775054.png

यह कैसे काम करता है? असल में, कोड यह है:

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

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

eed10c3ffe59999.png

बैज हटाना

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

navigator.setExperimentalAppBadge(0);

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

navigator.clearExperimentalAppBadge();

33eafb314a3a9f30.png

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

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

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

हां नहीं

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

हां नहीं

क्या आप कुछ और कहना चाहते हैं? क्या आपको सुविधाएं मिलनी बाकी थीं? कृपया इस सर्वे में हिस्सा लेकर अपना सुझाव या राय दें या शिकायत करें. धन्यवाद!

3. नेटिव फ़ाइल सिस्टम एपीआई

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

फ़ाइल पढ़ना

"नमस्ते, दुनिया" Native File System API का इस्तेमाल, लोकल फ़ाइल को पढ़ने और फ़ाइल का कॉन्टेंट पाने के लिए किया जाता है. कोई सादी .txt फ़ाइल बनाएं और कुछ टेक्स्ट डालें. इसके बाद, example.com जैसी किसी भी सुरक्षित साइट (जो एचटीटीपीS पर दिखाई जाती है) पर जाएं और DevTools कंसोल खोलें. कोड स्निपेट को नीचे कंसोल में चिपकाएं. Native File System API को उपयोगकर्ता जेस्चर की ज़रूरत होती है, इसलिए हम दस्तावेज़ में एक Double-click हैंडलर अटैच करते हैं. हमें बाद में फ़ाइल हैंडल की ज़रूरत पड़ेगी, इसलिए हम इसे सिर्फ़ ग्लोबल वैरिएबल बनाते हैं.

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

c02679081eb4d538.png

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

d98962600d62d149.png

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

eace3d15bd4f8192.png

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

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

document.body.contentEditable = true;

ca32797417449343.png

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

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

d2729a8f76f43073.png

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

2eccf61fe4a46109.png

202263abdedae737.png

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

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

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

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

हां नहीं

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

हां नहीं

क्या आप कुछ और कहना चाहते हैं? क्या आपको सुविधाएं मिलनी बाकी थीं? कृपया इस सर्वे में हिस्सा लेकर अपना सुझाव या राय दें या शिकायत करें. धन्यवाद!

4. आकार पता लगाने का एपीआई

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

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

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

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

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

f4aa7b77a0a1d1f5.png

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

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 मैसेज हैं और सभी इमेज प्रोसेस नहीं की जा रही हैं. ऐसा इसलिए होता है, क्योंकि पेज के ऊपरी हिस्से में दिखने वाली इमेज, डेटा यूआरआई के तौर पर इनलाइन होती हैं और इन्हें ऐक्सेस किया जा सकता है. वहीं, वेबसाइट में फ़ोल्ड के नीचे इमेज किसी ऐसे अलग डोमेन से आती हैं जिसे सीओआरएस के साथ काम करने के लिए कॉन्फ़िगर नहीं किया गया है. सिर्फ़ डेमो के लिए, हमें इस बारे में चिंता करने की ज़रूरत नहीं है.

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

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

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

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

7778003ff472389b.png

अगर आपको कुछ और बदलाव करने की ज़रूरत है, तो हम फिर से 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 पर स्कैन के नतीजे मिले हों. साथ काम करने वाले ब्राउज़र पर, आपको टेक्स्ट की पहचान हो जाएगी और टेक्स्ट पैसेज के आस-पास बाउंडिंग बॉक्स बना रहेगा. Glitch प्रोजेक्ट को रीमिक्स करें या उसमें बदलाव करें, खास तौर पर script.js फ़ाइल को देखने के लिए, ताकि यह देखा जा सके कि यह कैसे किया जाता है.

ec2be17d1e4d01ba.png

डाइनैमिक तौर पर इसकी जांच करने के लिए, किसी निजी टैब में या मेहमान मोड में खोज नतीजों के इस पेज पर जाएं. अब नीचे दिए गए स्निपेट को 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);
  }
});

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

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

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

हां नहीं

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

हां नहीं

क्या आप कुछ और कहना चाहते हैं? क्या आपको सुविधाएं मिलनी बाकी थीं? कृपया इस सर्वे में हिस्सा लेकर अपना सुझाव या राय दें या शिकायत करें. धन्यवाद!

5. वेब शेयर टारगेट एपीआई

Web Share Target API, इंस्टॉल किए गए वेब ऐप्लिकेशन को मौजूदा ऑपरेटिंग सिस्टम के साथ, शेयर टारगेट के तौर पर रजिस्टर करने की अनुमति देता है. इससे, Web Share API या सिस्टम इवेंट, जैसे कि ऑपरेटिंग-सिस्टम लेवल पर मौजूद 'शेयर करें' बटन से शेयर किया गया कॉन्टेंट मिल सकता है.

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

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

925df16a12638bb2.png

PWA में कुछ शेयर करना

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

7216e8bb1be6d6db.png

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

9016985cb4bb48fe.png

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

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

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

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

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

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

हां नहीं

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

हां नहीं

क्या आप कुछ और कहना चाहते हैं? क्या आपको सुविधाएं मिलनी बाकी थीं? कृपया इस सर्वे में हिस्सा लेकर अपना सुझाव या राय दें या शिकायत करें. धन्यवाद!

6. वेक लॉक एपीआई

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

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

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

6f345e8c2b6c22c.png

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

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

screen वेक लॉक चेकबॉक्स.

12ed15dd94f51d4d.png

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

यह कैसे काम करता है? इस बारे में जानने के लिए, वेक लॉक डेमो ऐप्लिकेशन के Glitch प्रोजेक्ट पर जाएं और 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);
}

621c2654d06a7cce.png

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

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

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

हां नहीं

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

हां नहीं

क्या आप कुछ और कहना चाहते हैं? क्या आपको सुविधाएं मिलनी बाकी थीं? कृपया इस सर्वे में हिस्सा लेकर अपना सुझाव या राय दें या शिकायत करें. धन्यवाद!

7. कॉन्टैक्ट पिकर एपीआई

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

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

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

संपर्कों को ऐक्सेस करने के बारे में जानकारी

संपर्कों को ऐक्सेस करना एक आसान काम है. पिकर खुलने से पहले, आपके पास यह तय करने का विकल्प होता है कि आपको कौनसी फ़ील्ड चाहिए (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);
});

de94db2dfb7c67af.png

8. Async Clipboard API

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

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

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

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

अब आप क्लिपबोर्ड पर भी इमेज लिख सकते हैं. यह काम करने के लिए, आपको एक ब्लॉब के रूप में इमेज डेटा की ज़रूरत होगी, जिसे आप क्लिपबोर्ड आइटम कंस्ट्रक्टर को भेजेंगे. आखिर में, navigator.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);
}

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

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

99f6dbf35ff4f393

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

ace5945f4aca70ff.png

9. आपने कर दिखाया!

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

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

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