webdash-workbox.html

<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="/bower_components/empty-state-webdash/empty-state-webdash.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-toast/paper-toast.html">
<link rel="import" href="/bower_components/paper-input/paper-input.html">
<link rel="import" href="/bower_components/paper-spinner/paper-spinner-lite.html">
<link rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="/bower_components/paper-tooltip/paper-tooltip.html">


<dom-module id="webdash-workbox">
  <template>
    <style>
      :host {
        display: block;
      }

      .brand {
        background-color: var(--brand);
      }

      .text-center {
        text-align: center;
      }

      [hidden] {
        display: none;
      }

      a {
        color: inherit;
      }

      .empty-state-cta {
        position: relative;
        top: -20px;
        margin-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
      }

      .empty-state-cta paper-spinner-lite {
        margin-right: 20px;
      }

      paper-spinner-lite {
        width: 20px;
        height: 20px;
      }

      paper-button[disabled] {
        color: white;
        opacity: 0.6;
      }

      paper-dialog {
        z-index: 10000;
      }

      paper-input {
        --paper-input-container-focus-color: white;
        --paper-input-container-color: #ececec;
        --paper-input-container-shared-input-style_-_color: white;
      }

      #plugin {
        min-height: 250px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #plugin>div {
        flex-basis: 100%;
      }

      #questionnaire .container {
        width: 100%;
      }

      #questionnaire paper-input {
        width: 50%;
      }

      #questionnaire p {
        text-align: center;
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        font-weight: bold;
      }

      paper-tooltip {
        font-weight: normal;
      }

      .info {
        text-decoration: underline;
      }

      #questionnaire .hint {
        margin-top: 15px;
        margin-bottom: 35px;
        color: var(--gray-4);
        font-weight: normal;
      }

      #questionnaire paper-button {
        margin-left: 20px;
      }

      #questionnaire .question {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      paper-checkbox {
        --paper-checkbox-checked-color: var(--accent);
        --paper-checkbox-label-color: white;
        --paper-checkbox-unchecked-color: var(--gray-5);
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(125px, 1fr));
      }

      .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        text-align: center;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
      }

      .title {
        font-size: 28px;
        font-weight: bold;
      }

      .subtitle {
        color: rgba(255, 255, 255, 0.75);
        font-weight: 500;
      }

      .code {
        font-family: Fira Code, Fira Mono, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
      }
    </style>

    <div id="plugin">
      <div>
        <template is="dom-if" if="{{!workboxInstalled}}">
          <empty-state-webdash title="Workbox is not installed">
            Workbox is a set of libraries that make it easy to cache assets and take full advantage of features used to build PWAs.
            <br>
            <br> Workbox needs to be installed in your project.
          </empty-state-webdash>
          <div class="text-center">
            <paper-button class="brand empty-state-cta" on-click="installWorkbox" disabled$="{{installingWorkbox}}">
              <paper-spinner-lite active$="{{installingWorkbox}}" hidden$="{{!installingWorkbox}}"></paper-spinner-lite>
              <span hidden$="{{installingWorkbox}}">Install workbox</span>
              <span hidden$="{{!installingWorkbox}}">Installing workbox</span>
            </paper-button>
          </div>
        </template>

        <template is="dom-if" if="{{showConfigGenerator}}">
          <empty-state-webdash title="Setup Workbox configuration">
            We'll ask you a couple of questions that will generate your
            <strong>workbox-config.js</strong> file.
          </empty-state-webdash>
          <div class="text-center">
            <paper-button class="brand empty-state-cta" on-click="setupWorkbox" disabled$="{{settingupWorkbox}}">
              Start wizard
            </paper-button>
          </div>
        </template>


        <template is="dom-if" if="{{questionnaire}}">
          <div id="questionnaire">
            <template is="dom-if" if="{{step1}}">
              <div class="container">
                <p>What is the root of your web app?</p>
                <p class="hint">This is the directory that you deploy.</p>
                <div class="question">
                  <paper-input label="Root of your app" value="{{globDirectory}}"></paper-input>
                  <paper-button class="brand" on-click="doneStep1">Next</paper-button>
                </div>
              </div>
            </template>
            <template is="dom-if" if="{{step2}}">
              <div class="container">
                <p>Which file types would you like to
                  <span class="info">precache</span>
                  <paper-tooltip animation-delay="0">Precaching: adding assets (images, scripts, ...) to the cache of the service worker.
                    <br>These assets can then be served without using the network.</paper-tooltip>?</p>
                <p class="hint">Choose the file types that are required for your first load experience.</p>
                <div class="question">
                  <div class="grid" id="extensions">
                    <paper-checkbox name="html" checked>HTML</paper-checkbox>
                    <paper-checkbox name="js" checked>JS</paper-checkbox>
                    <paper-checkbox name="css" checked>CSS</paper-checkbox>
                    <paper-checkbox name="png" checked>PNG</paper-checkbox>
                    <paper-checkbox name="jpg" checked>JPG</paper-checkbox>
                    <paper-checkbox name="svg" checked>SVG</paper-checkbox>
                  </div>

                  <paper-button class="brand" on-click="doneStep2">Next</paper-button>
                </div>
              </div>
            </template>
            <template is="dom-if" if="{{step3}}">
              <div class="container">
                <p>Would you like to ignore the following directories from the precached assets?</p>
                <p class="hint">These directories often contain additional assets than you don't need.</p>
                <div class="question">
                  <div class="grid" id="ignoreOptions">
                    <template is="dom-repeat" items="{{suggestedIgnores}}">
                      <paper-checkbox name="{{item}}" checked>{{item}}</paper-checkbox>
                    </template>
                  </div>
                  <paper-button class="brand" on-click="doneStep3">Next</paper-button>
                </div>
              </div>
            </template>
            <template is="dom-if" if="{{step4}}">
              <div class="container">
                <p>Where would you like to save your service worker file?</p>
                <p class="hint">This path should match your service worker
                  <a href="https://codetogo.io/how-to-register-a-service-worker-in-javascript/" target="_blank" rel="noopener">registration code.</a>
                </p>
                <div class="question">
                  <paper-input label="Service worker" value="{{swDest}}"></paper-input>
                  <paper-button class="brand" on-click="generate">Generate</paper-button>
                </div>
              </div>
            </template>
          </div>
        </template>

        <template is="dom-if" if="{{showStats}}">
          <template is="dom-if" if="{{!serviceWorker}}">
            <empty-state-webdash title="Service worker not yet generated">
              Run
              <strong class="code">npx workbox generateSW</strong> to generate it.
            </empty-state-webdash>
      </div>
      </template>
      <template is="dom-if" if="{{serviceWorker}}">
        <div class="stats">
          <div>
            <div class="title">{{cachedFiles}}</div>
            <div class="subtitle">Cached files</div>
          </div>
          <div>
            <div class="title">{{workboxVersion}}</div>
            <div class="subtitle">Workbox CDN</div>
          </div>
        </div>
      </template>
      </template>

    </div>
    </div>

    <paper-toast id="toast" class="fit-bottom"></paper-toast>

  </template>

  <script>
    class WebdashWorkbox extends Polymer.Element {
      static get is() { return 'webdash-workbox'; }

      ready() {
        super.ready();
        this.backend = new Backend(WebdashWorkbox.is);
        this.installingWorkbox = false;
        this.init();
      }

      init() {
        this.backend.get('init')
          .then(response => {
            this.configExists = response.configExists;
            this.workboxInstalled = response.workboxInstalled;

            this.showConfigGenerator = this.workboxInstalled && !this.configExists;
            this.showStats = this.workboxInstalled && this.configExists;

            if (this.showStats) {
              this.getStats();
            }
          });
      }

      installWorkbox() {
        this.installingWorkbox = true;
        this.backend.post('install')
          .then((response) => {
            if (response && response.result) {
              const toast = this.$.toast;
              toast.text = "Workbox successfully installed";
              toast.fitInto = this.$.plugin;
              toast.open();
              this.init();
            }
          })
          .finally(() => {
            this.installingWorkbox = false;
          });
      }

      setupWorkbox() {
        this.showConfigGenerator = false;
        this.questionnaire = true;
        this.step1 = true;
        this.globDirectory = window.webdashConfig.dist || `./dist/`;
      }
      doneStep1() {
        this.step1 = false;
        this.step2 = true;
        if (!this.globDirectory.endsWith('/')) {
          this.globDirectory = this.globDirectory + '/';
        }
        this.swDest = `${this.globDirectory}service-worker.js`;
        this.checkForGlobIgnores();
      }
      checkForGlobIgnores() {
        this.backend.get(`check-ignores?dir=${this.globDirectory}`)
          .then(response => {
            if (response.result.length) {
              this.suggestedIgnores = response.result;
            }
          });
      }
      doneStep2() {
        this.step2 = false;
        if (this.suggestedIgnores) {
          this.step3 = true;
        } else {
          this.step4 = true;
        }
      }
      doneStep3() {
        this.step3 = false;
        this.step4 = true;
      }

      generate() {
        const globDirectory = this.globDirectory;
        const swDest = this.swDest;
        const extensions = this.shadowRoot.querySelector('#extensions');
        const patterns = [...extensions.children]
          .filter(item => item.checked)
          .map(item => item.name);
        let ignores = [];
        if (this.suggestedIgnores) {
          const ignoreOptions = this.shadowRoot.querySelector('#ignoreOptions');
          ignores = [...ignoreOptions.children]
            .filter(item => item.checked)
            .map(item => item.name);
        }

        this.backend.post('config', {
          globDirectory,
          swDest,
          patterns,
          ignores,
        }).then(() => {
          this.questionnaire = false;
          const toast = this.$.toast;
          toast.text = "Workbox configuration successfully generated";
          toast.fitInto = this.$.plugin;
          toast.open();
          this.init();
        });
      }

      getStats() {
        this.backend.get('stats')
          .then(response => {
            if (!response.result) {
              return false;
            }
            this.serviceWorker = response.serviceWorker;
            this.cachedFiles = response.cachedFiles;
            this.workboxVersion = response.workboxVersion;
          });
      }
    }

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