1. परिचय और सेटअप
वेब की क्षमताएं
हम वेब और नेटिव के बीच क्षमता के अंतर को कम करना चाहते हैं. साथ ही, डेवलपर के लिए ओपन वेब पर शानदार अनुभव देना आसान बनाना चाहते हैं. हमारा मानना है कि हर डेवलपर के पास, वेब पर बेहतरीन अनुभव देने के लिए ज़रूरी सुविधाएं होनी चाहिए. हम वेब को और भी बेहतर बनाने के लिए प्रतिबद्ध हैं.
हालांकि, कुछ ऐसी सुविधाएं हैं जो नेटिव ऐप्लिकेशन के लिए उपलब्ध हैं, लेकिन वेब ऐप्लिकेशन के लिए उपलब्ध नहीं हैं. जैसे, फ़ाइल सिस्टम ऐक्सेस करना और उपयोगकर्ता की निष्क्रियता का पता लगाना. इन सुविधाओं के न होने का मतलब है कि कुछ तरह के ऐप्लिकेशन को वेब पर डिलीवर नहीं किया जा सकता या वे कम काम के होते हैं.
हम इन नई सुविधाओं को खुले और पारदर्शी तरीके से डिज़ाइन और डेवलप करेंगे. इसके लिए, हम मौजूदा ओपन वेब प्लैटफ़ॉर्म के स्टैंडर्ड प्रोसेस का इस्तेमाल करेंगे. साथ ही, डिज़ाइन को बेहतर बनाने के लिए, डेवलपर और अन्य ब्राउज़र वेंडर से शुरुआती सुझाव लेंगे, ताकि यह पक्का किया जा सके कि डिज़ाइन इंटरऑपरेबल हो.
आपको क्या बनाने को मिलेगा
इस कोडलैब में, आपको कई नए वेब एपीआई के साथ काम करने का मौका मिलेगा. इनमें से कुछ एपीआई, फ़्लैग के पीछे ही उपलब्ध होते हैं. इसलिए, इस कोडलैब में किसी खास प्रॉडक्ट को बनाने के बजाय, एपीआई और उनके इस्तेमाल के उदाहरणों पर फ़ोकस किया गया है.
आपको क्या सीखने को मिलेगा
इस कोडलैब में, आपको कई नए एपीआई के काम करने के बुनियादी तरीकों के बारे में बताया जाएगा. ध्यान दें कि ये तरीके अभी तक पूरी तरह से तय नहीं किए गए हैं. हम डेवलपर फ़्लो के बारे में आपके सुझाव या राय का इंतज़ार कर रहे हैं.
आपको किन चीज़ों की ज़रूरत होगी
इस कोडलैब में शामिल किए गए एपीआई, नई टेक्नोलॉजी पर आधारित हैं. इसलिए, हर एपीआई के लिए ज़रूरी शर्तें अलग-अलग हैं. कृपया हर सेक्शन की शुरुआत में, डिवाइसों के साथ काम करने से जुड़ी जानकारी को ध्यान से पढ़ें.
कोड लैब का इस्तेमाल कैसे करें
यह ज़रूरी नहीं है कि कोडलैब को क्रम से पूरा किया जाए. हर सेक्शन एक अलग एपीआई को दिखाता है. इसलिए, अपनी पसंद के हिसाब से कोई भी सेक्शन चुनें.
2. Badging API
बैजिंग एपीआई का मकसद, उपयोगकर्ताओं का ध्यान उन चीज़ों की ओर खींचना है जो बैकग्राउंड में होती हैं. इस कोडलैब में डेमो को आसान बनाने के लिए, आइए एपीआई का इस्तेमाल करके उपयोगकर्ताओं का ध्यान फ़ोरग्राउंड में हो रही किसी गतिविधि की ओर खींचें. इसके बाद, बैकग्राउंड में होने वाली चीज़ों को मानसिक तौर पर ट्रांसफ़र किया जा सकता है.
Airhorner इंस्टॉल करें
इस एपीआई का इस्तेमाल करने के लिए, आपको एक ऐसे PWA की ज़रूरत होगी जो होम स्क्रीन पर इंस्टॉल हो. इसलिए, पहला चरण एक PWA इंस्टॉल करना है. जैसे, दुनिया भर में मशहूर airhorner.com. सबसे ऊपर दाईं ओर मौजूद Install बटन पर क्लिक करें या मैन्युअल तरीके से इंस्टॉल करने के लिए, तीन बिंदु वाले मेन्यू का इस्तेमाल करें.
ऐसा करने पर, आपको पुष्टि करने वाला एक मैसेज दिखेगा. इसके बाद, इंस्टॉल करें पर क्लिक करें.
अब आपके ऑपरेटिंग सिस्टम के डॉक में एक नया आइकॉन दिखेगा. PWA लॉन्च करने के लिए, इस पर क्लिक करें. इसकी अपनी ऐप्लिकेशन विंडो होगी और यह स्टैंडअलोन मोड में चलेगा.
|
|
बैज सेट करना
अब आपके पास PWA इंस्टॉल है. आपको बैज पर दिखाने के लिए कुछ संख्यात्मक डेटा की ज़रूरत होगी. बैज में सिर्फ़ संख्याएं हो सकती हैं. The Air Horner में, sigh को कितनी बार हॉर्न किया गया है, यह आसानी से गिना जा सकता है. दरअसल, Airhorner ऐप्लिकेशन इंस्टॉल करने के बाद, हॉर्न बजाकर देखें और बैज की जांच करें. हॉर्न बजाने पर, इसे एक बार गिना जाता है.
यह कैसे काम करता है? असल में, कोड यह है:
let hornCounter = 0;
const horn = document.querySelector('.horn');
horn.addEventListener('click', () => {
navigator.setExperimentalAppBadge(++hornCounter);
});
एयरहॉर्न को दो बार बजाएं और PWA के आइकॉन को देखें: एयरहॉर्न के बजने पर, आइकॉन हर बार अपडेट होगा. यह इतना आसान है.
बैज हटाना
काउंटर 99 तक जाता है और फिर से शुरू हो जाता है. इसे मैन्युअल तरीके से भी रीसेट किया जा सकता है. DevTools कंसोल टैब खोलें. इसके बाद, यहां दी गई लाइन को चिपकाएं और Enter दबाएं.
navigator.setExperimentalAppBadge(0);
इसके अलावा, बैज को हटाने के लिए, उसे साफ़ तौर पर हटाने का तरीका भी इस्तेमाल किया जा सकता है. इसके बारे में यहां बताया गया है. अब आपके PWA का आइकॉन, पहले जैसा दिखेगा. यानी, साफ़ तौर पर दिखेगा और उस पर कोई बैज नहीं होगा.
navigator.clearExperimentalAppBadge();
सुझाव, राय या शिकायत
इस एपीआई के बारे में आपकी क्या राय है? कृपया इस सर्वे में हिस्सा लेकर हमारी मदद करें:
क्या इस एपीआई को इस्तेमाल करना आसान था?
क्या आपको उदाहरण चलाने का विकल्प मिला?
क्या आपको कुछ और कहना है? क्या कुछ सुविधाएं मौजूद नहीं थीं? कृपया इस सर्वे में हिस्सा लेकर, हमें तुरंत सुझाव/राय दें या शिकायत करें. धन्यवाद!
3. Native File System API
Native File System API की मदद से डेवलपर, ऐसे वेब ऐप्लिकेशन बना सकते हैं जो उपयोगकर्ता के डिवाइस पर मौजूद फ़ाइलों के साथ इंटरैक्ट करते हैं. जब कोई उपयोगकर्ता किसी वेब ऐप्लिकेशन को ऐक्सेस देता है, तब यह एपीआई वेब ऐप्लिकेशन को उपयोगकर्ता के डिवाइस पर मौजूद फ़ाइलों और फ़ोल्डर में सीधे बदलाव करने या उन्हें सेव करने की अनुमति देता है.
किसी फ़ाइल को पढ़ना
नेटिव फ़ाइल सिस्टम एपीआई का "Hello, world" प्रोग्राम, किसी लोकल फ़ाइल को पढ़ने और उसके कॉन्टेंट को पाने के लिए होता है. एक सामान्य .txt फ़ाइल बनाएं और उसमें कुछ टेक्स्ट डालें. इसके बाद, किसी सुरक्षित साइट (यानी कि एचटीटीपीएस पर दिखाई जाने वाली साइट) पर जाएं. जैसे, example.com और DevTools कंसोल खोलें. नीचे दिए गए कोड स्निपेट को कंसोल में चिपकाएं. Native File System API को उपयोगकर्ता के जेस्चर की ज़रूरत होती है. इसलिए, हम दस्तावेज़ पर डबल-क्लिक हैंडलर अटैच करते हैं. हमें बाद में फ़ाइल हैंडल की ज़रूरत होगी. इसलिए, हम इसे सिर्फ़ एक ग्लोबल वैरिएबल बनाते हैं.
document.ondblclick = async () => {
window.handle = await window.chooseFileSystemEntries();
const file = await handle.getFile();
document.body.textContent = await file.text();
};
इसके बाद, example.com पेज में कहीं भी दो बार क्लिक करने पर, फ़ाइल पिकर दिखता है.
आपने पहले जो .txt फ़ाइल बनाई है उसे चुनें. इसके बाद, फ़ाइल में मौजूद कॉन्टेंट, example.com के मौजूदा body कॉन्टेंट की जगह ले लेगा.
फ़ाइल सेव करना
इसके बाद, हमें कुछ बदलाव करने हैं. इसलिए, नीचे दिए गए कोड स्निपेट को चिपकाकर, 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].
सुझाव, राय या शिकायत
इस एपीआई के बारे में आपकी क्या राय है? कृपया इस सर्वे में हिस्सा लेकर हमारी मदद करें:
क्या इस एपीआई को इस्तेमाल करना आसान था?
क्या आपको उदाहरण चलाने का विकल्प मिला?
क्या आपको कुछ और कहना है? क्या कुछ सुविधाएं मौजूद नहीं थीं? कृपया इस सर्वे में हिस्सा लेकर, हमें तुरंत सुझाव/राय दें या शिकायत करें. धन्यवाद!
4. आकार पता लगाने का एपीआई
शेप डिटेक्शन एपीआई, तेज़ी से काम करने वाले शेप डिटेक्टर (जैसे, इंसानों के चेहरों के लिए) का ऐक्सेस देता है. यह स्थिर इमेज और/या लाइव इमेज फ़ीड पर काम करता है. ऑपरेटिंग सिस्टम में, परफ़ॉर्मेंस को बेहतर बनाने और ऑप्टिमाइज़ करने वाले फ़ीचर डिटेक्टर होते हैं. जैसे, Android का FaceDetector. Shape Detection API, इन नेटिव सुविधाओं को चालू करता है और उन्हें JavaScript इंटरफ़ेस के सेट के ज़रिए उपलब्ध कराता है.
फ़िलहाल, इन सुविधाओं का इस्तेमाल किया जा सकता है: FaceDetector इंटरफ़ेस की मदद से चेहरे की पहचान करना, BarcodeDetector इंटरफ़ेस की मदद से बारकोड की पहचान करना, और TextDetector इंटरफ़ेस की मदद से टेक्स्ट की पहचान करना (ऑप्टिकल कैरेक्टर रिकग्निशन).
चेहरे की पहचान
Shape Detection API की एक दिलचस्प सुविधा, चेहरे की पहचान करने की सुविधा है. इसकी जांच करने के लिए, हमें ऐसा पेज चाहिए जिस पर लोगों के चेहरे दिख रहे हों. लेखक के चेहरे वाली यह इमेज एक अच्छी शुरुआत है. यह नीचे दिए गए स्क्रीनशॉट की तरह दिखेगा. इस सुविधा के साथ काम करने वाले ब्राउज़र पर, चेहरे के चारों ओर मौजूद बॉक्स और चेहरे की खास जगहों की पहचान की जाएगी.
Glitch प्रोजेक्ट, खास तौर पर script.js फ़ाइल को रीमिक्स या उसमें बदलाव करके, यह देखा जा सकता है कि इस सुविधा को लागू करने के लिए कितने कम कोड की ज़रूरत पड़ी.
अगर आपको पूरी तरह से डाइनैमिक वीडियो बनाना है और सिर्फ़ लेखक के चेहरे का इस्तेमाल नहीं करना है, तो निजी टैब या मेहमान मोड में इस 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 फ़ाइल को रीमिक्स करें या उसमें बदलाव करें.
अगर आपको कुछ और डाइनैमिक चाहिए, तो हम Google पर इमेज खोज की सुविधा का फिर से इस्तेमाल कर सकते हैं. इस बार, अपने ब्राउज़र में निजी टैब या मेहमान मोड में, इस Google Search के नतीजों वाले पेज पर जाएं. अब यहां दिए गए स्निपेट को Chrome DevTools के कंसोल टैब में चिपकाएं. कुछ समय बाद, पहचाने गए बारकोड को रॉ वैल्यू और बारकोड टाइप के साथ एनोटेट किया जाएगा.
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);
}
});
टेक्स्ट की पहचान करने की सुविधा
Shape Detection API की आखिरी सुविधा, टेक्स्ट का पता लगाना है. अब तक आपको यह पता चल गया होगा कि हमें ऐसी इमेज वाला पेज चाहिए जिसमें टेक्स्ट मौजूद हो. जैसे, Google Books के स्कैन किए गए नतीजों वाली यह इमेज. जिन ब्राउज़र पर यह सुविधा काम करती है उन पर, आपको पहचाना गया टेक्स्ट और टेक्स्ट के चारों ओर बना एक बाउंडिंग बॉक्स दिखेगा. इसे कैसे किया जाता है, यह जानने के लिए Glitch प्रोजेक्ट, खास तौर पर script.js फ़ाइल को रीमिक्स करें या उसमें बदलाव करें.
इस सुविधा को डाइनैमिक तरीके से आज़माने के लिए, निजी टैब या मेहमान मोड में इस खोज नतीजों वाले पेज पर जाएं. अब यहां दिए गए स्निपेट को Chrome DevTools के कंसोल टैब में चिपकाएं. कुछ देर इंतज़ार करने के बाद, कुछ टेक्स्ट को पहचान लिया जाएगा.
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 API या सिस्टम इवेंट से शेयर किया गया कॉन्टेंट मिल सकता है. जैसे, ऑपरेटिंग सिस्टम लेवल पर शेयर करने का बटन.
शेयर करने के लिए PWA इंस्टॉल करना
सबसे पहले, आपके पास एक ऐसा PWA होना चाहिए जिसे शेयर किया जा सके. इस बार, Airhorner (सौभाग्य से) काम नहीं करेगा, लेकिन Web Share Target डेमो ऐप्लिकेशन आपकी मदद करेगा. ऐप्लिकेशन को अपने डिवाइस की होम स्क्रीन पर इंस्टॉल करें.
PWA के साथ कुछ शेयर करना
इसके बाद, आपको शेयर करने के लिए किसी कॉन्टेंट की ज़रूरत होगी. जैसे, Google Photos से कोई फ़ोटो. 'शेयर करें' बटन का इस्तेमाल करें और शेयर करने के टारगेट के तौर पर Scrapbook PWA को चुनें.
ऐप्लिकेशन के आइकॉन पर टैप करने पर, आपको सीधे Scrapbook PWA पर ले जाया जाएगा. साथ ही, फ़ोटो भी वहीं दिखेगी.
यह कैसे काम करता है? इसके बारे में जानने के लिए, Scrapbook PWA के वेब ऐप्लिकेशन मेनिफ़ेस्ट को एक्सप्लोर करें. Web Share Target API को काम करने के लिए कॉन्फ़िगरेशन, मेनिफ़ेस्ट की "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. Wake Lock API
बैटरी खत्म होने से बचाने के लिए, ज़्यादातर डिवाइसों में कुछ समय तक कोई गतिविधि न होने पर, वे स्लीप मोड में चले जाते हैं. ज़्यादातर मामलों में, यह ठीक है. हालांकि, कुछ ऐप्लिकेशन को अपना काम पूरा करने के लिए, स्क्रीन या डिवाइस को चालू रखना पड़ता है. Wake Lock API की मदद से, डिवाइस की स्क्रीन की रोशनी कम होने और लॉक होने से रोका जा सकता है. साथ ही, डिवाइस को स्लीप मोड में जाने से भी रोका जा सकता है. इस सुविधा से, नए अनुभव मिलते हैं. अब तक, इसके लिए नेटिव ऐप्लिकेशन की ज़रूरत होती थी.
स्क्रीन सेवर सेट अप करना
Wake Lock API को टेस्ट करने के लिए, आपको पहले यह पक्का करना होगा कि आपका डिवाइस स्लीप मोड में जाता हो. इसलिए, अपने ऑपरेटिंग सिस्टम के प्रेफ़रंस पैनल में, अपनी पसंद का स्क्रीनसेवर चालू करें. साथ ही, पक्का करें कि यह एक मिनट बाद शुरू हो. पक्का करें कि यह सुविधा काम कर रही हो. इसके लिए, अपने डिवाइस को उतनी ही देर के लिए छोड़ दें जितनी देर के लिए आपने इसे सेट किया है. हमें पता है कि यह मुश्किल है. नीचे दिए गए स्क्रीनशॉट में macOS दिखाया गया है. हालांकि, इसे Android डिवाइस या किसी ऐसे डेस्कटॉप प्लैटफ़ॉर्म पर भी आज़माया जा सकता है जिस पर यह सुविधा काम करती है.
स्क्रीन वेक लॉक सेट करना
अब आपको पता चल गया है कि स्क्रीनसेवर काम कर रहा है. इसलिए, स्क्रीनसेवर को काम करने से रोकने के लिए, "screen" टाइप के वेक लॉक का इस्तेमाल करें. Wake Lock डेमो ऐप्लिकेशन पर जाएं और चालू करें पर क्लिक करें
screen वेक लॉक चेकबॉक्स.
इसके बाद से, वेक लॉक चालू हो जाता है. अगर आपने एक मिनट तक अपने डिवाइस को नहीं छुआ है, तो अब आपको दिखेगा कि स्क्रीन सेवर शुरू नहीं हुआ है.
यह कैसे काम करता है? इसके बारे में जानने के लिए, वेक लॉक डेमो ऐप्लिकेशन के 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);
}
सुझाव, राय या शिकायत
इस एपीआई के बारे में आपकी क्या राय है? कृपया इस सर्वे में हिस्सा लेकर हमारी मदद करें:
क्या इस एपीआई को इस्तेमाल करना आसान था?
क्या आपको उदाहरण चलाने का विकल्प मिला?
क्या आपको कुछ और कहना है? क्या कुछ सुविधाएं मौजूद नहीं थीं? कृपया इस सर्वे में हिस्सा लेकर, हमें तुरंत सुझाव/राय दें या शिकायत करें. धन्यवाद!
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);
});
8. Async Clipboard API
टेक्स्ट को कॉपी करना और चिपकाना
अब तक, प्रोग्राम के ज़रिए इमेज को सिस्टम के क्लिपबोर्ड पर कॉपी और चिपकाने का कोई तरीका नहीं था. हाल ही में, हमने Async Clipboard API में इमेज इस्तेमाल करने की सुविधा जोड़ी है.
इसलिए, अब आपके पास इमेज को कॉपी करके चिपकाने का विकल्प है. नया यह है कि अब इमेज को भी क्लिपबोर्ड पर लिखा जा सकता है. एसिंक्रोनस क्लिपबोर्ड एपीआई, कुछ समय से टेक्स्ट को कॉपी और चिपकाने की सुविधा देता है. navigator.clipboard.writeText() को कॉल करके, टेक्स्ट को क्लिपबोर्ड पर कॉपी किया जा सकता है. इसके बाद, navigator.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);
}
क्लिपबोर्ड से इमेज को वापस चिपकाने की प्रोसेस काफ़ी जटिल लगती है. हालांकि, इसमें सिर्फ़ क्लिपबोर्ड आइटम से ब्Blob वापस पाना होता है. एक से ज़्यादा एलिमेंट मौजूद होने पर, आपको तब तक लूप करना होगा, जब तक आपको अपनी पसंद का एलिमेंट न मिल जाए. सुरक्षा कारणों से, फ़िलहाल यह सुविधा सिर्फ़ 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);
}
}
इस एपीआई को डेमो ऐप्लिकेशन में इस्तेमाल होते हुए देखा जा सकता है. इसके सोर्स कोड से जुड़े स्निपेट ऊपर दिए गए हैं. क्लिपबोर्ड में इमेज कॉपी करने के लिए, अनुमति की ज़रूरत नहीं होती. हालांकि, क्लिपबोर्ड से इमेज चिपकाने के लिए, आपको ऐक्सेस देना होगा.
ऐक्सेस देने के बाद, क्लिपबोर्ड से इमेज को पढ़ा जा सकता है और उसे ऐप्लिकेशन में चिपकाया जा सकता है:
9. आपने कर दिखाया!
बधाई हो, आपने इस कोडलैब को पूरा कर लिया है. हम आपको एक बार फिर याद दिलाना चाहते हैं कि ज़्यादातर एपीआई पर अब भी काम चल रहा है. इसलिए, टीम आपके सुझावों/राय की सराहना करती है. आप जैसे लोगों के साथ इंटरैक्ट करने से ही, हमें इन एपीआई को सही तरीके से बनाने में मदद मिलेगी.
हमारा सुझाव है कि आप क्षमताएं लैंडिंग पेज को भी समय-समय पर देखते रहें. हम इसे अप-टू-डेट रखेंगे. इसमें उन सभी एपीआई के बारे में ज़्यादा जानकारी देने वाले लेखों के लिंक दिए गए हैं जिन पर हम काम करते हैं. मज़े करते रहो!
टॉम और पूरी Capabilities टीम 🐡