{"id":83784,"date":"2022-08-27T02:33:02","date_gmt":"2022-08-27T00:33:02","guid":{"rendered":"https:\/\/rmarketingdigital.com\/interact-with-nfc-devices-on-chrome-for-android\/"},"modified":"2020-09-17T02:44:01","modified_gmt":"2020-09-17T05:44:01","slug":"interact-with-nfc-devices-on-chrome-for-android","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/","title":{"rendered":"Interagissez avec les appareils NFC sur Chrome pour Android"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#What-is-Web-NFC\" >What is Web NFC?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Suggested-use-cases\" >Suggested use cases<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Current-status\" >Current status<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Using-Web-NFC\" >Using Web NFC<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Enabling-support-during-the-origin-trial-phase\" >Enabling support during the origin trial phase<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Register-for-the-origin-trial\" >Register for the origin trial<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Enabling-via-chrome-flags\" >Enabling via chrome:\/\/flags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Feature-detection\" >Feature detection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Terminology\" >Terminology<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Scan-NFC-tags\" >Scan NFC tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Write-NFC-tags\" >Write NFC tags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Security-and-permissions\" >Security and permissions<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Cookbook\" >Cookbook<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Check-for-permission\" >Check for permission<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Abort-NFC-operations\" >Abort NFC operations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Read-and-write-a-text-record\" >Read and write a text record<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Read-and-write-a-URL-record\" >Read and write a URL record<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Read-and-write-a-MIME-type-record\" >Read and write a MIME type record<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Read-and-write-an-absolute-URL-record\" >Read and write an absolute-URL record<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Read-and-write-a-smart-poster-record\" >Read and write a smart poster record<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Read-and-write-an-external-type-record\" >Read and write an external type record<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Read-and-write-an-empty-record\" >Read and write an empty record<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Dev-Tips\" >Dev Tips<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Demos\" >Demos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Feedback\" >Feedback<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Tell-us-about-the-API-design\" >Tell us about the API design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Report-a-problem-with-the-implementation\" >Report a problem with the implementation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Show-support\" >Show support<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Helpful-links\" >Helpful links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android\/#Acknowledgements\" >Acknowledgements<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          Reading and writing to NFC tags is now possible.\n        <\/p>\n<p>\n          <time>Feb 12, 2020<\/time><br \/>\n            Updated <time>Jun 4, 2020<\/time>\n        <\/p>\n<\/header>\n<h2 id=\"what\"><span class=\"ez-toc-section\" id=\"What-is-Web-NFC\"><\/span>What is Web NFC? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>NFC stands for Near Field Communications, a short-range wireless technology<br \/>\noperating at 13.56 MHz that enables communication between devices at a distance<br \/>\nless than 10 cm and a transmission rate of up to 424 kbit\/s.<\/p>\n<p>Web NFC provides sites the ability to read and write to NFC tags when they are<br \/>\nin close proximity to the user&#8217;s device (usually 5-10 cm, 2-4 inches).<br \/>\nThe current scope is limited to NFC Data Exchange Format (NDEF), a lightweight<br \/>\nbinary message format that works across different tag formats.<\/p>\n<figure class=\"w-figure\">\n  <img alt='nfc-operation-diagram-7422833' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/nfc-operation-diagram-7422833.png' alt=\"Phone powering up an NFC tag to exchange data\"><figcaption class=\"w-figcaption\">Diagram of an NFC operation<\/figcaption><\/figure>\n<h2 id=\"use-cases\"><span class=\"ez-toc-section\" id=\"Suggested-use-cases\"><\/span>Suggested use cases <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Web NFC is limited to NDEF because the security properties of reading and<br \/>\nwriting NDEF data are more easily quantifiable. Low-level I\/O operations (e.g.<br \/>\nISO-DEP, NFC-A\/B, NFC-F), Peer-to-Peer communication mode and Host-based Card<br \/>\nEmulation (HCE) are not supported.<\/p>\n<p>Examples of sites that may use Web NFC include:<\/p>\n<ul>\n<li>Museums and art galleries can display additional information about a display<br \/>\nwhen the user touches their device to an NFC card near the exhibit.<\/li>\n<li>Inventory management sites can read or write data to the NFC tag on a<br \/>\ncontainer to update information on its contents.<\/li>\n<li>Conference sites can use it to scan NFC badges during the event.<\/li>\n<li>Sites can use it for sharing initial secrets needed for device or service<br \/>\nprovisioning scenarios and also to deploy configuration data in operational<br \/>\nmode.<\/li>\n<\/ul>\n<figure class=\"w-figure\">\n  <img alt='nfc-inventory-management-7113832' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/nfc-inventory-management-7113832.png' alt=\"Phone scanning several NFC tags\"><figcaption class=\"w-figcaption\">NFC inventory management illustrated<\/figcaption><\/figure>\n<h2 id=\"status\"><span class=\"ez-toc-section\" id=\"Current-status\"><\/span>Current status <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"w-table-wrapper\">\n<div class=\"w-table-wrapper\">\n<table>\n<thead>\n<tr>\n<th>Step<\/th>\n<th>Status<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1. Create explainer<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/w3c\/web-nfc\/blob\/gh-pages\/EXPLAINER.md#web-nfc-explained\">Complete<\/a><\/td>\n<\/tr>\n<tr>\n<td>2. Create initial draft of specification<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/web-nfc\/\">Complete<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>3. Gather feedback and iterate design<\/strong><\/td>\n<td><strong>In Progress<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>4. Origin trial<\/strong><\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.chrome.com\/origintrials\/#\/view_trial\/236438980436951041\"><strong>In Progress<\/strong><\/a><\/td>\n<\/tr>\n<tr>\n<td>5. Launch<\/td>\n<td>Not Started<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2 id=\"use\"><span class=\"ez-toc-section\" id=\"Using-Web-NFC\"><\/span>Using Web NFC <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"enabling-support-during-the-origin-trial-phase\"><span class=\"ez-toc-section\" id=\"Enabling-support-during-the-origin-trial-phase\"><\/span>Enabling support during the origin trial phase <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Web NFC will be available on Android as an origin trial in Chrome 81. The origin<br \/>\ntrial is expected to end in Chrome 84.<\/p>\n<p>Origin trials allow you to try new features and give feedback on their<br \/>\nusability, practicality, and effectiveness to the web standards community. For<br \/>\nmore information, see the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/OriginTrials\/blob\/gh-pages\/developer-guide.md\">Origin Trials Guide for Web Developers<\/a>.<br \/>\nTo sign up for this or another origin trial, visit the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.chrome.com\/origintrials\/#\/trials\/active\">registration page<\/a>.<\/p>\n<h3 id=\"register-for-ot\"><span class=\"ez-toc-section\" id=\"Register-for-the-origin-trial\"><\/span>Register for the origin trial <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.chrome.com\/origintrials\/#\/view_trial\/236438980436951041\">Request a token<\/a> for your origin.<\/li>\n<li>Add the token to your pages. There are two ways to do that:\n<ul>\n<li>Add an <code>origin-trial<\/code> <code>&lt;meta&gt;<\/code> tag to the head of each page. For example,<br \/>\nthis may look something like: <br \/><code>&lt;meta http-equiv=\"origin-trial\" content=\"TOKEN_GOES_HERE\"&gt;<\/code><\/li>\n<li>If you can configure your server, you can also add the token<br \/>\nusing an <code>Origin-Trial<\/code> HTTP header. The resulting response header should<br \/>\nlook something like:<br \/><code>Origin-Trial: TOKEN_GOES_HERE<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3 id=\"enabling-via-chrome:flags\"><span class=\"ez-toc-section\" id=\"Enabling-via-chrome-flags\"><\/span>Enabling via chrome:\/\/flags <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To experiment with Web NFC locally on Android, without an origin trial token,<br \/>\nenable the <code>#experimental-web-platform-features<\/code> flag in <code>chrome:\/\/flags<\/code>.<\/p>\n<figure class=\"w-figure\">\n  <img alt='chrome-flag-7757443' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/chrome-flag-7757443.jpg' alt=\"Screenshot of the chrome:\/\/flags internal page to enable for Web NFC on Android\"><figcaption class=\"w-figcaption\">Experimental flag for Web NFC on Android<\/figcaption><\/figure>\n<h3 id=\"feature-detection\"><span class=\"ez-toc-section\" id=\"Feature-detection\"><\/span>Feature detection <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Feature detection for hardware is different from what you&#8217;re probably used to.<br \/>\nThe presence of <code>NDEFReader<\/code> and <code>NDEFWriter<\/code> tells you that the browser<br \/>\nsupports Web NFC, but not whether the required hardware is present. In<br \/>\nparticular, if the hardware is missing, the promised returned by certain calls<br \/>\nwill reject. I&#8217;ll provide details when I describe <code>NDEFReader<\/code> and <code>NDEFWriter<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'NDEFReader'<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token punctuation\">}<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'NDEFWriter'<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>  <span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"terminology\"><span class=\"ez-toc-section\" id=\"Terminology\"><\/span>Terminology <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>An NFC tag is a passive NFC device, meaning that is powered by magnetic<br \/>\ninduction when an active NFC device (.e.g a phone) is in proximity. NFC tags<br \/>\ncome in many forms and fashions, as stickers, credit cards, arm wrists, etc.<\/p>\n<figure class=\"w-figure\">\n  <img alt='nfc-tag-9120507' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/nfc-tag-9120507-scaled.jpg' alt=\"Photo of a transparent NFC tag\"><figcaption class=\"w-figcaption\">A transparent NFC tag<\/figcaption><\/figure>\n<p>The <code>NDEFReader<\/code> and <code>NDEFWriter<\/code> objects are the two entry points in Web NFC<br \/>\nthat expose functionality for preparing reading and\/or writing actions that are<br \/>\nfulfilled when an NDEF tag comes in proximity. The <code>NDEF<\/code> in <code>NDEFReader<\/code> and<br \/>\n<code>NDEFWriter<\/code> stands for NFC Data Exchange Format, a lightweight binary message<br \/>\nformat standardized by the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/nfc-forum.org\/\">NFC Forum<\/a>.<\/p>\n<p>The <code>NDEFReader<\/code> object is for acting on incoming NDEF messages from NFC tags<br \/>\nwhile the <code>NDEFWriter<\/code> object is for writing NDEF messages to NFC tags within<br \/>\nrange.<\/p>\n<p>An NFC tag that supports NDEF is like a post-it note. Anyone can read it, and<br \/>\nunless it is read-only, anyone can write to it. It contains a single NDEF<br \/>\nmessage which encapsulates one or more NDEF records. Each NDEF record is a<br \/>\nbinary structure that contains a data payload, and associated type information.<br \/>\nWeb NFC supports the following NFC Forum standardized record types: empty, text,<br \/>\nURL, smart poster, MIME type, absolute URL, external type, unknown, and local<br \/>\ntype.<\/p>\n<figure class=\"w-figure\">\n  <img alt='ndef-message-diagram-3025961' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/ndef-message-diagram-3025961.png' alt=\"Diagram of an NDEF message\"><figcaption class=\"w-figcaption\">Diagram of an NDEF message<\/figcaption><\/figure>\n<h3 id=\"scan\"><span class=\"ez-toc-section\" id=\"Scan-NFC-tags\"><\/span>Scan NFC tags <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To scan NFC tags, first instantiate a new <code>NDEFReader<\/code> object. Calling <code>scan()<\/code><br \/>\nreturns a promise. The user may be prompted if access was not previously<br \/>\ngranted. The promise will resolve if the following conditions are all met:<\/p>\n<ul>\n<li>User has allowed the website to interact with NFC devices when they tap their<br \/>\nphone.<\/li>\n<li>The user&#8217;s phone supports NFC.<\/li>\n<li>The user has enabled NFC on their phone.<\/li>\n<\/ul>\n<p>Once the promise is resolved, incoming NDEF messages are available by<br \/>\nsubscribing to \u00abreading\u00bb events via an event listener. You should also subscribe<br \/>\nto \u00aberror\u00bb events to be notified when incompatible NFC tags are in proximity<br \/>\nrange.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">scan<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Scan started successfully.\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>reader<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onerror<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Cannot read data from the NFC tag. Try another one?\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br>reader<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onreading<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"NDEF message read.\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">error<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Error! Scan failed to start: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>error<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">.<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>When an NFC tag is in proximity, a <code>NDEFReadingEvent<\/code> event is fired. It<br \/>\ncontains two properties unique to it:<\/p>\n<ul>\n<li><code>serialNumber<\/code> represents the serial number of the device (.e.g<br \/>\n00-11-22-33-44-55-66), or an empty string if none is available.<\/li>\n<li><code>message<\/code> represents the NDEF message stored in the NFC tag.<\/li>\n<\/ul>\n<p>To read the content of the NDEF message, loop through <code>message.records<\/code> and<br \/>\nprocess their <code>data<\/code> members <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/web-nfc\/#data-mapping\">appropriately<\/a> based on their <code>recordType<\/code>.<br \/>\nThe <code>data<\/code> member is exposed as a <code><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/DataView\">DataView<\/a><\/code> as it allows handling<br \/>\ncases where data is encoded in UTF-16.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">reader<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onreading<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> message <span class=\"token operator\">=<\/span> event<span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> record <span class=\"token keyword\">of<\/span> message<span class=\"token punctuation\">.<\/span>records<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Record type:  \"<\/span> <span class=\"token operator\">+<\/span> record<span class=\"token punctuation\">.<\/span>recordType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"MIME type:    \"<\/span> <span class=\"token operator\">+<\/span> record<span class=\"token punctuation\">.<\/span>mediaType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Record id:    \"<\/span> <span class=\"token operator\">+<\/span> record<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">switch<\/span> <span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token string\">\"text\"<\/span><span class=\"token operator\">:<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token operator\">:<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">default<\/span><span class=\"token operator\">:<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<div class=\"w-aside w-aside--note\">\n<p>The cookbook contains many examples of how to read NDEF records based on<br \/>\ntheir types.<\/p>\n<\/div>\n<p>You can also filter NDEF messages by passing options to <code>scan()<\/code>.<\/p>\n<ul>\n<li><code>id<\/code> matches the record identifier of each NDEFRecord.<\/li>\n<li><code>recordType<\/code> matches the type of each NDEFRecord.<\/li>\n<li><code>mediaType<\/code> pattern matches the <code>mediaType<\/code> property of each NDEFRecord.<\/li>\n<\/ul>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">scan<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>mediaType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"application\/*json\"<\/span>  <br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">scan<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>id<span class=\"token operator\">:<\/span> <span class=\"token string\">\"my-restaurant-daily-menu\"<\/span><span class=\"token punctuation\">,<\/span><br>mediaType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"application\/octet-stream\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">scan<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"example.com:shoppingItem\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"write\"><span class=\"ez-toc-section\" id=\"Write-NFC-tags\"><\/span>Write NFC tags <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To write NFC tags, first instantiate a new <code>NDEFWriter<\/code> object. Calling<br \/>\n<code>write()<\/code> returns a promise. The user may be prompted if access was not<br \/>\npreviously granted. At this point, an NDEF message is \u00abprepared\u00bb and promise<br \/>\nwill resolve if the following conditions are all met:<\/p>\n<ul>\n<li>User has allowed the website to interact with NFC devices when they tap their<br \/>\nphone.<\/li>\n<li>The user&#8217;s phone supports NFC.<\/li>\n<li>The user has enabled NFC on their phone.<\/li>\n<li>User has tapped an NFC tag and an NDEF message has been successfully written.<\/li>\n<\/ul>\n<p>To write text to an NFC tag, pass a string to the <code>write()<\/code> method.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token string\">\"Hello World\"<\/span><br><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Message written.\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">error<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Write failed :-( try again: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>error<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">.<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>To write a URL record to an NFC tag, pass a dictionary that represents an NDEF<br \/>\nmessage to <code>write()<\/code>. In the example below, the NDEF message is a dictionary<br \/>\nwith a <code>records<\/code> key. Its value is an array of records &#8211; in this case, a URL<br \/>\nrecord defined as an object with a <code>recordType<\/code> key set to <code>\"url\"<\/code> and a <code>data<\/code><br \/>\nkey set to the URL string.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">{<\/span> recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">,<\/span> data<span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/w3c.github.io\/web-nfc\/\"<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">]<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Message written.\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">error<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Write failed :-( try again: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>error<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">.<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>It is also possible to write multiple records to an NFC tag.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br><span class=\"token punctuation\">{<\/span> recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">,<\/span> data<span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/w3c.github.io\/web-nfc\/\"<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span> recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">,<\/span> data<span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/web.dev\/nfc\/\"<\/span> <span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Message written.\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">error<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Write failed :-( try again: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>error<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">.<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<div class=\"w-aside w-aside--note\">\n<p>The cookbook contains many examples of how to write other types of<br \/>\nNDEF records.<\/p>\n<\/div>\n<p>If an NFC tag should be read while performing an NFC write operation, set the<br \/>\n<code>ignoreRead<\/code> property to <code>false<\/code> in the options passed to the <code>write()<\/code> method.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">scan<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><p>reader<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onreading<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">return<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Writing data is fun!\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> ignoreRead<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">error<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Write failed :-( try again: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>error<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">.<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>If the NFC tag contains an NDEF message that is not meant to be overwritten, set<br \/>\nthe <code>overwrite<\/code> property to <code>false<\/code> in the options passed to the <code>write()<\/code><br \/>\nmethod. In that case, the returned promise will reject if an NDEF message is<br \/>\nalready stored in the NFC tag.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Writing data on an empty NFC tag is fun!\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> overwrite<span class=\"token operator\">:<\/span> <span class=\"token boolean\">false<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Message written.\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">_<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Write failed :-( try again: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>error<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">.<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"security-and-permissions\"><span class=\"ez-toc-section\" id=\"Security-and-permissions\"><\/span>Security and permissions <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The Chrome team has designed and implemented Web NFC using the core principles<br \/>\ndefined in <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/master\/docs\/security\/permissions-for-powerful-web-platform-features.md\">Controlling Access to Powerful Web Platform<br \/>\nFeatures<\/a>, including user control, transparency, and ergonomics.<\/p>\n<p>Because NFC expands the domain of information potentially available to malicious<br \/>\nwebsites, the availability of NFC is restricted to maximize users&#8217; awareness and<br \/>\ncontrol over NFC use.<\/p>\n<figure class=\"w-figure\">\n  <img alt='nfc-prompt-4727459' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/nfc-prompt-4727459.png' alt=\"Screenshot of a Web NFC prompt on a website\"><figcaption class=\"w-figcaption\">Web NFC user prompt<\/figcaption><\/figure>\n<p>Web NFC is only available to top-level frames and secure browsing contexts (HTTPS<br \/>\nonly). Origins must first request the <code>\"nfc\"<\/code> <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/permissions\/\">permission<\/a> while handling a<br \/>\nuser gesture (e.g a button click). The NDEFReader <code>scan()<\/code> and NDEFWriter<br \/>\n<code>write()<\/code> methods trigger a user prompt, if access was not previously granted.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">  document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#scanButton\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onclick<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">scan<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>reader<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onreading<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>The combination of a user-initiated permission prompt and real-world, physical<br \/>\nmovement of bringing the device over a target NFC tag mirrors the chooser<br \/>\npattern found in the other file and device-access APIs.<\/p>\n<p>To perform a scan or write, the web page must be visible when the user touches<br \/>\nan NFC tag with their device. The browser uses haptic feedback to indicate a<br \/>\ntap. Access to the NFC radio is blocked if the display is off or the device is<br \/>\nlocked. For non visible web pages, receiving and pushing NFC content are<br \/>\nsuspended, and resumed when a web page becomes visible again.<\/p>\n<p>Thanks to the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Page_Visibility_API\">Page Visibility API<\/a>, it is possible to track when document<br \/>\nvisibility changes.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">document<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onvisibilitychange<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>document<span class=\"token punctuation\">.<\/span>hidden<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"cookbook\"><span class=\"ez-toc-section\" id=\"Cookbook\"><\/span>Cookbook <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here&#8217;s some code samples to get you started.<\/p>\n<h3 id=\"check-for-permission\"><span class=\"ez-toc-section\" id=\"Check-for-permission\"><\/span>Check for permission <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/permissions\/\">Permissions API<\/a> allows checking whether the <code>\"nfc\"<\/code> permission was<br \/>\ngranted. This example shows how to scan NFC tags without user interaction if<br \/>\naccess was previously granted, or show a button otherwise. Note that the same<br \/>\nmechanism works for writing NFC tags as it uses the same permission under the<br \/>\nhood.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">startScanning<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">await<\/span> reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">scan<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>reader<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onreading<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><p><span class=\"token keyword\">const<\/span> nfcPermissionStatus <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>permissions<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> name<span class=\"token operator\">:<\/span> <span class=\"token string\">\"nfc\"<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>permissionStatus<span class=\"token punctuation\">.<\/span>state <span class=\"token operator\">===<\/span> <span class=\"token string\">\"granted\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">startScanning<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br>document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#scanButton\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>display <span class=\"token operator\">=<\/span> <span class=\"token string\">\"block\"<\/span><span class=\"token punctuation\">;<\/span><br>document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#scanButton\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onclick<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token function\">startScanning<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"abort-nfc-operations\"><span class=\"ez-toc-section\" id=\"Abort-NFC-operations\"><\/span>Abort NFC operations <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Using the <code><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AbortController\">AbortController<\/a><\/code> primitive makes it easy to abort NFC operations. The<br \/>\nexample below shows you how to pass the <code>signal<\/code> of an AbortController through<br \/>\nthe options of NDEFReader <code>scan()<\/code> and NDEFWriter <code>write()<\/code> methods and abort<br \/>\nboth NFC operations at the same time.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> abortController <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">AbortController<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>abortController<span class=\"token punctuation\">.<\/span>signal<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onabort<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> reader <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFReader<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> reader<span class=\"token punctuation\">.<\/span><span class=\"token function\">scan<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> signal<span class=\"token operator\">:<\/span> abortController<span class=\"token punctuation\">.<\/span>signal <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Hello world\"<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> signal<span class=\"token operator\">:<\/span> abortController<span class=\"token punctuation\">.<\/span>signal <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p>document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"#abortButton\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">onclick<\/span> <span class=\"token operator\">=<\/span> <span class=\"token parameter\">event<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>abortController<span class=\"token punctuation\">.<\/span><span class=\"token function\">abort<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"read-and-write-a-text-record\"><span class=\"ez-toc-section\" id=\"Read-and-write-a-text-record\"><\/span>Read and write a text record <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The text record <code>data<\/code> can be decoded with a <code>TextDecoder<\/code> instantiated with the<br \/>\nrecord <code>encoding<\/code> property. Note that the language of the text record is<br \/>\navailable through its <code>lang<\/code> property.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">readTextRecord<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">record<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">assert<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">===<\/span> <span class=\"token string\">\"text\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> textDecoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>encoding<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Text: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>textDecoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> (<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>record<span class=\"token punctuation\">.<\/span>lang<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>To write a simple text record, pass a string to the NDEFWriter <code>write()<\/code> method.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Hello World\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Text records are UTF-8 by default and assume the current document&#8217;s language but<br \/>\nboth properties (<code>encoding<\/code> and <code>lang<\/code>) can be specified using the full syntax<br \/>\nfor creating a custom NDEF record.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">a2utf16<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">string<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">let<\/span> result <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Uint16Array<\/span><span class=\"token punctuation\">(<\/span>string<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">let<\/span> i <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> i <span class=\"token operator\">&lt;<\/span> string<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span> i<span class=\"token operator\">++<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>result<span class=\"token punctuation\">[<\/span>i<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> string<span class=\"token punctuation\">.<\/span><span class=\"token function\">codePointAt<\/span><span class=\"token punctuation\">(<\/span>i<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token keyword\">return<\/span> result<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><p><span class=\"token keyword\">const<\/span> textRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"text\"<\/span><span class=\"token punctuation\">,<\/span><br>lang<span class=\"token operator\">:<\/span> <span class=\"token string\">\"fr\"<\/span><span class=\"token punctuation\">,<\/span><br>encoding<span class=\"token operator\">:<\/span> <span class=\"token string\">\"utf-16\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token function\">a2utf16<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"Bonjour, Fran\u00e7ois !\"<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>textRecord<span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"read-and-write-a-url-record\"><span class=\"ez-toc-section\" id=\"Read-and-write-a-URL-record\"><\/span>Read and write a URL record <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use <code>TextDecoder<\/code> to decode the record&#8217;s <code>data<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">readUrlRecord<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">record<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">assert<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">===<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> textDecoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">URL: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>textDecoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>To write a URL record, pass an NDEF message dictionary to the NDEFWriter<br \/>\n<code>write()<\/code> method. The URL record contained in the NDEF message is defined as an<br \/>\nobject with a <code>recordType<\/code> key set to <code>\"url\"<\/code> and a <code>data<\/code> key set to the URL<br \/>\nstring.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> urlRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span><span class=\"token string\">\"https:\/\/w3c.github.io\/web-nfc\/\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>urlRecord<span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"read-and-write-a-mime-type-record\"><span class=\"ez-toc-section\" id=\"Read-and-write-a-MIME-type-record\"><\/span>Read and write a MIME type record <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The <code>mediaType<\/code> property of a MIME type record represents the MIME type of the<br \/>\nNDEF record payload so that <code>data<\/code> can be properly decoded. For instance, use<br \/>\n<code>JSON.parse<\/code> to decode JSON text and an Image element to decode image data.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">readMimeRecord<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">record<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">assert<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">===<\/span> <span class=\"token string\">\"mime\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>mediaType <span class=\"token operator\">===<\/span> <span class=\"token string\">\"application\/json\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> textDecoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">JSON: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span><span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">parse<\/span><span class=\"token punctuation\">(<\/span>decoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token keyword\">else<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>mediaType<span class=\"token punctuation\">.<\/span><span class=\"token function\">startsWith<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'image\/'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> blob <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Blob<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> type<span class=\"token operator\">:<\/span> record<span class=\"token punctuation\">.<\/span>mediaType <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> img <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Image<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>img<span class=\"token punctuation\">.<\/span>src <span class=\"token operator\">=<\/span> <span class=\"token constant\">URL<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">createObjectURL<\/span><span class=\"token punctuation\">(<\/span>blob<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span><span class=\"token function\">appendChild<\/span><span class=\"token punctuation\">(<\/span>img<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>To write a MIME type record, pass an NDEF message dictionary to the NDEFWriter<br \/>\n<code>write()<\/code> method. The MIME type record contained in the NDEF message is defined<br \/>\nas an object with a <code>recordType<\/code> key set to <code>\"mime\"<\/code>, a <code>mediaType<\/code> key set to<br \/>\nthe actual MIME type of the content, and a <code>data<\/code> key set to an object that can<br \/>\nbe either an <code>ArrayBuffer<\/code> or provides a view on to an <code>ArrayBuffer<\/code> (e.g.<br \/>\n<code>Uint8Array<\/code>, <code>DataView<\/code>).<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> encoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextEncoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> data <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>firstname<span class=\"token operator\">:<\/span> <span class=\"token string\">\"Fran\u00e7ois\"<\/span><span class=\"token punctuation\">,<\/span><br>lastname<span class=\"token operator\">:<\/span> <span class=\"token string\">\"Beaufort\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> jsonRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"mime\"<\/span><span class=\"token punctuation\">,<\/span><br>mediaType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"application\/json\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> encoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">encode<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">JSON<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">stringify<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> imageRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"mime\"<\/span><span class=\"token punctuation\">,<\/span><br>mediaType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"image\/png\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"icon1.png\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">arrayBuffer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>jsonRecord<span class=\"token punctuation\">,<\/span> imageRecord<span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"read-and-write-an-absolute-url-record\"><span class=\"ez-toc-section\" id=\"Read-and-write-an-absolute-URL-record\"><\/span>Read and write an absolute-URL record <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The absolute-URL record <code>data<\/code> can be decoded with a simple <code>TextDecoder<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">readAbsoluteUrlRecord<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">record<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">assert<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">===<\/span> <span class=\"token string\">\"absolute-url\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> textDecoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Absolute URL: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>textDecoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>To write an absolute URL record, pass an NDEF message dictionary to the<br \/>\nNDEFWriter <code>write()<\/code> method. The absolute-URL record contained in the NDEF<br \/>\nmessage is defined as an object with a <code>recordType<\/code> key set to <code>\"absolute-url\"<\/code><br \/>\nand a <code>data<\/code> key set to the URL string.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> absoluteUrlRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"absolute-url\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span><span class=\"token string\">\"https:\/\/w3c.github.io\/web-nfc\/\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>absoluteUrlRecord<span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"read-and-write-a-smart-poster-record\"><span class=\"ez-toc-section\" id=\"Read-and-write-a-smart-poster-record\"><\/span>Read and write a smart poster record <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A smart poster record (used in magazine advertisements, fliers, billboards,<br \/>\netc.), describes some web content as an NDEF record that contains an NDEF<br \/>\nmessage as its payload. Call <code>record.toRecords()<\/code> to transform <code>data<\/code> to a list<br \/>\nof records contained in the smart poster record. It should have a URL record, a<br \/>\ntext record for the title, a MIME type record for the image, and some <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/w3c.github.io\/web-nfc\/#smart-poster-record\">custom<br \/>\nlocal type records<\/a> such as <code>\":t\"<\/code>, <code>\":act\"<\/code>, and <code>\":s\"<\/code> respectively for the<br \/>\ntype, action, and size of the smart poster record.<\/p>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Caution:<\/strong><br \/>\nSmart poster records will be supported in a later version of Chrome.<\/p>\n<\/div>\n<p>Local type records are unique only within the local context of the containing<br \/>\nNDEF record. Use them when the meaning of the types doesn&#8217;t matter outside<br \/>\nof the local context of the containing record and when storage usage is a hard<br \/>\nconstraint. Local type record names always start with <code>:<\/code> in Web NFC (e.g.<br \/>\n<code>\":t\"<\/code>, <code>\":s\"<\/code>, <code>\":act\"<\/code>). This is to differentiate a text record from a local<br \/>\ntype text record for instance.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">readSmartPosterRecord<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">smartPosterRecord<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">assert<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">===<\/span> <span class=\"token string\">\"smart-poster\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">let<\/span> action<span class=\"token punctuation\">,<\/span> text<span class=\"token punctuation\">,<\/span> url<span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> record <span class=\"token keyword\">of<\/span> smartPosterRecord<span class=\"token punctuation\">.<\/span><span class=\"token function\">toRecords<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">==<\/span> <span class=\"token string\">\"text\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> decoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>encoding<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>text <span class=\"token operator\">=<\/span> decoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">==<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> decoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>url <span class=\"token operator\">=<\/span> decoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">==<\/span> <span class=\"token string\">\":act\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>action <span class=\"token operator\">=<\/span> record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">.<\/span><span class=\"token function\">getUint8<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/p><p><span class=\"token keyword\">switch<\/span> <span class=\"token punctuation\">(<\/span>action<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token number\">0<\/span><span class=\"token operator\">:<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token number\">1<\/span><span class=\"token operator\">:<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">case<\/span> <span class=\"token number\">2<\/span><span class=\"token operator\">:<\/span><br><span class=\"token keyword\">break<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>To write a smart poster record, pass an NDEF message to the NDEFWriter <code>write()<\/code><br \/>\nmethod. The smart poster record contained in the NDEF message is defined as an<br \/>\nobject with a <code>recordType<\/code> key set to <code>\"smart-poster\"<\/code> and a <code>data<\/code> key set to<br \/>\nan object that represents (once again) an NDEF message contained in the<br \/>\nsmart poster record.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> encoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextEncoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> smartPosterRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"smart-poster\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">,<\/span> <br>data<span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/my.org\/content\/19911\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"text\"<\/span><span class=\"token punctuation\">,<\/span> <br>data<span class=\"token operator\">:<\/span> <span class=\"token string\">\"Funny dance\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\":t\"<\/span><span class=\"token punctuation\">,<\/span> <br>data<span class=\"token operator\">:<\/span> encoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">encode<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"image\/gif\"<\/span><span class=\"token punctuation\">)<\/span> <br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\":s\"<\/span><span class=\"token punctuation\">,<\/span> <br>data<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Uint32Array<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">4096<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\":act\"<\/span><span class=\"token punctuation\">,<\/span> <br>data<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Uint8Array<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"mime\"<\/span><span class=\"token punctuation\">,<\/span> <br>mediaType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"image\/png\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"icon1.png\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">arrayBuffer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"mime\"<\/span><span class=\"token punctuation\">,<\/span> <br>mediaType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"image\/jpg\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"icon2.jpg\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">arrayBuffer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">]<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>smartPosterRecord<span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"read-and-write-an-external-type-record\"><span class=\"ez-toc-section\" id=\"Read-and-write-an-external-type-record\"><\/span>Read and write an external type record <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create application defined records, use external type records. These may<br \/>\ncontain an NDEF message as payload that is accessible with <code>toRecords()<\/code>. Their<br \/>\nname contains the domain name of the issuing organization, a colon and a type<br \/>\nname that is at least one character long, for instance <code>\"example.com:foo\"<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">function<\/span> <span class=\"token function\">readExternalTypeRecord<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">externalTypeRecord<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">for<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">const<\/span> record <span class=\"token keyword\">of<\/span> externalTypeRecord<span class=\"token punctuation\">.<\/span><span class=\"token function\">toRecords<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">==<\/span> <span class=\"token string\">\"text\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> decoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>encoding<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Text: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>textDecoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\"> (<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>record<span class=\"token punctuation\">.<\/span>lang<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">)<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>recordType <span class=\"token operator\">==<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> decoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextDecoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">URL: <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>decoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span>record<span class=\"token punctuation\">.<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>To write an external type record, pass an NDEF message dictionary to the<br \/>\nNDEFWriter <code>write()<\/code> method. The external type record contained in the NDEF<br \/>\nmessage is defined as an object with a <code>recordType<\/code> key set to the name of the<br \/>\nexternal type and a <code>data<\/code> key set to an object that represents an NDEF message<br \/>\ncontained in the external type record. Note that the <code>data<\/code> key can also be<br \/>\neither an <code>ArrayBuffer<\/code> or provides a view on to an <code>ArrayBuffer<\/code> (e.g.<br \/>\n<code>Uint8Array<\/code>, <code>DataView<\/code>).<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> externalTypeRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"example.game:a\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br>records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"url\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token string\">\"https:\/\/example.game\/42\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"text\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token string\">\"Game context given here\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"mime\"<\/span><span class=\"token punctuation\">,<\/span><br>mediaType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"image\/png\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> <span class=\"token keyword\">await<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> <span class=\"token function\">fetch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"image.png\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">arrayBuffer<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">]<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>externalTypeRecord<span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"read-and-write-an-empty-record\"><span class=\"ez-toc-section\" id=\"Read-and-write-an-empty-record\"><\/span>Read and write an empty record <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>An empty record has no payload.<\/p>\n<p>To write an empty record, pass an NDEF message dictionary to the NDEFWriter<br \/>\n<code>write()<\/code> method. The empty record contained in the NDEF message is defined as<br \/>\nan object with a <code>recordType<\/code> key set to <code>\"empty\"<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> emptyRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"empty\"<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>emptyRecord<span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"dev-tips\"><span class=\"ez-toc-section\" id=\"Dev-Tips\"><\/span>Dev Tips <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Here&#8217;s a list of things I wish I had known when I started playing with Web NFC:<\/p>\n<ul>\n<li>Android natively handles NFC tags before Web NFC is operational.<\/li>\n<li>You can find an NFC icon on <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/material.io\/resources\/icons\/?icon=nfc&amp;style=baseline\">material.io<\/a>.<\/li>\n<li>Use NDEF record <code>id<\/code> to easily identifying a record when needed.<\/li>\n<li>An unformatted NFC tag that supports NDEF contains a single record of the empty type.<\/li>\n<li>Writing an <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.android.com\/guide\/topics\/connectivity\/nfc\/nfc#aar\">android application record<\/a> is easy, as shown below.<\/li>\n<\/ul>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> encoder <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">TextEncoder<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> aarRecord <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span><br>recordType<span class=\"token operator\">:<\/span> <span class=\"token string\">\"android.com:pkg\"<\/span><span class=\"token punctuation\">,<\/span><br>data<span class=\"token operator\">:<\/span> encoder<span class=\"token punctuation\">.<\/span><span class=\"token function\">encode<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"com.example.myapp\"<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">const<\/span> writer <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">NDEFWriter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> writer<span class=\"token punctuation\">.<\/span><span class=\"token function\">write<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> records<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">[<\/span>aarRecord<span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"demos\"><span class=\"ez-toc-section\" id=\"Demos\"><\/span>Demos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Try out the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/googlechrome.github.io\/samples\/web-nfc\/\">official sample<\/a> and check out some cool Web NFC demos:<\/p>\n<figure class=\"w-figure\">\n  <video controls=\"\" autoplay=\"\" loop=\"\" muted=\"\" class=\"w-screenshot\"><source src=\"https:\/\/storage.googleapis.com\/webfundamentals-assets\/videos\/web-nfc-cards-demo.mp4\"><\/source><\/video><figcaption class=\"w-figcaption\">\n    Web NFC cards demo at Chrome Dev Summit 2019<br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"feedback\"><span class=\"ez-toc-section\" id=\"Feedback\"><\/span>Feedback <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/community\/web-nfc\/\">Web NFC Community Group<\/a> and the<br \/>\nChrome team would love to hear about your thoughts and experiences with Web NFC.<\/p>\n<h3 id=\"tell-us-about-the-api-design\"><span class=\"ez-toc-section\" id=\"Tell-us-about-the-API-design\"><\/span>Tell us about the API design <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Is there something about the API that doesn&#8217;t work as expected? Or are there<br \/>\nmissing methods or properties that you need to implement your idea?<\/p>\n<p>File a spec issue on the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/w3c\/web-nfc\/issues\">Web NFC GitHub repo<\/a> or add your thoughts to<br \/>\nan existing issue.<\/p>\n<h3 id=\"report-a-problem-with-the-implementation\"><span class=\"ez-toc-section\" id=\"Report-a-problem-with-the-implementation\"><\/span>Report a problem with the implementation <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Did you find a bug with Chrome&#8217;s implementation? Or is the implementation<br \/>\ndifferent from the spec?<\/p>\n<p>File a bug at <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/entry?components=Blink%3ENFC\">https:\/\/new.crbug.com<\/a>. Be sure to include as much<br \/>\ndetail as you can, provide simple instructions for reproducing the bug, and have<br \/>\n<em>Components<\/em> set to <code>Blink&gt;NFC<\/code>. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\">Glitch<\/a> works great for<br \/>\nsharing quick and easy repros.<\/p>\n<h3 id=\"show-support\"><span class=\"ez-toc-section\" id=\"Show-support\"><\/span>Show support <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Are you planning to use Web NFC? Your public support helps the Chrome team<br \/>\nprioritize features and shows other browser vendors how critical it is to<br \/>\nsupport them.<\/p>\n<p>Send a Tweet to <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/chromiumdev\">@ChromiumDev<\/a> and let us know where and how<br \/>\nyou&#8217;re using it.<\/p>\n<h2 id=\"helpful\"><span class=\"ez-toc-section\" id=\"Helpful-links\"><\/span>Helpful links <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Acknowledgements\"><\/span>Acknowledgements <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Big thanks to the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/w3c\/web-nfc\/graphs\/contributors\">folks at Intel<\/a> for implementing Web NFC. Google Chrome<br \/>\ndepends on a community of committers working together to move the Chromium<br \/>\nproject forward. Not every Chromium committer is a Googler, and these<br \/>\ncontributors deserve special recognition!<\/p>\n<p><!-- lint disable definition-case --><br \/>\n<!-- lint enable definition-case --><\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Reading and writing to NFC tags is now possible. Feb 12, 2020 Updated Jun 4, 2020 What is Web NFC? NFC stands for Near Field Communications, a short-range wireless technology&#8230;<\/p>","protected":false},"author":1,"featured_media":83785,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83784","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Interact with NFC devices on Chrome for Android - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Reading and writing to NFC tags is now possible. Feb 12, 2020 Updated Jun 4, 2020 What is Web NFC? NFC stands for Near Field Communications, a short-range\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interact with NFC devices on Chrome for Android\" \/>\n<meta property=\"og:description\" content=\"Reading and writing to NFC tags is now possible. Feb 12, 2020 Updated Jun 4, 2020 What is Web NFC? NFC stands for Near Field Communications, a short-range\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-27T00:33:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-2745169.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"376\" \/>\n\t<meta property=\"og:image:height\" content=\"240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Interact with NFC devices on Chrome for Android\",\"datePublished\":\"2022-08-27T00:33:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/\"},\"wordCount\":2542,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-2745169.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/\",\"name\":\"Interact with NFC devices on Chrome for Android - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-2745169.jpg\",\"datePublished\":\"2022-08-27T00:33:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Reading and writing to NFC tags is now possible. Feb 12, 2020 Updated Jun 4, 2020 What is Web NFC? NFC stands for Near Field Communications, a short-range\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/interact-with-nfc-devices-on-chrome-for-android-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-2745169.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/thumbnail-2745169.jpg\",\"width\":376,\"height\":240,\"caption\":\"thumbnail-2745169-8550153-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Interact with NFC devices on Chrome for Android - R Marketing Digital","description":"La lecture et l&#039;\u00e9criture sur des tags NFC sont d\u00e9sormais possibles. 12 f\u00e9vrier 2020 Mis \u00e0 jour le 4 juin 2020 Qu&#039;est-ce que le Web NFC? NFC signifie Near Field Communications, une courte port\u00e9e","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/","og_locale":"fr_FR","og_type":"article","og_title":"Interact with NFC devices on Chrome for Android","og_description":"Reading and writing to NFC tags is now possible. Feb 12, 2020 Updated Jun 4, 2020 What is Web NFC? NFC stands for Near Field Communications, a short-range","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-27T00:33:02+00:00","og_image":[{"width":376,"height":240,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-2745169.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Interact with NFC devices on Chrome for Android","datePublished":"2022-08-27T00:33:02+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/"},"wordCount":2542,"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-2745169.jpg","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/","url":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/","name":"Interact with NFC devices on Chrome for Android - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-2745169.jpg","datePublished":"2022-08-27T00:33:02+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"La lecture et l&#039;\u00e9criture sur des tags NFC sont d\u00e9sormais possibles. 12 f\u00e9vrier 2020 Mis \u00e0 jour le 4 juin 2020 Qu&#039;est-ce que le Web NFC? NFC signifie Near Field Communications, une courte port\u00e9e","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/interact-with-nfc-devices-on-chrome-for-android-2\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-2745169.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/thumbnail-2745169.jpg","width":376,"height":240,"caption":"thumbnail-2745169-8550153-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83784"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83784\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83785"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}