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

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

François Beaufort
François Beaufort
GitHub

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

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

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

फ़ोन, डेटा एक्सचेंज करने के लिए एनएफ़सी टैग को चालू कर रहा है
एनएफ़सी के काम करने का डायग्राम

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

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

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

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

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

चरण स्थिति
1. एक्सप्लेनर वीडियो बनाना पूरा हो गया
2. स्पेसिफ़िकेशन का शुरुआती ड्राफ़्ट बनाना पूरा हो गया
3. सुझाव/राय इकट्ठा करना और डिज़ाइन में बदलाव करना पूरा हुआ
4. ऑरिजिन ट्रायल पूरा हो गया
5. लॉन्च करें पूरा हो गया

वेब एनएफ़सी का इस्तेमाल करना

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

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

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

शब्दावली

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

पारदर्शी एनएफ़सी टैग की फ़ोटो
पारदर्शी एनएफ़सी टैग

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

NDEFReader ऑब्जेक्ट, एनएफ़सी टैग से आने वाले NDEF मैसेज पर कार्रवाई करने और रेंज के अंदर एनएफ़सी टैग पर NDEF मैसेज लिखने के लिए है.

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

NDEF मैसेज का डायग्राम
एनडीएफ़ई मैसेज का डायग्राम

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

एनएफ़सी टैग स्कैन करने के लिए, पहले एक नया 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, एनएफ़सी टैग में सेव किए गए एनडीएफ़ मैसेज को दिखाता है.

एनडीएफ़ई मैसेज का कॉन्टेंट पढ़ने के लिए, message.records के ज़रिए लूप करें और recordType के आधार पर, उनके data सदस्यों को सही तरीके से प्रोसेस करें. 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 टैग में ऐसा एनडीएफ़ मैसेज है जिसे ओवरराइट नहीं करना है, तो write() विधि में दिए गए विकल्पों में overwrite प्रॉपर्टी को false पर सेट करें. ऐसे में, अगर NFC टैग में पहले से ही कोई एनडीएफ़ मैसेज सेव है, तो रिटर्न किया गया प्रॉमिस अस्वीकार कर दिया जाएगा.

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() को कॉल करने पर, एक प्रॉमिस मिलता है. अगर पहले ऐक्सेस नहीं दिया गया था, तो उपयोगकर्ता से अनुरोध किया जा सकता है. अगर ये सभी शर्तें पूरी होती हैं, तो प्रॉमिस पूरा हो जाएगा:

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

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

किसी वेबसाइट पर वेब एनएफ़सी के प्रॉम्प्ट का स्क्रीनशॉट
वेब एनएफ़सी के लिए उपयोगकर्ता प्रॉम्प्ट

वेब एनएफ़सी सिर्फ़ टॉप-लेवल फ़्रेम और सुरक्षित ब्राउज़िंग कॉन्टेक्स्ट (सिर्फ़ एचटीटीपीएस) के लिए उपलब्ध है. उपयोगकर्ता के जेस्चर (जैसे, बटन पर क्लिक) को हैंडल करते समय, ऑरिजिन को पहले "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.
    };
  };

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

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

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

कुकबुक

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

अनुमति देखना

अनुमतियां एपीआई की मदद से, यह पता लगाया जाता है कि "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 प्राइमिटिव का इस्तेमाल करने से, एनएफ़सी ऑपरेशन को आसानी से रोका जा सकता है. यहां दिए गए उदाहरण में, NDEFReader scan(), makeReadOnly(), write() के विकल्पों की मदद से, किसी AbortController के signal को पास करने और एक ही समय पर दोनों एनएफ़सी ऑपरेशन को बंद करने का तरीका बताया गया है.

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() का इस्तेमाल करने से, एनएफ़सी टैग पर मैसेज लिखने के बाद उसे पढ़ा जा सकता है. नीचे दिए गए उदाहरण में, NFC टैग पर टेक्स्ट मैसेज लिखने और NFC टैग में नया मैसेज पढ़ने का तरीका बताया गया है. यह तीन सेकंड के बाद स्कैन करना बंद कर देता है.

// 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 को, रिकॉर्ड encoding प्रॉपर्टी के साथ इंस्टैंशिएट किए गए TextDecoder से डिकोड किया जा सकता है. ध्यान दें कि टेक्स्ट रिकॉर्ड की भाषा, उसकी 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 मैसेज की डिक्शनरी पास करें. 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 टाइप रिकॉर्ड को पढ़ना और उसमें बदलाव करना

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 मैसेज की डिक्शनरी पास करें. NDEF मैसेज में मौजूद MIME टाइप रिकॉर्ड को एक ऑब्जेक्ट के तौर पर परिभाषित किया गया है. इसमें recordType कुंजी को "mime" पर सेट किया गया है, mediaType कुंजी को कॉन्टेंट के असल MIME टाइप पर सेट किया गया है, और 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] });

पूरे यूआरएल का रिकॉर्ड पढ़ना और लिखना

absolute-URL रिकॉर्ड 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 मैसेज की डिक्शनरी पास करें. 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] });

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

स्मार्ट पोस्टर रिकॉर्ड (जिसका इस्तेमाल पत्रिका के विज्ञापनों, फ़्लायर, बिलबोर्ड वगैरह में किया जाता है), कुछ वेब कॉन्टेंट को NDEF रिकॉर्ड के तौर पर दिखाता है. इसमें पेलोड के तौर पर NDEF मैसेज होता है. data को स्मार्ट पोस्टर रिकॉर्ड में मौजूद रिकॉर्ड की सूची में बदलने के लिए, record.toRecords() को कॉल करें. इसमें स्मार्ट पोस्टर रिकॉर्ड के टाइप, कार्रवाई, और साइज़ के लिए, यूआरएल रिकॉर्ड, टाइटल के लिए टेक्स्ट रिकॉर्ड, इमेज के लिए 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() method को NDEF मैसेज पास करें. NDEF मैसेज में मौजूद स्मार्ट पोस्टर रिकॉर्ड को एक ऑब्जेक्ट के तौर पर परिभाषित किया गया है. इसमें recordType कुंजी को "smart-poster" पर सेट किया गया है और data कुंजी को एक ऐसे ऑब्जेक्ट पर सेट किया गया है जो स्मार्ट पोस्टर रिकॉर्ड में मौजूद NDEF मैसेज को दिखाता है.

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

बाहरी टाइप का रिकॉर्ड पढ़ना और लिखना

ऐप्लिकेशन के हिसाब से रिकॉर्ड बनाने के लिए, बाहरी टाइप के रिकॉर्ड का इस्तेमाल करें. इनमें पेलोड के तौर पर NDEF मैसेज हो सकता है, जिसे 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 मैसेज की डिक्शनरी पास करें. NDEF मैसेज में मौजूद बाहरी टाइप रिकॉर्ड को एक ऑब्जेक्ट के तौर पर परिभाषित किया जाता है. इसमें recordType कुंजी, बाहरी टाइप के नाम पर सेट होती है और data कुंजी, ऐसे ऑब्जेक्ट पर सेट होती है जो बाहरी टाइप रिकॉर्ड में मौजूद NDEF मैसेज को दिखाता है. ध्यान दें कि 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 मैसेज की डिक्शनरी पास करें. NDEF मैसेज में मौजूद खाली रिकॉर्ड को एक ऐसे ऑब्जेक्ट के तौर पर बताया जाता है जिसमें recordType कुंजी को "empty" पर सेट किया गया है.

const emptyRecord = {
  recordType: "empty"
};

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

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

वेब एनएफ़सी की सुविधा, Android पर Chrome 89 में उपलब्ध है.

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

वेब एनएफ़सी का इस्तेमाल शुरू करते समय, मुझे इन बातों के बारे में पता होना चाहिए था:

  • वेब एनएफ़सी के चालू होने से पहले, Android ओएस-लेवल पर एनएफ़सी टैग को मैनेज करता है.
  • material.io पर आपको एनएफ़सी आइकॉन मिल सकता है.
  • ज़रूरत पड़ने पर किसी रिकॉर्ड की आसानी से पहचान करने के लिए, NDEF रिकॉर्ड id का इस्तेमाल करें.
  • NDEF के साथ काम करने वाले बिना फ़ॉर्मैट किए गए NFC टैग में, खाली टाइप का एक रिकॉर्ड होता है.
  • 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] });

डेमो

आधिकारिक सैंपल आज़माएं और वेब एनएफ़सी के कुछ शानदार डेमो देखें:

Chrome Dev Summit 2019 में वेब एनएफ़सी कार्ड का डेमो

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

वेब एनएफ़सी कम्यूनिटी ग्रुप और Chrome टीम, वेब एनएफ़सी के साथ आपके विचारों और अनुभवों के बारे में जानना चाहेंगे.

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

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

वेब एनएफ़सी GitHub repo पर, खास जानकारी से जुड़ी कोई समस्या दर्ज करें या किसी मौजूदा समस्या के बारे में अपनी राय दें.

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

क्या आपको Chrome में इस सुविधा को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, स्पेसिफ़िकेशन से अलग है?

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

सपोर्ट करें

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

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

मदद के लिए लिंक

धन्यवाद

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