sw-status.html

<link href="../paper-fab/paper-fab.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<link href="../paper-shadow/paper-shadow.html" rel="import">

<!--
Element that displays the ServiceWorker status for this page.  Currently it displays whether the page is controlled or not, and the registration for the ServiceWorker that can control this page.  In the future this can enumerate the info for all ServiceWorkers under the current domain.
##### Example
    <sw-status></sw-status>
@element sw-status
@blurb Element showing ServiceWorker status.
@status beta
@homepage http://dmurph.github.io/sw-status-element
-->
<polymer-element name="sw-status">
  <template>
    <link rel="stylesheet" href="sw-status.css">
    <paper-shadow z="1" id="paper-container">
      <div id="container">
        <div id="title" class="{{titleStyle}}">
          <paper-fab id="refresh-button" icon="refresh" mini on-click="{{refreshClicked}}"></paper-fab>
        </div>
        <div id="content">
          <div class="tabs">
            <paper-shadow class="tab {{controlledStyle}}" hidden?="{{(controlledText == null)}}">
                <h1>{{controlledTitle}}</h1>
                <template repeat="{{text in controlledText}}">
                  <p>{{text}}</p>
                </template>
            </paper-shadow>
            <paper-shadow class="tab {{infoStyle}}" hidden?="{{(infoText == null)}}">
                <h1>Info</h1>
                <template repeat="{{text in infoText}}">
                  <p>{{text}}</p>
                </template>
            </paper-shadow>
            <paper-shadow class="tab error" hidden?="{{(errorText == null)}}">
              <h1>Error</h1>
              <template repeat="{{text in errorText}}">
                <p>{{text}}</p>
              </template>
            </paper-shadow>
          </div>
          <template repeat="{{registration in registrations}}">
            <div class="tabs">
              <paper-shadow class="tab {{registration.registrationClass}}" hidden?="{{registration.registrationText == null}}">
                <h1>Registration</h1>
                <template repeat="{{text in registration.registrationText}}">
                  <p>{{text}}</p>
                </template>
              </paper-shadow>
              <paper-shadow class="tab installing" hidden?="{{registration.installingText == null}}">
                <h1>Installing Service Worker</h1>
                <template repeat="{{text in registration.installingText}}">
                  <p>{{text}}</p>
                </template>
              </paper-shadow>
              <paper-shadow class="tab waiting" hidden?="{{registration.waitingText == null}}">
                <h1>Waiting Service Worker</h1>
                <template repeat="{{text in registration.waitingText}}">
                  <p>{{text}}</p>
                </template>
              </paper-shadow>
              <paper-shadow class="tab active" hidden?="{{registration.activeText == null}}">
                <h1>Active Service Worker</h1>
                <template repeat="{{text in registration.activeText}}">
                  <p>{{text}}</p>
                </template>
              </paper-shadow>
              <paper-shadow class="tab error" hidden?="{{(registration.errorText == null)}}">
                <h1>Error</h1>
                <template repeat="{{text in registration.errorText}}">
                  <p>{{text}}</p>
                </template>
              </paper-shadow>
            </div>
          </template>
        </div>
      </div>
        <div style="clear: right"></div>
    </paper-shadow>
  </template>
  <script>

    Polymer({
      titleStyle: 'badText',

      controlledStyle: 'installing',
      controlledTitle: 'Not Controlled',
      controlledText: ['This page is not controlled by a ServiceWorker.'],

      registrations: [],

      errorTitle: 'Error',
      errorText: null,

      infoText: null,
      infoStyle: '',

      ready: function() {
        this.refreshAll();
      },

      getServiceWorkerDescription: function(worker) {
        return ['Script: ' + worker.scriptURL, 'State: ' + worker.state];
      },

      refreshAll: function() {
        this.registrations = [];
        this.errorText = null;
        this.infoText = null;
        this.infoStyle = '';
        this.controlledStyle = 'installing';
        this.controlledTitle = 'Not Controlled';
        this.controlledText = ['This page is not controlled by a ServiceWorker.'];
        if (!navigator.serviceWorker) {
          this.errorText = ['Service Workers are not enabled in this browser.'];
          return;
        }
        var controller = navigator.serviceWorker.controller;
        if (controller) {
          this.controlledStyle = 'active';
          this.controlledTitle = 'Controlled';
          this.controlledText = ['This page is controlled by a ServiceWorker.'];
        }
        var _this = this;
        navigator.serviceWorker.getRegistration(window.location.pathname)
            .then(function(registration) {
              var registrationObject = {
                registrationText: null,
                installingText: null,
                waitingText: null,
                activeText: null,
                errorText: null,
                registrationClass: null
              };
              if (!registration) {
                _this.infoStyle = 'installing';
                _this.infoText = ['No registration available to control page "' + window.location.pathname + '".'];
                // We are still controlled, but the SW is unregistered.
                if (controller) {
                  registrationObject.registrationText = ['No registration, but this page is still controlled.'];
                  registrationObject.registrationClass = 'error';
                  registrationObject.activeText = _this.getServiceWorkerDescription(controller);
                }
                _this.registrations.push(registrationObject);
                return;
              }
              registrationObject.registrationText = ['Scope: ' + registration.scope];

              var worker = null;
              if (registration.installing) {
                registrationObject.installingText = _this.getServiceWorkerDescription(registration.installing);
              } else if (registration.waiting) {
                registrationObject.waitingText = _this.getServiceWorkerDescription(registration.waiting);
              } else if (registration.active) {
                registrationObject.activeText = _this.getServiceWorkerDescription(registration.active);
              } else {
                registrationObject.errorText = ['No registration found.'];
              }
              _this.registrations.push(registrationObject);
            }, function(why) {
                _this.errorText = ['Error getting registration for path "' + window.location.pathname + '": ' + why];
            });
      },

      refreshClicked: function(event, detail, sender) {
        this.refreshAll();
      }
    });
  </script>
</polymer-element>