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

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

François Beaufort

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

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

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

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

वेब एनएफ़सी, एनडीईएफ़ तक सीमित है, क्योंकि रीडिंग और NDEF का डेटा आसानी से मापा जा सकता है. निम्न-स्तरीय I/O कार्रवाइयां (जैसे ISO-DEP, एनएफ़सी-ए/बी, एनएफ़सी-एफ़), पीयर-टू-पीयर कम्यूनिकेशन मोड और होस्ट पर आधारित कार्ड एम्युलेशन (HCE) का इस्तेमाल नहीं किया जा सकता.

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

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

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

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

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

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

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

शब्दावली

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

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

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

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

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

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

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

प्रॉमिस रिज़ॉल्व होने पर, एनडीईएफ़ से आने वाले मैसेज इस पते पर उपलब्ध हो जाते हैं: इवेंट लिसनर के ज़रिए reading इवेंट की सदस्यता लेना. आपको भी सदस्यता लेनी चाहिए 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.
    }
  }
};

NFC टैग लिखें

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

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

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

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

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

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

NFC टैग को केवल पढ़ने के लिए बनाएं

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

एनएफ़सी टैग को सिर्फ़ पढ़ने के लिए बनाने के लिए, पहले नए 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.
    };
  };

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

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

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

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

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) को पूरे सिंटैक्स का इस्तेमाल करके तय किया जा सकता है इसकी मदद से, अपनी पसंद के मुताबिक 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 को NDEF मैसेज शब्दकोश पास करें 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 टाइप वाला रिकॉर्ड पढ़ना और लिखना

MIME टाइप के रिकॉर्ड की mediaType प्रॉपर्टी, NDEF से पेलोड रिकॉर्ड किया जाता है, ताकि 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 को NDEF मैसेज डिक्शनरी भेजें write() तरीका. एनडीईएफ़ मैसेज में मौजूद 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)}`);
}

संपूर्ण URL रिकॉर्ड लिखने के लिए, NDEF संदेश शब्दकोश को 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] });

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

स्मार्ट पोस्टर रिकॉर्ड (इसका इस्तेमाल पत्रिका के विज्ञापनों, फ़्लायर, बिलबोर्ड, वगैरह), कुछ वेब कॉन्टेंट को NDEF रिकॉर्ड के तौर पर बताता है, जिसमें एक NDEF होता है मैसेज दिखाया जाता है. data को सूची में बदलने के लिए, record.toRecords() को कॉल करें स्मार्ट पोस्टर रिकॉर्ड में मौजूद रिकॉर्ड का. इसका यूआरएल रिकॉर्ड होना चाहिए, शीर्षक के लिए टेक्स्ट रिकॉर्ड, इमेज के लिए MIME टाइप रिकॉर्ड, और कुछ पसंद के मुताबिक local type रिकॉर्ड जैसे कि ":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 मैसेज पास करें तरीका. 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] });

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

ऐप्लिकेशन के तय किए गए रिकॉर्ड बनाने के लिए, बाहरी टाइप के रिकॉर्ड का इस्तेमाल करें. ये हो सकते हैं पेलोड के तौर पर 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.
    }
  }
}

बाहरी प्रकार का रिकॉर्ड लिखने के लिए, NDEF संदेश शब्दकोश को NDEFReader write() तरीका. एनडीईएफ़ में शामिल एक्सटर्नल टाइप रिकॉर्ड संदेश को एक ऐसे ऑब्जेक्ट के रूप में परिभाषित किया गया है, जिसके नाम पर 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 को NDEF मैसेज शब्दकोश पास करें write() तरीका. 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] });

डेमो

आधिकारिक नमूना आज़माएं और कुछ शानदार वेब NFC डेमो देखें:

• कार्ड का डेमो
• किराने के सामान का डेमो
• Intel RSP सेंसर एनएफ़सी
• मीडिया मेमो

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

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

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

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

वेब एनएफ़सी के GitHub रेपो से जुड़ी समस्या की शिकायत करें या अपने सुझाव पहले से मौजूद हैं.

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

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

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

सपोर्ट करें

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

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

मददगार लिंक

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

स्वीकार की गई

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