उपयोगकर्ता को ब्राउज़र विंडो के बाहर डेटा शेयर करने की सुविधा दें.
आपने शायद DataTransfer API के बारे में सुना हो, जो HTML5 Drag and Drop API और क्लिपबोर्ड इवेंट का हिस्सा है. इसका इस्तेमाल, सोर्स और टारगेट पाने वाले लोगों के बीच डेटा ट्रांसफ़र करने के लिए किया जा सकता है.
ड्रैग-ड्रॉप और कॉपी-पेस्ट इंटरैक्शन का इस्तेमाल अक्सर किसी पेज पर होने वाले ऐसे इंटरैक्शन के लिए किया जाता है जिससे सामान्य टेक्स्ट को A से B में ट्रांसफ़र किया जाता है. लेकिन जिसे अक्सर अनदेखा किया जाता है वह है ब्राउज़र विंडो से आगे जाने के लिए इन्हीं इंटरैक्शन का इस्तेमाल करना.
ब्राउज़र के बिल्ट-इन 'खींचें और छोड़ें' और 'कॉपी-पेस्ट करें', दोनों ही इंटरैक्शन दूसरे ऐप्लिकेशन, वेब या किसी और तरीके से कम्यूनिकेट कर सकते हैं और किसी भी ऑरिजिन से जुड़े नहीं होते. एपीआई कई तरह की डेटा एंट्री के साथ काम करता है. ये अलग-अलग व्यवहार वाली होती हैं. ये एंट्री उस डेटा के आधार पर तय होती हैं जहां डेटा ट्रांसफ़र किया जाता है. इनकमिंग इवेंट को सुनते समय, आपका वेब ऐप्लिकेशन ट्रांसफ़र किए गए डेटा को भेज और पा सकता है.
यह क्षमता डेस्कटॉप पर वेब ऐप्लिकेशन में शेयर करने और इंटरऑपरेबिलिटी के बारे में हमारे नज़रिए को बदल सकती है. एक ऐप्लिकेशन से दूसरे ऐप्लिकेशन के बीच डेटा ट्रांसफ़र करने के लिए, अब आपको जोड़े गए इंटिग्रेशन पर निर्भर नहीं रहना पड़ता. इसके बजाय, उपयोगकर्ताओं को पूरा कंट्रोल दिया जा सकता है कि वे जहां चाहें, डेटा ट्रांसफ़र कर सकते हैं.
डेटा ट्रांसफ़र किया जा रहा है
शुरू करने के लिए, आपको 'खींचें और छोड़ें' या 'कॉपी-पेस्ट करें' सुविधा लागू करनी होगी. नीचे दिए गए उदाहरण ड्रैग-ड्रॉप इंटरैक्शन को दिखाते हैं, लेकिन कॉपी करने और चिपकाने की प्रक्रिया एक जैसी है. अगर आपको Drag and Drop API से कोई जानकारी नहीं है, तो इस बारे में एचटीएमएल5 खींचें और छोड़ें के बारे में जानकारी देने वाला एक बेहतरीन लेख मौजूद है. इसमें पूरी जानकारी दी गई है.
MIME-type वाला कुंजी वाला डेटा देकर, आप बाहरी ऐप्लिकेशन से आसानी से इंटरैक्ट कर सकते हैं. ज़्यादातर WYSIWYG एडिटर, टेक्स्ट एडिटर, और ब्राउज़र नीचे दिए गए उदाहरण में इस्तेमाल किए गए "शुरुआती" माइम-टाइप का जवाब देते हैं.
document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', 'Foo bar');
event.dataTransfer.setData('text/html', '<h1>Foo bar</h1>');
event.dataTransfer.setData('text/uri-list', 'https://example.com');
});
event.dataTransfer प्रॉपर्टी पर ध्यान दें. यह DataTransfer का इंस्टेंस दिखाता है. जैसा कि
आप देखेंगे, कभी-कभी इस ऑब्जेक्ट को दूसरे नामों वाली प्रॉपर्टी के ज़रिए दिखाया जाता है.
डेटा ट्रांसफ़र मिलने की प्रक्रिया करीब-करीब वैसी ही काम करती है, जैसे इसे दी जाती है. इवेंट पाने के लिए सेव किए गए इवेंट (drop या paste) सुनें और बटन पढ़े. किसी एलिमेंट को खींचकर छोड़ने पर, ब्राउज़र के पास डेटा की सिर्फ़
type कुंजियों का ऐक्सेस होता है. डेटा को सिर्फ़ गिरावट के बाद ही ऐक्सेस किया जा सकता है.
document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
console.log(event.dataTransfer.types);
// Without this, the drop event won't fire.
event.preventDefault();
});
document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
// Log all the transferred data items to the console.
for (let type of event.dataTransfer.types) {
console.log({ type, data: event.dataTransfer.getData(type) });
}
event.preventDefault();
});
तीन तरह के MIME टाइप ज़्यादातर ऐप्लिकेशन में काम करते हैं:
text/html: एचटीएमएल पेलोड कोcontentEditableएलिमेंट और रिच टेक्स्ट (WYSIWYG) एडिटर जैसे Google Docs, Microsoft Word वगैरह में रेंडर करता है.text/plain:इनपुट एलिमेंट की वैल्यू, कोड एडिटर का कॉन्टेंट, औरtext/htmlसे फ़ॉलबैक सेट करता है.text/uri-list: यूआरएल बार या ब्राउज़र पेज पर जाते समय, यूआरएल पर ले जाता है. किसी डायरेक्ट्री या डेस्कटॉप पर छोड़ने पर, यूआरएल शॉर्टकट बनाया जाएगा.
WYSIWYG के एडिटर ने बड़े पैमाने पर text/html को शामिल किया है. इससे यह बहुत मददगार साबित हुआ है. एचटीएमएल दस्तावेज़ों में, डेटा यूआरएल या सार्वजनिक रूप से ऐक्सेस किए जा सकने वाले यूआरएल का इस्तेमाल करके, संसाधनों को एम्बेड किया जा सकता है. यह Google Docs जैसे संपादकों को विज़ुअल (उदाहरण के लिए कैनवस से) एक्सपोर्ट करने में अच्छी तरह से काम करता है.
const redPixel = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=';
const html = '<img src="' + redPixel + '" width="100" height="100" alt="" />';
event.dataTransfer.setData('text/html', html);
कॉपी करके चिपकाएं का इस्तेमाल करके ट्रांसफ़र करें
कॉपी-पेस्ट इंटरैक्शन के साथ DataTransfer API का इस्तेमाल करने का तरीका यहां दिखाया गया है. ध्यान दें कि
क्लिपबोर्ड इवेंट के लिए, clipboardData प्रॉपर्टी से DataTransfer ऑब्जेक्ट मिलता है.
// Listen to copy-paste events on the document.
document.addEventListener('copy', (event) => {
const copySource = document.querySelector('#copySource');
// Only copy when the `activeElement` (i.e., focused element) is,
// or is within, the `copySource` element.
if (copySource.contains(document.activeElement)) {
event.clipboardData.setData('text/plain', 'Foo bar');
event.preventDefault();
}
});
document.addEventListener('paste', (event) => {
const pasteTarget = document.querySelector('#pasteTarget');
if (pasteTarget.contains(document.activeElement)) {
const data = event.clipboardData.getData('text/plain');
console.log(data);
}
});
कस्टम डेटा फ़ॉर्मैट
आप शुरुआती MIME टाइप तक सीमित नहीं हैं, लेकिन ट्रांसफ़र किए गए डेटा की पहचान करने के लिए किसी भी कुंजी का इस्तेमाल कर सकते हैं. यह आपके ऐप्लिकेशन में क्रॉस-ब्राउज़र इंटरैक्शन के लिए उपयोगी हो सकता है. जैसा कि नीचे दिखाया गया है, JSON.stringify() और JSON.parse() फ़ंक्शन का इस्तेमाल करके, ज़्यादा मुश्किल डेटा को ट्रांसफ़र किया जा सकता है.
document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
const data = { foo: 'bar' };
event.dataTransfer.setData('my-custom-type', JSON.stringify(data));
});
document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
// Only allow dropping when our custom data is available.
if (event.dataTransfer.types.includes('my-custom-type')) {
event.preventDefault();
}
});
document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
if (event.dataTransfer.types.includes('my-custom-type')) {
event.preventDefault();
const dataString = event.dataTransfer.getData('my-custom-type');
const data = JSON.parse(dataString);
console.log(data);
}
});
वेब से कनेक्ट किया जा रहा है
कस्टम फ़ॉर्मैट, आपके कंट्रोल में मौजूद ऐप्लिकेशन के बीच कम्यूनिकेशन के लिए बेहतर होते हैं. हालांकि, इससे ऐसे ऐप्लिकेशन पर डेटा ट्रांसफ़र करते समय भी उपयोगकर्ता को सीमित डेटा मिलता है जो आपके फ़ॉर्मैट का इस्तेमाल नहीं कर रहे हैं. अगर आपको पूरे वेब पर तीसरे पक्ष के ऐप्लिकेशन से कनेक्ट करना है, तो आपको एक यूनिवर्सल डेटा फ़ॉर्मैट की ज़रूरत होगी.
इसके लिए, JSON-LD (लिंक किया गया डेटा) स्टैंडर्ड का इस्तेमाल किया जा सकता है. यह लाइटवेट है और JavaScript में इसे पढ़ना और लिखना आसान है. Schema.org में पहले से तय कई टाइप होते हैं, जिनका इस्तेमाल किया जा सकता है. साथ ही, कस्टम स्कीमा की परिभाषाएं भी एक विकल्प हैं.
const data = {
'@context': 'https://schema.org',
'@type': 'ImageObject',
contentLocation: 'Venice, Italy',
contentUrl: 'venice.jpg',
datePublished: '2010-08-08',
description: 'I took this picture during our honey moon.',
name: 'Canal in Venice',
};
event.dataTransfer.setData('application/ld+json', JSON.stringify(data));
Schema.org के टाइप का इस्तेमाल करते समय, सामान्य चीज़ टाइप से शुरुआत की जा सकती है या ज़रूरत पड़ने पर Event, Person, MediaObject, जगह या बेहद खास जानकारी (जैसे, MedicalEntity) जैसे खास टाइप का भी इस्तेमाल किया जा सकता है. TypeScript का इस्तेमाल करते समय, schema-dts टाइप की परिभाषाओं में दी गई इंटरफ़ेस की परिभाषाओं का इस्तेमाल करें.
JSON-LD डेटा भेजने और पाने से, आपको ज़्यादा कनेक्टेड और ओपन वेब पर काम करने में मदद मिलेगी. एक ही भाषा वाले ऐप्लिकेशन में, बाहरी ऐप्लिकेशन के साथ बेहतर इंटिग्रेशन बनाए जा सकते हैं. किसी मुश्किल एपीआई इंटिग्रेशन की ज़रूरत नहीं होती. इस तरह की सारी जानकारी, ट्रांसफ़र किए गए डेटा में शामिल होती है.
बिना किसी पाबंदी के किसी भी वेब ऐप्लिकेशन के बीच डेटा ट्रांसफ़र करने की सभी संभावनाओं के बारे में सोचें: जैसे, कैलेंडर से इवेंट को अपने पसंदीदा ToDo ऐप्लिकेशन पर शेयर करना, ईमेल में वर्चुअल फ़ाइलें अटैच करना, संपर्कों को शेयर करना. यह बहुत अच्छा होगा, है न? इसकी शुरुआत आपसे होती है! 🙌
समस्याएं
हालांकि, DataTransfer API फ़िलहाल उपलब्ध है, लेकिन इंटिग्रेट करने से पहले आपको कुछ बातों का ध्यान रखना चाहिए.
वेबसाइट का अलग-अलग ब्राउज़र पर चलना
डेस्कटॉप ब्राउज़र ऊपर बताई गई तकनीक के हिसाब से काम करते हैं, जबकि मोबाइल डिवाइस ऐसा नहीं करते. सभी मुख्य ब्राउज़र (Chrome, Edge, Firefox, Safari) और ऑपरेटिंग सिस्टम (Android, ChromeOS, iOS, macOS, Ubuntu Linux, और Windows) पर इस तकनीक की जांच की जा चुकी है. हालांकि, Android और iOS में कोई टेस्ट पास नहीं हुआ. ब्राउज़र लगातार बेहतर हो रहे हैं, लेकिन फ़िलहाल यह तकनीक सिर्फ़ डेस्कटॉप ब्राउज़र तक सीमित है.
कॉन्टेंट को आसानी से खोजने लायक बनाना
किसी डेस्कटॉप कंप्यूटर पर काम करते समय, खींचकर छोड़ने और कॉपी करके चिपकाने की सुविधा, सिस्टम-लेवल के इंटरैक्शन होते हैं. इनमें रूट, 40 साल से भी ज़्यादा समय पहले के जीयूआई होते हैं. इस बारे में सोचें कि आपने फ़ाइलों को व्यवस्थित करने के लिए इन इंटरैक्शन का कितनी बार इस्तेमाल किया है. ऐसा कॉन्टेंट फ़िलहाल वेब पर बहुत आम नहीं है.
आपको इस नए इंटरैक्शन के बारे में उपयोगकर्ताओं को जानकारी देनी होगी और इसे आसानी से समझने लायक बनाने के लिए UX पैटर्न बनाना होगा, खास तौर पर उन लोगों को जिन्हें अब तक कंप्यूटर का इस्तेमाल करने का अनुभव है.
सुलभता
'खींचें और छोड़ें' कार्रवाई बहुत आसान नहीं है, लेकिन DataTransfer API कॉपी करके चिपकाने की सुविधा के साथ भी काम करता है. पक्का करें कि आपने इवेंट को कॉपी करके चिपकाने के लिए चुना हो. इसमें ज़्यादा काम नहीं करना पड़ता और इसे जोड़ने के लिए आपके उपयोगकर्ता आपके आभारी होंगे.
सुरक्षा और निजता
इस तकनीक का इस्तेमाल करते समय, आपको सुरक्षा और निजता से जुड़ी कुछ बातों का ध्यान रखना चाहिए.
- क्लिपबोर्ड का डेटा, उपयोगकर्ता के डिवाइस पर अन्य ऐप्लिकेशन पर उपलब्ध होता है.
- जिन वेब ऐप्लिकेशन को आप खींचकर ले जा रहे हैं उनके पास टाइप कुंजियों का ऐक्सेस होता है, न कि डेटा का. डेटा सिर्फ़ ड्रॉप या पेस्ट होने पर उपलब्ध होता है.
- मिलने वाले डेटा को किसी अन्य उपयोगकर्ता के इनपुट की तरह ही देखा जाना चाहिए. इस्तेमाल करने से पहले, सैनिटाइज़ और पुष्टि करें.
Transmat हेल्पर लाइब्रेरी का इस्तेमाल शुरू करना
क्या आप अपने ऐप्लिकेशन में DataTransfer API का इस्तेमाल करने को लेकर उत्साहित हैं? GitHub पर ट्रांसमैट लाइब्रेरी पर एक नज़र डालें. यह ओपन-सोर्स लाइब्रेरी ब्राउज़र के अंतरों को अलाइन करती है, JSON-LD के काम करती है. इसमें एक ऑब्ज़र्वर शामिल होता है, जो ड्रॉप-एरिया को हाइलाइट करने के लिए ट्रांसफ़र इवेंट का जवाब देने के लिए काम करता है.
import { Transmat, TransmatObserver, addListeners } from 'transmat';
// Send data on drag/copy.
addListeners(myElement, 'transmit', (event) => {
const transmat = new Transmat(event);
transmat.setData({
'text/plain': 'Foobar',
'application/json': { foo: 'bar' },
});
});
// Receive data on drop/paste.
addListeners(myElement, 'receive', (event) => {
const transmat = new Transmat(event);
if (transmat.hasType('application/json') && transmat.accept()) {
const data = JSON.parse(transmat.getData('application/json'));
}
});
// Observe transfer events and highlight drop areas.
const obs = new TransmatObserver((entries) => {
for (const entry of entries) {
const transmat = new Transmat(entry.event);
if (transmat.hasMimeType('application/json')) {
entry.target.classList.toggle('drag-over', entry.isTarget);
entry.target.classList.toggle('drag-active', entry.isActive);
}
}
});
obs.observe(myElement);
स्वीकार हैं
Unsplash पर लूबा अर्टेल की हीरो इमेज.