• app.js

  • /* global Logger, SWUtil */
  • App

    This recipe

    function App() {
      this.constructor();
    }
  • App constructor

    App.prototype.constructor = function constructor() {
      var thisapp = this;
    
      Logger.log('App started');
  • instatiate a new Service Worker helper

      this.swUtil = new SWUtil();
  • register click events

      document.querySelector('#reloadapp').addEventListener('click', function() {
        window.location.reload();
      });
  • checking whether service workers are supported

      if (this.swUtil.areServiceWorkersSupported()) {
        document.querySelector('#swinstall').addEventListener('click',
          function() {
            thisapp.enableCoolFeatures();
          }
        );
    
        document.querySelector('#swuninstall').addEventListener('click',
          function() {
            thisapp.disableCoolFeatures();
          }
        );
  • checking whether a service worker is in control

        if (this.swUtil.isServiceWorkerControllingThisApp()) {
          Logger.info('App code run as expected');
    
          this.disableSWRegistration();
        } else {
          this.enableSWRegistration();
        }
      } else {
        Logger.error('Service workers are not supported by this browser');
      }
    };
  • Enable cool features

    Try to register a service worker in order to enable cool features (e.g. cache, offline navigation, …)

    App.prototype.enableCoolFeatures = function enableCoolFeatures() {
      var scriptURL;
      var scope;
    
      Logger.newSection();
      Logger.log('Enabling cool features...');
  • get params from DOM inputs

      scriptURL = document.querySelector('#swscripturl');
      scope = document.querySelector('#swscope');
    
      Logger.debug(
        'Configuring the following service worker ' + scriptURL.value +
        ' with scope ' + scope.value
      );
    
      if (scriptURL.value !== '') {
        Logger.debug('scriptURL: ' + scriptURL.value);
      } else {
        Logger.error('No SW scriptURL specified');
        return;
      }
    
      if (scope.value !== '') {
        Logger.debug('scope: ' + scope.value);
      } else {
        Logger.warn('scope: not specified ' +
          '(scope defaults to the path the script sits in)'
        );
      }
  • register the specified service worker

      this.swUtil.registerServiceWorker(scriptURL.value, scope.value).then(
          this.disableSWRegistration, // success
          this.enableSWRegistration // error
      );
    };
  • Disable cool features

    Try to unregister the active service worker in order to disable cool features

    App.prototype.disableCoolFeatures = function disableCoolFeatures() {
      Logger.newSection();
      Logger.log('Disabling cool features...');
    
      this.swUtil.unregisterServiceWorker().then(
          this.enableSWRegistration, // success
          this.disableSWRegistration // error
      );
    };
  • Enable Service Worker Registration

    Enable the possibility for the user to register a service worker

    App.prototype.enableSWRegistration = function() {
      document.querySelector('#swinstall').disabled = false;
      document.querySelector('#swuninstall').disabled = true;
    };
  • Disable Service Worker Registration

    Disable the possibility for the user to unregister a service worker

    App.prototype.disableSWRegistration = function() {
      document.querySelector('#swinstall').disabled = true;
      document.querySelector('#swuninstall').disabled = false;
    };
  • starts the application

    var app = new App();
    console.debug(app);

Has it been useful?

Tell us what you think of this recipe by leaving a comment!