Android के लिए Chrome पर NFC डिवाइस से सहभागिता करना

अब एनएफ़सी टैग का डेटा पढ़ा और लिखा जा सकता है.

François Beaufort

वेब एनएफ़सी क्या है?

एनएफ़सी का मतलब नियर फ़ील्ड कम्यूनिकेशन है. यह कम दूरी पर काम करने वाली वायरलेस टेक्नोलॉजी है. यह 13.56 मेगाहर्ट्ज़ पर काम करती है. इसकी मदद से, 10 सेंटीमीटर से कम दूरी पर मौजूद डिवाइसों के बीच कम्यूनिकेशन किया जा सकता है. साथ ही, डेटा को 424 किलोबिट/सेकंड की स्पीड से ट्रांसफ़र किया जा सकता है.

Web NFC की मदद से साइटें, एनएफ़सी टैग को पढ़ सकती हैं और उनमें बदलाव कर सकती हैं. हालांकि, इसके लिए ज़रूरी है कि टैग, उपयोगकर्ता के डिवाइस के आस-पास (आम तौर पर 5 से 10 सेंटीमीटर, 2 से 4 इंच) हो. फ़िलहाल, यह सुविधा सिर्फ़ एनएफ़सी डेटा एक्सचेंज फ़ॉर्मैट (एनडीईएफ़) के लिए उपलब्ध है. यह एक लाइटवेट बाइनरी मैसेज फ़ॉर्मैट है, जो अलग-अलग टैग फ़ॉर्मैट पर काम करता है.

इस्तेमाल के सुझाए गए उदाहरण

वेब एनएफ़सी, एनडीईएफ़ तक सीमित है. ऐसा इसलिए है, क्योंकि एनडीईएफ़ डेटा को पढ़ने और लिखने की सुरक्षा से जुड़ी प्रॉपर्टी को ज़्यादा आसानी से मापा जा सकता है. लो-लेवल I/O ऑपरेशंस (जैसे, ISO-DEP, NFC-A/B, NFC-F), पीयर-टू-पीयर कम्यूनिकेशन मोड, और होस्ट-आधारित कार्ड इम्यूलेशन (HCE) काम नहीं करते.

वेब एनएफ़सी का इस्तेमाल करने वाली साइटों के उदाहरण:

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

मौजूदा स्थिति

Web NFC का इस्तेमाल करना

सुविधा का पता लगाना

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

if ('NDEFReader' in window) { /* Scan and write NFC tags */ } 

शब्दावली

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

NDEFReader ऑब्जेक्ट, Web NFC में एंट्री पॉइंट होता है. यह पढ़ने और/या लिखने की कार्रवाइयों को तैयार करने के लिए फ़ंक्शन दिखाता है. ये कार्रवाइयां तब पूरी होती हैं, जब कोई एनडीईएफ़ टैग आस-पास होता है. NDEFReader में मौजूद NDEF का मतलब है एनएफ़सी डेटा एक्सचेंज फ़ॉर्मैट. यह एक आसान बाइनरी मैसेज फ़ॉर्मैट है, जिसे एनएफ़सी फ़ोरम ने स्टैंडर्ड किया है.

NDEFReader ऑब्जेक्ट का इस्तेमाल, एनएफ़सी टैग से आने वाले NDEF मैसेज पर कार्रवाई करने के लिए किया जाता है. साथ ही, इसका इस्तेमाल रेंज में मौजूद एनएफ़सी टैग पर NDEF मैसेज लिखने के लिए भी किया जाता है.

एनडीईएफ़ के साथ काम करने वाला एनएफ़सी टैग, पोस्ट-इट नोट की तरह होता है. इसे कोई भी पढ़ सकता है. साथ ही, अगर यह सिर्फ़ पढ़ने के लिए नहीं है, तो कोई भी इसमें लिख सकता है. इसमें एक NDEF मैसेज होता है, जिसमें एक या उससे ज़्यादा NDEF रिकॉर्ड शामिल होते हैं. हर NDEF रिकॉर्ड एक बाइनरी स्ट्रक्चर होता है. इसमें डेटा पेलोड और उससे जुड़ी टाइप की जानकारी होती है. Web NFC, NFC फ़ोरम के स्टैंडर्ड रिकॉर्ड टाइप के साथ काम करता है. जैसे: खाली, टेक्स्ट, यूआरएल, स्मार्ट पोस्टर, MIME टाइप, ऐब्सलूट यूआरएल, बाहरी टाइप, अज्ञात, और लोकल टाइप.

एनएफ़सी टैग स्कैन करना

एनएफ़सी टैग स्कैन करने के लिए, सबसे पहले एक नया NDEFReader ऑब्जेक्ट इंस्टैंशिएट करें. scan() को कॉल करने पर, प्रॉमिस मिलता है. अगर पहले ऐक्सेस नहीं दिया गया था, तो उपयोगकर्ता को सूचना मिल सकती है. अगर ये सभी शर्तें पूरी होती हैं, तो प्रॉमिस पूरा हो जाएगा:

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

प्रॉमिस पूरा होने के बाद, इवेंट लिसनर के ज़रिए reading इवेंट की सदस्यता लेकर, आने वाले NDEF मैसेज ऐक्सेस किए जा सकते हैं. आपको readingerror इवेंट के लिए भी सदस्यता लेनी चाहिए, ताकि आस-पास मौजूद ऐसे एनएफ़सी टैग के बारे में सूचना मिल सके जो काम नहीं करते.

const ndef = new NDEFReader(); ndef.scan().then(() => {   console.log("Scan started successfully.");   ndef.onreadingerror = () => {     console.log("Cannot read data from the NFC tag. Try another one?");   };   ndef.onreading = event => {     console.log("NDEF message read.");   }; }).catch(error => {   console.log(`Error! Scan failed to start: ${error}.`); }); 

जब कोई एनएफ़सी टैग आस-पास होता है, तब NDEFReadingEvent इवेंट ट्रिगर होता है. इसमें दो ऐसी प्रॉपर्टी होती हैं जो सिर्फ़ इसी के लिए यूनीक होती हैं:

• serialNumber, डिवाइस के सीरियल नंबर को दिखाता है. जैसे, 00-11-22-33-44-55-66.अगर कोई सीरियल नंबर उपलब्ध नहीं है, तो यह खाली स्ट्रिंग दिखाता है.
• message, एनएफ़सी टैग में सेव किए गए NDEF मैसेज को दिखाता है.

एनडीईएफ़ मैसेज का कॉन्टेंट पढ़ने के लिए, message.records के ज़रिए लूप करें. साथ ही, उनके data सदस्यों को उनकी recordType के आधार पर सही तरीके से प्रोसेस करें. data सदस्य को DataView के तौर पर दिखाया जाता है, क्योंकि इससे उन मामलों को हैंडल किया जा सकता है जहां डेटा को UTF-16 में एन्कोड किया गया है.

ndef.onreading = event => {   const message = event.message;   for (const record of message.records) {     console.log("Record type:  " + record.recordType);     console.log("MIME type:    " + record.mediaType);     console.log("Record id:    " + record.id);     switch (record.recordType) {       case "text":         // TODO: Read text record with record data, lang, and encoding.         break;       case "url":         // TODO: Read URL record with record data.         break;       default:         // TODO: Handle other records with record data.     }   } }; 

एनएफ़सी टैग पर लिखना

एनएफ़सी टैग लिखने के लिए, सबसे पहले एक नया NDEFReader ऑब्जेक्ट इंस्टैंशिएट करें. write() को कॉल करने पर, एक प्रॉमिस मिलता है. अगर उपयोगकर्ता को पहले ऐक्सेस नहीं दिया गया था, तो उसे सूचना मिल सकती है. इस समय, एक एनडीईएफ़ मैसेज "तैयार" किया जाता है और अगर ये सभी शर्तें पूरी होती हैं, तो प्रॉमिस पूरा हो जाएगा:

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

किसी एनएफ़सी टैग में टेक्स्ट लिखने के लिए, write() तरीके में एक स्ट्रिंग पास करें.

const ndef = new NDEFReader(); ndef.write(   "Hello World" ).then(() => {   console.log("Message written."); }).catch(error => {   console.log(`Write failed :-( try again: ${error}.`); }); 

किसी एनएफ़सी टैग पर यूआरएल रिकॉर्ड लिखने के लिए, write() को एक डिक्शनरी पास करें. यह डिक्शनरी, एनडीईएफ़ मैसेज को दिखाती है. नीचे दिए गए उदाहरण में, NDEF मैसेज एक डिक्शनरी है, जिसमें records कुंजी है. इसकी वैल्यू, रिकॉर्ड का एक कलेक्शन है. इस मामले में, यूआरएल रिकॉर्ड को एक ऑब्जेक्ट के तौर पर तय किया गया है. इसमें recordType कुंजी को "url" पर सेट किया गया है और data कुंजी को यूआरएल स्ट्रिंग पर सेट किया गया है.

const ndef = new NDEFReader(); ndef.write({   records: [{ recordType: "url", data: "https://w3c.github.io/web-nfc/" }] }).then(() => {   console.log("Message written."); }).catch(error => {   console.log(`Write failed :-( try again: ${error}.`); }); 

किसी NFC टैग में एक से ज़्यादा रिकॉर्ड भी लिखे जा सकते हैं.

const ndef = new NDEFReader(); ndef.write({ records: [     { recordType: "url", data: "https://w3c.github.io/web-nfc/" },     { recordType: "url", data: "https://web.dev/nfc/" } ]}).then(() => {   console.log("Message written."); }).catch(error => {   console.log(`Write failed :-( try again: ${error}.`); }); 

अगर NFC टैग में ऐसा NDEF मैसेज है जिसे बदला नहीं जाना चाहिए, तो write() तरीके को पास किए गए विकल्पों में overwrite प्रॉपर्टी को false पर सेट करें. ऐसे में, अगर NFC टैग में पहले से ही कोई NDEF मैसेज सेव है, तो लौटाया गया प्रॉमिस अस्वीकार कर दिया जाएगा.

const ndef = new NDEFReader(); ndef.write("Writing data on an empty NFC tag is fun!", { overwrite: false }) .then(() => {   console.log("Message written."); }).catch(error => {   console.log(`Write failed :-( try again: ${error}.`); }); 

एनएफ़सी टैग को सिर्फ़ पढ़ने के लिए सेट करना

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

एनएफ़सी टैग को सिर्फ़ पढ़ने के लिए, सबसे पहले नया NDEFReader ऑब्जेक्ट इंस्टैंशिएट करें. makeReadOnly() को कॉल करने पर, एक प्रॉमिस मिलता है. अगर उपयोगकर्ता को पहले ऐक्सेस नहीं दिया गया था, तो उसे सूचना मिल सकती है. अगर ये सभी शर्तें पूरी होती हैं, तो प्रॉमिस पूरा हो जाएगा:

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

const ndef = new NDEFReader(); ndef.makeReadOnly() .then(() => {   console.log("NFC tag has been made permanently read-only."); }).catch(error => {   console.log(`Operation failed: ${error}`); }); 

यहां NFC टैग पर लिखने के बाद, उसे हमेशा के लिए सिर्फ़ पढ़ने के लिए सेट करने का तरीका बताया गया है.

const ndef = new NDEFReader(); try {   await ndef.write("Hello world");   console.log("Message written.");   await ndef.makeReadOnly();   console.log("NFC tag has been made permanently read-only after writing to it."); } catch (error) {   console.log(`Operation failed: ${error}`); } 

makeReadOnly() की सुविधा, Android पर Chrome 100 या इसके बाद के वर्शन में उपलब्ध है. इसलिए, यह देखें कि यह सुविधा इन पर काम करती है या नहीं:

if ("NDEFReader" in window && "makeReadOnly" in NDEFReader.prototype) {   // makeReadOnly() is supported. } 

सुरक्षा और अनुमतियां

Chrome टीम ने Web NFC को डिज़ाइन और लागू किया है. इसके लिए, Controlling Access to Powerful Web Platform Features में बताए गए मुख्य सिद्धांतों का इस्तेमाल किया गया है. इनमें उपयोगकर्ता का कंट्रोल, पारदर्शिता, और एर्गोनॉमिक्स शामिल हैं.

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

Web NFC सिर्फ़ टॉप-लेवल फ़्रेम और सुरक्षित ब्राउज़िंग कॉन्टेक्स्ट (सिर्फ़ एचटीटीपीएस) के लिए उपलब्ध है. उपयोगकर्ता के जेस्चर (जैसे, बटन पर क्लिक करना) को हैंडल करते समय, ऑरिजिन को सबसे पहले "nfc" अनुमति का अनुरोध करना होगा. अगर पहले ऐक्सेस नहीं दिया गया था, तो NDEFReader scan(), write(), और makeReadOnly() तरीकों से उपयोगकर्ता को प्रॉम्प्ट ट्रिगर किया जाता है.

  document.querySelector("#scanButton").onclick = async () => {     const ndef = new NDEFReader();     // Prompt user to allow website to interact with NFC devices.     await ndef.scan();     ndef.onreading = event => {       // TODO: Handle incoming NDEF messages.     };   }; 

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

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

Page Visibility API की मदद से, यह ट्रैक किया जा सकता है कि दस्तावेज़ की दृश्यता कब बदलती है.

document.onvisibilitychange = event => {   if (document.hidden) {     // All NFC operations are automatically suspended when document is hidden.   } else {     // All NFC operations are resumed, if needed.   } }; 

कुकबुक

शुरू करने के लिए, यहां कोड के कुछ सैंपल दिए गए हैं.

अनुमति की जांच करना

Permissions API की मदद से, यह पता लगाया जा सकता है कि "nfc" की अनुमति दी गई थी या नहीं. इस उदाहरण में बताया गया है कि अगर पहले ऐक्सेस दिया गया था, तो उपयोगकर्ता के इंटरैक्शन के बिना NFC टैग कैसे स्कैन करें. इसके अलावा, इसमें यह भी बताया गया है कि अगर पहले ऐक्सेस नहीं दिया गया था, तो बटन कैसे दिखाएं. ध्यान दें कि NFC टैग लिखने के लिए भी इसी मेकैनिज़्म का इस्तेमाल किया जाता है, क्योंकि यह बैकग्राउंड में एक ही अनुमति का इस्तेमाल करता है.

const ndef = new NDEFReader();  async function startScanning() {   await ndef.scan();   ndef.onreading = event => {     /* handle NDEF messages */   }; }  const nfcPermissionStatus = await navigator.permissions.query({ name: "nfc" }); if (nfcPermissionStatus.state === "granted") {   // NFC access was previously granted, so we can start NFC scanning now.   startScanning(); } else {   // Show a "scan" button.   document.querySelector("#scanButton").style.display = "block";   document.querySelector("#scanButton").onclick = event => {     // Prompt user to allow UA to send and receive info when they tap NFC devices.     startScanning();   }; } 

एनएफ़सी की कार्रवाइयां रद्द करना

AbortController प्रिमिटिव का इस्तेमाल करने से, NFC ऑपरेशन को रोकना आसान हो जाता है. यहां दिए गए उदाहरण में, NDEFReader scan(), makeReadOnly(), write() तरीकों के विकल्पों के ज़रिए signal को पास करने का तरीका बताया गया है. साथ ही, इसमें दोनों एनएफ़सी कार्रवाइयों को एक साथ बंद करने का तरीका भी बताया गया है.AbortController

const abortController = new AbortController(); abortController.signal.onabort = event => {   // All NFC operations have been aborted. };  const ndef = new NDEFReader(); await ndef.scan({ signal: abortController.signal });  await ndef.write("Hello world", { signal: abortController.signal }); await ndef.makeReadOnly({ signal: abortController.signal });  document.querySelector("#abortButton").onclick = event => {   abortController.abort(); }; 

लिखने के बाद पढ़ना

AbortController प्रिमिटिव के साथ write() और फिर scan() का इस्तेमाल करके, एनएफ़सी टैग पर मैसेज लिखने के बाद उसे पढ़ा जा सकता है. यहां दिए गए उदाहरण में, एनएफ़सी टैग पर टेक्स्ट मैसेज लिखने और एनएफ़सी टैग में मौजूद नया मैसेज पढ़ने का तरीका बताया गया है. यह तीन सेकंड के बाद स्कैन करना बंद कर देता है.

// Waiting for user to tap NFC tag to write to it... const ndef = new NDEFReader(); await ndef.write("Hello world"); // Success! Message has been written.  // Now scanning for 3 seconds... const abortController = new AbortController(); await ndef.scan({ signal: abortController.signal }); const message = await new Promise((resolve) => {   ndef.onreading = (event) => resolve(event.message); }); // Success! Message has been read.  await new Promise((r) => setTimeout(r, 3000)); abortController.abort(); // Scanning is now stopped. 

टेक्स्ट रिकॉर्ड को पढ़ने और उसमें बदलाव करने की अनुमति दें

टेक्स्ट रिकॉर्ड data को TextDecoder की मदद से डिकोड किया जा सकता है. इसे रिकॉर्ड encoding प्रॉपर्टी के साथ इंस्टैंशिएट किया जाता है. ध्यान दें कि टेक्स्ट रिकॉर्ड की भाषा, उसकी lang प्रॉपर्टी के ज़रिए उपलब्ध होती है.

function readTextRecord(record) {   console.assert(record.recordType === "text");   const textDecoder = new TextDecoder(record.encoding);   console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`); } 

आसान टेक्स्ट रिकॉर्ड लिखने के लिए, NDEFReader write() तरीके में एक स्ट्रिंग पास करें.

const ndef = new NDEFReader(); await ndef.write("Hello World"); 

टेक्स्ट रिकॉर्ड डिफ़ॉल्ट रूप से UTF-8 होते हैं और मौजूदा दस्तावेज़ की भाषा का इस्तेमाल करते हैं. हालांकि, कस्टम एनडीईएफ़ रिकॉर्ड बनाने के लिए, दोनों प्रॉपर्टी (encoding और lang) को पूरे सिंटैक्स का इस्तेमाल करके तय किया जा सकता है.

function a2utf16(string) {   let result = new Uint16Array(string.length);   for (let i = 0; i < string.length; i++) {     result[i] = string.codePointAt(i);   }   return result; }  const textRecord = {   recordType: "text",   lang: "fr",   encoding: "utf-16",   data: a2utf16("Bonjour, François !") };  const ndef = new NDEFReader(); await ndef.write({ records: [textRecord] }); 

यूआरएल रिकॉर्ड को पढ़ने और उसमें बदलाव करने की अनुमति दें

रिकॉर्ड के data को डिकोड करने के लिए, TextDecoder का इस्तेमाल करें.

function readUrlRecord(record) {   console.assert(record.recordType === "url");   const textDecoder = new TextDecoder();   console.log(`URL: ${textDecoder.decode(record.data)}`); } 

यूआरएल रिकॉर्ड लिखने के लिए, NDEFReader write() तरीके को NDEF मैसेज डिक्शनरी पास करें. एनडीईएफ़ मैसेज में मौजूद यूआरएल रिकॉर्ड को एक ऑब्जेक्ट के तौर पर तय किया गया है. इसमें recordType कुंजी को "url" पर और data कुंजी को यूआरएल स्ट्रिंग पर सेट किया गया है.

const urlRecord = {   recordType: "url",   data:"https://w3c.github.io/web-nfc/" };  const ndef = new NDEFReader(); await ndef.write({ records: [urlRecord] }); 

एमआईएमई टाइप रिकॉर्ड को पढ़ने और उसमें बदलाव करने की अनुमति

MIME टाइप रिकॉर्ड की mediaType प्रॉपर्टी, NDEF रिकॉर्ड के पेलोड के MIME टाइप को दिखाती है, ताकि data को सही तरीके से डिकोड किया जा सके. उदाहरण के लिए, JSON टेक्स्ट को डिकोड करने के लिए JSON.parse और इमेज डेटा को डिकोड करने के लिए इमेज एलिमेंट का इस्तेमाल करें.

function readMimeRecord(record) {   console.assert(record.recordType === "mime");   if (record.mediaType === "application/json") {     const textDecoder = new TextDecoder();     console.log(`JSON: ${JSON.parse(decoder.decode(record.data))}`);   }   else if (record.mediaType.startsWith('image/')) {     const blob = new Blob([record.data], { type: record.mediaType });     const img = new Image();     img.src = URL.createObjectURL(blob);     document.body.appendChild(img);   }   else {     // TODO: Handle other MIME types.   } } 

MIME टाइप रिकॉर्ड लिखने के लिए, NDEFReader write() तरीके को NDEF मैसेज डिक्शनरी पास करें. एनडीईएफ़ मैसेज में मौजूद एमआईएमई टाइप रिकॉर्ड को एक ऑब्जेक्ट के तौर पर तय किया जाता है.इसमें recordType कुंजी को "mime" पर सेट किया जाता है, mediaType कुंजी को कॉन्टेंट के असल एमआईएमई टाइप पर सेट किया जाता है, और data कुंजी को एक ऐसे ऑब्जेक्ट पर सेट किया जाता है जो ArrayBuffer हो सकता है या ArrayBuffer का व्यू देता है. उदाहरण के लिए, Uint8Array, DataView.

const encoder = new TextEncoder(); const data = {   firstname: "François",   lastname: "Beaufort" }; const jsonRecord = {   recordType: "mime",   mediaType: "application/json",   data: encoder.encode(JSON.stringify(data)) };  const imageRecord = {   recordType: "mime",   mediaType: "image/png",   data: await (await fetch("icon1.png")).arrayBuffer() };  const ndef = new NDEFReader(); await ndef.write({ records: [jsonRecord, imageRecord] }); 

संपूर्ण यूआरएल वाले रिकॉर्ड को पढ़ने और उसमें बदलाव करने की अनुमति

ऐब्सलूट-यूआरएल रिकॉर्ड data को सामान्य TextDecoder से डिकोड किया जा सकता है.

function readAbsoluteUrlRecord(record) {   console.assert(record.recordType === "absolute-url");   const textDecoder = new TextDecoder();   console.log(`Absolute URL: ${textDecoder.decode(record.data)}`); } 

ऐब्सलूट यूआरएल रिकॉर्ड लिखने के लिए, NDEFReader write() तरीके को NDEF मैसेज डिक्शनरी पास करें. एनडीईएफ़ मैसेज में मौजूद ऐब्सलूट-यूआरएल रिकॉर्ड को एक ऑब्जेक्ट के तौर पर तय किया जाता है. इसमें recordType कुंजी को "absolute-url" पर और data कुंजी को यूआरएल स्ट्रिंग पर सेट किया जाता है.

const absoluteUrlRecord = {   recordType: "absolute-url",   data:"https://w3c.github.io/web-nfc/" };  const ndef = new NDEFReader(); await ndef.write({ records: [absoluteUrlRecord] }); 

स्मार्ट पोस्टर रिकॉर्ड को पढ़ने और उसमें बदलाव करने की अनुमति दें

स्मार्ट पोस्टर रिकॉर्ड (इसका इस्तेमाल मैगज़ीन के विज्ञापनों, फ़्लायर, बिलबोर्ड वगैरह में किया जाता है) में, कुछ वेब कॉन्टेंट को एनडीईएफ़ रिकॉर्ड के तौर पर दिखाया जाता है. इसमें एनडीईएफ़ मैसेज को पेलोड के तौर पर शामिल किया जाता है. record.toRecords() को कॉल करके, data को स्मार्ट पोस्टर रिकॉर्ड में मौजूद रिकॉर्ड की सूची में बदलें. इसमें यूआरएल रिकॉर्ड, टाइटल के लिए टेक्स्ट रिकॉर्ड, इमेज के लिए MIME टाइप रिकॉर्ड, और कुछ कस्टम लोकल टाइप रिकॉर्ड होने चाहिए. जैसे, स्मार्ट पोस्टर रिकॉर्ड के टाइप, ऐक्शन, और साइज़ के लिए ":t", ":act", और ":s".

लोकल टाइप के रिकॉर्ड, सिर्फ़ उस NDEF रिकॉर्ड के लोकल कॉन्टेक्स्ट में यूनीक होते हैं जिसमें वे शामिल होते हैं. इनका इस्तेमाल तब करें, जब कंटेनिंग रिकॉर्ड के लोकल कॉन्टेक्स्ट के बाहर टाइप का मतलब मायने नहीं रखता हो और जब स्टोरेज का इस्तेमाल एक बड़ी समस्या हो. वेब एनएफ़सी में, लोकल टाइप रिकॉर्ड के नाम हमेशा : से शुरू होते हैं. उदाहरण के लिए, ":t", ":s", ":act". ऐसा इसलिए किया जाता है, ताकि टेक्स्ट रिकॉर्ड और लोकल टाइप टेक्स्ट रिकॉर्ड के बीच अंतर किया जा सके.

function readSmartPosterRecord(smartPosterRecord) {   console.assert(record.recordType === "smart-poster");   let action, text, url;    for (const record of smartPosterRecord.toRecords()) {     if (record.recordType == "text") {       const decoder = new TextDecoder(record.encoding);       text = decoder.decode(record.data);     } else if (record.recordType == "url") {       const decoder = new TextDecoder();       url = decoder.decode(record.data);     } else if (record.recordType == ":act") {       action = record.data.getUint8(0);     } else {       // TODO: Handle other type of records such as `:t`, `:s`.     }   }    switch (action) {     case 0:       // Do the action       break;     case 1:       // Save for later       break;     case 2:       // Open for editing       break;   } } 

स्मार्ट पोस्टर रिकॉर्ड लिखने के लिए, NDEFReader write() तरीके को NDEF मैसेज पास करें. एनडीईएफ़ मैसेज में मौजूद स्मार्ट पोस्टर रिकॉर्ड को एक ऑब्जेक्ट के तौर पर तय किया जाता है. इसमें recordType कुंजी को "smart-poster" पर सेट किया जाता है और data कुंजी को एक ऐसे ऑब्जेक्ट पर सेट किया जाता है जो स्मार्ट पोस्टर रिकॉर्ड में मौजूद एनडीईएफ़ मैसेज को (एक बार फिर) दिखाता है.

const encoder = new TextEncoder(); const smartPosterRecord = {   recordType: "smart-poster",   data: {     records: [       {         recordType: "url", // URL record for smart poster content         data: "https://my.org/content/19911"       },       {         recordType: "text", // title record for smart poster content         data: "Funny dance"       },       {         recordType: ":t", // type record, a local type to smart poster         data: encoder.encode("image/gif") // MIME type of smart poster content       },       {         recordType: ":s", // size record, a local type to smart poster         data: new Uint32Array([4096]) // byte size of smart poster content       },       {         recordType: ":act", // action record, a local type to smart poster         // do the action, in this case open in the browser         data: new Uint8Array([0])       },       {         recordType: "mime", // icon record, a MIME type record         mediaType: "image/png",         data: await (await fetch("icon1.png")).arrayBuffer()       },       {         recordType: "mime", // another icon record         mediaType: "image/jpg",         data: await (await fetch("icon2.jpg")).arrayBuffer()       }     ]   } };  const ndef = new NDEFReader(); await ndef.write({ records: [smartPosterRecord] }); 

बाहरी टाइप के रिकॉर्ड को पढ़ने और उसमें बदलाव करने की अनुमति दें

ऐप्लिकेशन के हिसाब से तय किए गए रिकॉर्ड बनाने के लिए, बाहरी टाइप के रिकॉर्ड का इस्तेमाल करें. इनमें पेलोड के तौर पर एनडीईएफ़ मैसेज हो सकता है, जिसे toRecords() की मदद से ऐक्सेस किया जा सकता है. इनके नाम में, जारी करने वाले संगठन का डोमेन नेम, कोलन, और टाइप नेम होता है. टाइप नेम कम से कम एक वर्ण का होता है. उदाहरण के लिए, "example.com:foo".

function readExternalTypeRecord(externalTypeRecord) {   for (const record of externalTypeRecord.toRecords()) {     if (record.recordType == "text") {       const decoder = new TextDecoder(record.encoding);       console.log(`Text: ${textDecoder.decode(record.data)} (${record.lang})`);     } else if (record.recordType == "url") {       const decoder = new TextDecoder();       console.log(`URL: ${decoder.decode(record.data)}`);     } else {       // TODO: Handle other type of records.     }   } } 

बाहरी टाइप का रिकॉर्ड लिखने के लिए, NDEFReader write() तरीके को NDEF मैसेज डिक्शनरी पास करें. एनडीईएफ़ मैसेज में मौजूद बाहरी टाइप के रिकॉर्ड को एक ऑब्जेक्ट के तौर पर तय किया जाता है. इसमें recordType कुंजी को बाहरी टाइप के नाम पर सेट किया जाता है और data कुंजी को ऐसे ऑब्जेक्ट पर सेट किया जाता है जो बाहरी टाइप के रिकॉर्ड में मौजूद एनडीईएफ़ मैसेज को दिखाता है. ध्यान दें कि data कुंजी, ArrayBuffer भी हो सकती है या ArrayBuffer (जैसे, Uint8Array, DataView) पर व्यू भी दिखा सकती है.

const externalTypeRecord = {   recordType: "example.game:a",   data: {     records: [       {         recordType: "url",         data: "https://example.game/42"       },       {         recordType: "text",         data: "Game context given here"       },       {         recordType: "mime",         mediaType: "image/png",         data: await (await fetch("image.png")).arrayBuffer()       }     ]   } };  const ndef = new NDEFReader(); ndef.write({ records: [externalTypeRecord] }); 

खाली रिकॉर्ड को पढ़ने और लिखने की अनुमति दें

खाली रिकॉर्ड में कोई पेलोड नहीं होता.

खाली रिकॉर्ड लिखने के लिए, NDEFReader write() तरीके को NDEF मैसेज डिक्शनरी पास करें. एनडीईएफ़ मैसेज में मौजूद खाली रिकॉर्ड को ऐसे ऑब्जेक्ट के तौर पर तय किया जाता है जिसमें recordType कुंजी को "empty" पर सेट किया जाता है.

const emptyRecord = {   recordType: "empty" };  const ndef = new NDEFReader(); await ndef.write({ records: [emptyRecord] }); 

ब्राउज़र समर्थन

Web NFC, Android पर Chrome 89 में उपलब्ध है.

डेवलपर के लिए सलाह

यहां उन चीज़ों की सूची दी गई है जिनके बारे में मुझे Web NFC का इस्तेमाल शुरू करने से पहले पता होना चाहिए था:

• Web NFC के चालू होने से पहले, Android ओएस लेवल पर NFC टैग को मैनेज करता है.
• आपको material.io पर एनएफ़सी आइकॉन मिल सकता है.
• ज़रूरत पड़ने पर किसी रिकॉर्ड की आसानी से पहचान करने के लिए, NDEF रिकॉर्ड id का इस्तेमाल करें.
• बिना फ़ॉर्मैट किए गए एनएफ़सी टैग में, एनडीईएफ़ का इस्तेमाल किया जा सकता है. इसमें खाली टाइप का एक रिकॉर्ड होता है.
• Android ऐप्लिकेशन रिकॉर्ड लिखना आसान है. इसे यहां दिखाया गया है.

const encoder = new TextEncoder(); const aarRecord = {   recordType: "android.com:pkg",   data: encoder.encode("com.example.myapp") };  const ndef = new NDEFReader(); await ndef.write({ records: [aarRecord] }); 

डेमो

आधिकारिक सैंपल आज़माएं और Web NFC के कुछ बेहतरीन डेमो देखें:

• कार्ड का डेमो
• किराना सामान का डेमो
• Intel RSP Sensor NFC
• मीडिया मेमो

सुझाव/राय दें या शिकायत करें

Web NFC कम्यूनिटी ग्रुप और Chrome टीम, Web NFC के बारे में आपके सुझाव, शिकायत या राय जानना चाहती है.

हमें एपीआई डिज़ाइन के बारे में बताएं

क्या एपीआई के बारे में कुछ ऐसा है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या क्या कोई ऐसा तरीका या प्रॉपर्टी है जो मौजूद नहीं है और आपको अपने आइडिया को लागू करने के लिए उसकी ज़रूरत है?

Web NFC GitHub repo पर जाकर, स्पेसिफ़िकेशन से जुड़ी समस्या की शिकायत करें या किसी मौजूदा समस्या के बारे में अपने विचार जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chrome के साथ काम करने वाले किसी एक्सटेंशन में कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, खास जानकारी से अलग है?

https://new.crbug.com पर जाकर, गड़बड़ी की रिपोर्ट करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए आसान निर्देश दें. इसके अलावा, कॉम्पोनेंट को Blink>NFC पर सेट करें.

क्रिएटर के लिए अपना सपोर्ट दिखाएं

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

@ChromiumDev को ट्वीट करें. इसके लिए, हैशटैग #WebNFC का इस्तेमाल करें. साथ ही, हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

मददगार लिंक

• खास जानकारी
• Web NFC Demo
• ट्रैकिंग बग
• ChromeStatus.com एंट्री
• Blink कॉम्पोनेंट: Blink>NFC

Acknowledgements

Web NFC को लागू करने के लिए, Intel के लोगों का बहुत-बहुत धन्यवाद. Google Chrome, कमिट करने वालों के एक समुदाय पर निर्भर करता है. ये लोग, Chromium प्रोजेक्ट को आगे बढ़ाने के लिए साथ मिलकर काम करते हैं. Chromium में योगदान देने वाला हर व्यक्ति, Google कर्मचारी नहीं होता. इन योगदानकर्ताओं को खास पहचान मिलनी चाहिए!