polymer-nfc.html

<link rel="import" href="../polymer/polymer-element.html">

<dom-module id="polymer-nfc">

  <script>
    /**
     * `polymer-nfc`
     * Web Component for NFC reading and writing using WebNFC W3C Draft Standard.  
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class PolymerNfc extends Polymer.Element {
      static get is() { return 'polymer-nfc'; }
      static get properties() {
        return {
          watch: {
            type: Boolean,
            reflectToAttribute: true,
            notify: true,
            value: false,
            observer: '_watchChanged'
          },
          watchId: {
            type: Number,
            notify: true,
            readOnly: true,
            reflectToAttribute: true,
            value : null
          },
          write: {
            type: Boolean,
            reflectToAttribute: true,
            notify: true,
            value: false
          },
          error: {
            type: String,
            reflectToAttribute: true,
            readOnly: true,
            notify: true,
            value: false
          },
          data: {
            type: Object,
            notify: true,
            reflectToAttribute: true,
            value: function() {
              return {};
            }
          },
          logging: {
            type: Boolean,
            value: false
          },
          recordType: {
            type: String,
            value: "json"
          },
          mediaType: {
            type: String,
            value: "application/json"
          }
        };
      }

      toggleLogging() {
        this.logging = !this.logging;
      }
      
      readOn() {
        this.watch = true;
      }

      readOff() {
        this.watch = false;
      }

      writeOn() {
        this.write = true;
      }

      writeOff() {
        this.write = false;
      }

      _watchChanged(watch) {
        console.log('watch changed: ' + this.watch)
        if (watch) {
          if (!navigator.nfc) {
            console.log('WebNFC not supported');
            this.readOff;
            return false;
          }
          navigator.nfc.watch(message => {
            if (this.write) {
              navigator.nfc.push({
                records: [
                  {
                    recordType: this.recordType,
                    mediaType: this.mediaType,
                    data: this.data
                  }
                ]}
              )
              .then( (written) => {
                console.log('Wrote something');
                console.log(written);
                this.write = false;
                
              }).catch( (error) => {
                console.log('Error writing: ' + error);
                console.log('Data: ' + this.data);                
              });
            }else{
              for (let record of message.records) {
                console.log('Read something');
                console.log(record.data);
                this.data = record.data;
              }
            }
          }, { mode: "any", recordType: this.recordType, passive: true })
            .then((response) => {
              console.log("Added watchId: "+ response);
              this.watchId = response;
            }).catch((error) => {
              console.log("Adding watch failed: " + error.name);
              this.error = error.name;
            }); 
        } else {
          if (this.watchId) {
            navigator.nfc.cancelWatch(this.watchId);
            this.watchId = null;
          }
        }
      }
    }

    window.customElements.define(PolymerNfc.is, PolymerNfc);
  </script>
</dom-module>