आज के वेब ब्राउज़र शक्तिशाली वातावरण प्रदान करते हैं जो कई रोमांचक ऐप्स चला सकते हैं। वे शायद आपके विचार से अधिक कर सकते हैं।
इंटरनेट ने एक उल्लेखनीय विकास का अनुभव किया है, स्थिर HTML पृष्ठों से गतिशील, इंटरैक्टिव वेब अनुप्रयोगों में संक्रमण जो उपयोगकर्ताओं के लिए व्यक्तिगत अनुभव प्रदान करता है। इस परिवर्तन को लाने में ब्राउज़र एपीआई के विकास ने महत्वपूर्ण भूमिका निभाई है।
डेवलपर्स को जटिल संचालन करने में मदद करने के लिए ब्राउज़र एपीआई वेब ब्राउज़र में एकीकृत पूर्व-निर्मित इंटरफेस हैं। इन एपीआई का मतलब है कि आप निचले स्तर के कोड से निपटने से बच सकते हैं और इसके बजाय उच्च गुणवत्ता वाले वेब ऐप बनाने पर ध्यान केंद्रित कर सकते हैं।
इन रोमांचक ब्राउज़र एपीआई का अन्वेषण करें और अधिकतम प्रभाव के लिए अपने वेब ऐप्स में उनका उपयोग करना सीखें।
1. वेब भाषण एपीआई
वेब स्पीच एपीआई आपको वाक् पहचान और संश्लेषण को अपने वेब ऐप्स में एकीकृत करने देता है। वाक् पहचान सुविधा उपयोगकर्ताओं को बोलकर वेब ऐप में टेक्स्ट इनपुट करने की अनुमति देती है। इसके विपरीत, स्पीच सिंथेसिस सुविधा वेब ऐप्स को उपयोगकर्ता क्रियाओं के जवाब में ऑडियो आउटपुट करने की अनुमति देती है।
वेब स्पीच एपीआई एक्सेसिबिलिटी उद्देश्यों के लिए फायदेमंद है। उदाहरण के लिए, यह नेत्रहीन उपयोगकर्ताओं को वेब ऐप्स के साथ अधिक आसानी से इंटरैक्ट करने की अनुमति देता है। यह कीबोर्ड पर टाइप करने या माउस को नेविगेट करने में कठिनाई वाले उपयोगकर्ताओं की भी मदद करता है।
इसके अलावा, यह आज उपयोग किए जाने वाले आधुनिक उपकरणों और तकनीकों के निर्माण के लिए एक सीधा दृष्टिकोण प्रदान करता है। उदाहरण के लिए, आप एपीआई का उपयोग कर सकते हैं नोट लेने के लिए स्पीच-टू-टेक्स्ट ऐप्स बनाएं.
// वाक् पहचान को प्रारंभ करें
कॉन्स्ट मान्यता = नया वेबकिटस्पीच रिकग्निशन ();// भाषा को अंग्रेजी में सेट करें
मान्यता.लैंग = 'en-US';// वाक् पहचान परिणाम को संभालने के लिए एक फ़ंक्शन को परिभाषित करें
मान्यता। परिणाम = समारोह(आयोजन) {
कॉन्स्ट परिणाम = घटना। परिणाम [event.resultIndex] [0] प्रतिलेख;
सांत्वना देनालॉग (परिणाम)
};
// भाषण पहचान शुरू करें
मान्यता। प्रारंभ ();
भाषण को पाठ में बदलने के लिए वाक् पहचान वस्तु का उपयोग करने का एक उदाहरण यहां दिया गया है, जो कंसोल में प्रदर्शित होगा।
2. ड्रैग एंड ड्रॉप एपीआई
ड्रैग एंड ड्रॉप एपीआई उपयोगकर्ताओं को वेब पेज पर तत्वों को खींचने और छोड़ने की अनुमति देता है। यह एपीआई उपयोगकर्ताओं को आसानी से तत्वों को स्थानांतरित करने और पुनर्व्यवस्थित करने की अनुमति देकर आपके वेब ऐप के उपयोगकर्ता अनुभव को बढ़ा सकता है। ड्रैग एंड ड्रॉप एपीआई में नीचे सूचीबद्ध दो मुख्य भाग होते हैं:
- ड्रैग सोर्स वह तत्व है जिस पर उपयोगकर्ता क्लिक करता है और ड्रैग करता है।
- ड्रॉप लक्ष्य तत्व को गिराने का क्षेत्र है।
ड्रैग एंड ड्रॉप एपीआई का उपयोग करने के लिए इवेंट श्रोताओं को ड्रैग सोर्स में जोड़ें और टारगेट एलिमेंट्स को ड्रॉप करें। ईवेंट श्रोता ड्रैगस्टार्ट, ड्रैगेंटर, ड्रैगलीव, ड्रैगओवर, ड्रॉप और ड्रैग एंड इवेंट्स को हैंडल करेंगे।
// ड्रैग करने योग्य और ड्रॉप ज़ोन तत्व प्राप्त करें
कॉन्स्ट खींचने योग्य तत्व = दस्तावेज़.getElementById('खींचने योग्य');
कॉन्स्ट ड्रॉप जोन = दस्तावेज़.getElementById('ड्रॉप क्षेत्र');// तत्व को खींचने योग्य बनाने के लिए ईवेंट श्रोताओं को जोड़ें
ड्रैगगेबल एलीमेंट.ऐडइवेंट लिस्टनर ('ड्रैगस्टार्ट', (घटना) => {
// तत्व को गिराए जाने पर डेटा को स्थानांतरित करने के लिए सेट करें
घटना.डेटा स्थानांतरण.सेटडेटा ('पाठ/सादा', event.target.id);
});// ड्रॉप ज़ोन तत्व पर ड्रॉप की अनुमति देने के लिए ईवेंट श्रोता जोड़ें
dropZone.addEventListener ('पर खींचे', (घटना) => {
घटना.रोकथाम ();
dropZone.classList.add ('पर खींचे');
});
// ड्रॉप ईवेंट को संभालने के लिए ईवेंट श्रोता जोड़ें
dropZone.addEventListener ('बूँद', (घटना) => {
घटना.रोकथाम ();
कॉन्स्ट खींचने योग्य एलिमेंटआईड = event.dataTransfer.getData ('मूलपाठ');
कॉन्स्ट खींचने योग्य तत्व = दस्तावेज़.getElementById (draggableElementId);
dropZone.appendChild (खींचने योग्य तत्व);
dropZone.classList.remove ('पर खींचे');
});
ऊपर दिए गए कार्यक्रम को लागू करने से उपयोगकर्ता आईडी ड्रैगगेबल के साथ एक तत्व को खींचने और ड्रॉप-ज़ोन में छोड़ने की अनुमति देगा।
3. स्क्रीन ओरिएंटेशन एपीआई
स्क्रीन ओरिएंटेशन एपीआई डेवलपर्स को डिवाइस की स्क्रीन के वर्तमान ओरिएंटेशन के बारे में जानकारी प्रदान करता है। यह एपीआई विशेष रूप से उन वेब डेवलपर्स के लिए उपयोगी है जो अपनी साइटों को विभिन्न स्क्रीन आकारों और अभिविन्यासों के लिए अनुकूलित करना चाहते हैं। उदाहरण के लिए, एक उत्तरदायी वेब ऐप अपने इंटरफ़ेस के लेआउट और डिज़ाइन को समायोजित करेगा यह इस बात पर निर्भर करता है कि उपयोगकर्ता अपने डिवाइस को पोर्ट्रेट या लैंडस्केप ओरिएंटेशन में पकड़ रहा है या नहीं।
स्क्रीन ओरिएंटेशन एपीआई डेवलपर्स को डिवाइस के स्क्रीन ओरिएंटेशन के बारे में जानकारी तक पहुंचने के लिए कुछ गुण और तरीके प्रदान करता है। एपीआई द्वारा प्रदान की गई कुछ संपत्तियों और विधियों की सूची यहां दी गई है:
- विंडो.स्क्रीन.ओरिएंटेशन.एंगल: यह संपत्ति डिवाइस की स्क्रीन के वर्तमान कोण को डिग्री में लौटाती है।
- विंडो.स्क्रीन.ओरिएंटेशन.टाइप: यह संपत्ति डिवाइस के स्क्रीन ओरिएंटेशन के वर्तमान प्रकार को लौटाती है (उदाहरण के लिए "पोर्ट्रेट-प्राइमरी", "लैंडस्केप-प्राइमरी")।
- विंडो.स्क्रीन.ओरिएंटेशन.लॉक (अभिविन्यास): यह विधि स्क्रीन ओरिएंटेशन को एक विशिष्ट मान (जैसे "पोर्ट्रेट-प्राथमिक") पर लॉक कर देती है।
आप अलग-अलग स्क्रीन ओरिएंटेशन के अनुकूल उत्तरदायी वेब ऐप बनाने के लिए इन गुणों और विधियों का उपयोग कर सकते हैं।
यहां एक उदाहरण कोड स्निपेट दिया गया है जो दिखाता है कि स्क्रीन ओरिएंटेशन एपीआई डिवाइस के स्क्रीन ओरिएंटेशन में परिवर्तनों का पता लगाने और प्रतिक्रिया करने के लिए कैसे काम करता है:
// वर्तमान स्क्रीन ओरिएंटेशन प्राप्त करें
कॉन्स्ट वर्तमान अभिविन्यास = खिड़की.स्क्रीन.ओरिएंटेशन.टाइप;// स्क्रीन ओरिएंटेशन में बदलाव का पता लगाने के लिए इवेंट लिसनर जोड़ें
खिड़की.स्क्रीन.ओरिएंटेशन.ऐडइवेंट लिस्टनर ('परिवर्तन', () => {
कॉन्स्ट न्यू ओरिएंटेशन = खिड़की.स्क्रीन.ओरिएंटेशन.टाइप;
// नए ओरिएंटेशन के आधार पर UI को अपडेट करें
अगर (नई ओरिएंटेशन 'पोर्ट्रेट-प्राथमिक') {
// पोर्ट्रेट ओरिएंटेशन के लिए लेआउट समायोजित करें
} अन्य {
// लैंडस्केप ओरिएंटेशन के लिए लेआउट समायोजित करें
}
});
4. वेब शेयर एपीआई
वेब शेयर एपीआई डेवलपर्स को अपने वेब अनुप्रयोगों में मूल साझाकरण क्षमताओं को एकीकृत करने की अनुमति देता है। यह एपीआई उपयोगकर्ताओं के लिए आपके वेब ऐप से सीधे अन्य ऐप जैसे सोशल मीडिया या मैसेजिंग ऐप पर सामग्री साझा करना आसान बनाता है। वेब शेयर एपीआई का उपयोग करके, आप अपने उपयोगकर्ताओं के लिए एक सहज साझाकरण अनुभव प्रदान कर सकते हैं, जो जुड़ाव बढ़ाने और आपके वेब ऐप पर ट्रैफ़िक बढ़ाने में मदद कर सकता है।
वेब शेयर एपीआई को लागू करने के लिए, आप इसका उपयोग करेंगे navigator.share तरीका। इसे लागू करने के लिए आप उपयोग करेंगे एक अतुल्यकालिक जावास्क्रिप्ट फ़ंक्शन, जो एक वादा लौटाता है। वह वादा a के साथ हल होगा डेटा साझा करें साझा डेटा वाली वस्तु, जैसे शीर्षक, पाठ और URL। एक बार आपके पास डेटा साझा करें वस्तु, आप कॉल कर सकते हैं navigator.share मूल साझाकरण मेनू खोलने की विधि और उपयोगकर्ता को उस ऐप को चुनने की अनुमति दें जिसके साथ वे सामग्री साझा करना चाहते हैं।
// शेयर बटन प्राप्त करें
कॉन्स्ट शेयरबटन = दस्तावेज़.getElementById('शेयर-बटन');// शेयर बटन में ईवेंट श्रोता जोड़ें
शेयरबटन.ऐडइवेंट लिस्टनर ('क्लिक', async () => {
कोशिश {
कॉन्स्ट शेयरडाटा = {
शीर्षक: 'इस शानदार वेब ऐप को देखें!',
मूलपाठ: 'मैंने अभी इस अद्भुत ऐप की खोज की है जिसे आपको आजमाना है!',
यूआरएल: ' https://example.com'
};
इंतजार navigator.share (शेयरडेटा);
} पकड़ना (गलती) {
सांत्वना देना।गलती('सामग्री साझा करने में त्रुटि:', गलती);
}
});
5. जियोलोकेशन एपीआई
जियोलोकेशन एपीआई वेब एप्लिकेशन को उपयोगकर्ता के स्थान डेटा तक पहुंचने की अनुमति देता है। यह एपीआई उपयोगकर्ताओं को स्थान-आधारित सेवाएं प्रदान करने के लिए अक्षांश, देशांतर और ऊंचाई जैसी जानकारी प्रदान करता है। उदाहरण के लिए, वेब एप्लिकेशन उपयोगकर्ता के स्थान के आधार पर वैयक्तिकृत सामग्री या सेवाएं प्रदान करने के लिए जियोलोकेशन एपीआई का उपयोग कर सकते हैं।
जिओलोकेशन एपीआई को लागू करने के लिए, आप इसका उपयोग करेंगे navigator.geolocation वस्तु। यदि एपीआई के लिए समर्थन है, तो आप उपयोगकर्ता के वर्तमान स्थान को प्राप्त करने के लिए getCurrentPosition विधि का उपयोग कर सकते हैं। इस विधि में दो तर्क होते हैं: एक सक्सेस कॉलबैक फ़ंक्शन जिसे स्थान को पुनः प्राप्त करने के लिए कहा जाता है और एक एरर कॉलबैक फ़ंक्शन जिसे कहा जाता है यदि स्थान को पुनः प्राप्त करने में कोई त्रुटि है।
// स्थान बटन और आउटपुट तत्व प्राप्त करें
कॉन्स्ट स्थानबटन = दस्तावेज़.getElementById('स्थान-बटन');
कॉन्स्ट आउटपुट एलिमेंट = दस्तावेज़.getElementById('आउटपुट-तत्व');
// ईवेंट श्रोता को स्थान बटन में जोड़ें
स्थानबटन.ऐडइवेंट लिस्टनर ('क्लिक', () => {
// जांचें कि भौगोलिक स्थान समर्थित है या नहीं
अगर (नेविगेटर.जियोलोकेशन) {
// उपयोगकर्ता की वर्तमान स्थिति प्राप्त करें
navigator.geolocation.getCurrentPosition((पद) => {
OutputElement.textContent = `अक्षांश: ${position.coords.latitude}, देशांतर: ${position.coords.longitude}`;
}, (त्रुटि) => {
सांत्वना देना।गलती('स्थान प्राप्त करने में त्रुटि:', गलती);
});
} अन्य {
OutputElement.textContent = 'जियोलोकेशन इस ब्राउज़र द्वारा समर्थित नहीं है।';
}
});
आप ब्राउज़र API से बेहतर वेब ऐप्स बना सकते हैं
ब्राउज़र एपीआई का उपयोग वास्तव में वेब ऐप के उपयोगकर्ता अनुभव को बदल सकता है। कार्यक्षमता के नए स्तर जोड़ने से लेकर अधिक वैयक्तिकृत अनुभव बनाने तक, ये API आपको रचनात्मकता और नवीनता के नए स्तरों को अनलॉक करने में मदद कर सकते हैं। इन एपीआई के साथ प्रयोग करके और उनकी क्षमता की खोज करके, आप एक अधिक आकर्षक, इमर्सिव और गतिशील वेब ऐप बना सकते हैं जो भीड़ भरे डिजिटल परिदृश्य में सबसे अलग हो।
विभिन्न तकनीकों के विकास में ब्राउज़र एपीआई का उपयोग उनके व्यापक अनुप्रयोगों और महत्व के स्पष्ट प्रदर्शन के रूप में कार्य करता है।
