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

अब एनएफ़सी टैग को पढ़ने और उन पर लिखने की सुविधा उपलब्ध है.

François Beaufort

हो गया: वेब एनएफ़सी, क्षमताओं से जुड़े प्रोजेक्ट का हिस्सा है. इसे Android के लिए, Chrome 89 में लॉन्च किया गया.

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

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

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

एनएफ़सी की कार्रवाई का डायग्राम

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

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

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

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

एनएफ़सी इन्वेंट्री मैनेजमेंट का इलस्ट्रेशन

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

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

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

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

किसी एनएफ़सी टैग में टेक्स्ट लिखने के लिए, 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 मैसेज दिखाने वाला डिक्शनरी पास करें. नीचे दिए गए उदाहरण में, 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}.`);
});

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

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

ध्यान दें: कुकबुक में कई उदाहरण दिए गए हैं. इसमें बताया गया है कि एनडीएफ़ के अन्य रिकॉर्ड कैसे लिखे जाते हैं.

अगर एनएफ़सी टैग में ऐसा NDEF मैसेज है जिसे ओवरराइट नहीं किया जाना है, तो write() तरीके में दिए गए विकल्पों में, overwrite प्रॉपर्टी को false पर सेट करें. ऐसे में, अगर एनडीएफ़ मैसेज पहले से ही एनएफ़सी टैग में सेव है, तो वापस किया गया प्रॉमिस अस्वीकार कर दिया जाएगा.

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

एनएफ़सी टैग को लिखने के बाद, उसे हमेशा के लिए रीड-ओनली बनाने का तरीका यहां बताया गया है.

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

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

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

पेज विज़िबिलिटी एपीआई की मदद से, दस्तावेज़ की दृश्यता बदलने पर यह ट्रैक किया जा सकता है.

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

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

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

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

// 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) को पूरे सिंटैक्स का इस्तेमाल करके तय किया जा सकता है. इससे कस्टम NDEF रिकॉर्ड बनाने में मदद मिलती है.

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

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

ऐब्सलूट-यूआरएल रिकॉर्ड 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" जैसे कुछ कस्टम लोकल टाइप रिकॉर्ड होने चाहिए.

लोकल टाइप के रिकॉर्ड, सिर्फ़ स्थानीय एनडीएफ़ रिकॉर्ड के हिसाब से यूनीक होते हैं. इनका इस्तेमाल तब करें, जब टाइप का मतलब, मौजूदा रिकॉर्ड के स्थानीय संदर्भ के बाहर से न हो और जब स्टोरेज को इस्तेमाल करने में कोई मुश्किल हो. लोकल टाइप के रिकॉर्ड नाम, वेब एनएफ़सी में हमेशा : से शुरू होते हैं (जैसे, ":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 मैसेज पास करें. 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 के साथ काम करने वाले, फ़ॉर्मैट न किए गए एनएफ़सी टैग में खाली टाइप का एक रिकॉर्ड होता है.
• जैसा कि नीचे दिखाया गया है, 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 डेवलपर समिट 2019 में वेब एनएफ़सी कार्ड का डेमो

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

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

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

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

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

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

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

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

सहायता करें

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

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

मददगार लिंक

• खास जानकारी
• वेब एनएफ़सी डेमो | वेब एनएफ़सी डेमो सोर्स
• गड़बड़ी को ट्रैक करना
• ChromeStatus.com एंट्री
• ब्लिंक कॉम्पोनेंट: Blink>NFC

स्वीकार हैं

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