Our Service Worker Example

our-sw-example.js

/* global twc */
/*jshint -W065 */
/*Version 0.1 */
(function () {
  'use strict';


  /** 1. vars */
  var DSX_Beta = '/js/SampleDSXNotificationQ.js',
    Events = {}, pushFallBack = {}, baseUrl = '//weather.com/';


  /**
   * 2. Helper Fnc
   * All work done in the controller goes here in the form of well-defined functions
   */
  var _helperFnc = {
    /**
     * Extending helper fnc
     * @param toObj = obj that'll contain new props
     * @param fromObj = the from obj
     * @param fnc = add events handlers
     * */
    extend: function (toObj, fromObj, fnc) {
      this.forEach(fromObj, function(data, key){
        !fnc ? toObj[key] = fromObj[key] : toObj[fnc](key, Events[key]);
      });
    },
    /**
     * Showing notification alert helper fnc
     * @param title = notification's tile text
     * @param body = notification's body text
     * @param icon = notification's thumbnail icon
     * @param tag = notification's id tag
     * @param data = notification's data
     * */
    showNotifications: function (title, body, icon, tag, data) {
      self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag,
        data: data,
        requireInteraction: false
      });
    },
    /**
     * forEach iteration helper
     * @param data = the iterating
     * @param callBack = callBack fnc
     * @param context = 'this' keyword
     * **/
    forEach: function (data, callBack, context) {
      if (!data) { // If data if false
        return;
      }
      var i;
      if (Array.isArray(data) || data.length === +data.length && (data.length - 1) in data) { // If array or array like:
        for (i = 0; i < data.length; i++) {
          callBack.call(context || data[i], data[i], i, data);
        }
      } else {
        if (typeof data !== 'null' && typeof data === 'object') {  // If obj
          for (i in data) {
            data.hasOwnProperty(i) && callBack.call(context || data[i], data[i], i, data);
          }
        }
      }
    },

    /**
     * pushResponse iteration for push notifications
     * @param data = the iterating data
     * @param i = the index
     * **/
    pushResponse: function (data, i) {
      if (data.content) {
        var showNotification = true, title, body, icon, tag, urlToOpen, notificationData;// Notification vars
        var dsxObj = JSON.parse(data.content), productType = dsxObj.product;// Data vars
        switch (productType) {
          case 'severe':
            title = dsxObj.headlines["de-de"] + "\n" + dsxObj.prsntNm || pushFallBack.title;
            body = dsxObj.title || dsxObj.description || pushFallBack.body;
            icon = dsxObj.icon || pushFallBack.icon;
            tag = (productType || pushFallBack.tag) + "" + i;
            urlToOpen = dsxObj.url || pushFallBack.urlToOpen;
            notificationData = {
              url: urlToOpen
            };
            break;
          case 'global8':
            title = dsxObj.headlines["de-de"] + "\n" + dsxObj.prsntNm || pushFallBack.title;
            body = dsxObj.title || dsxObj.description || pushFallBack.body;
            icon = dsxObj.icon || pushFallBack.icon;
            tag = (productType || pushFallBack.tag) + "" + i;
            urlToOpen = dsxObj.url || pushFallBack.urlToOpen;
            notificationData = {
              url: urlToOpen
            };
            break;
          case 'breakingnews':
            title = dsxObj.headline || pushFallBack.title;
            body = dsxObj.title || pushFallBack.body;
            icon = dsxObj.imgSrc || pushFallBack.icon;
            tag = (productType || pushFallBack.tag) + "" + i;
            urlToOpen = dsxObj.articleUrl || pushFallBack.urlToOpen;
            notificationData = {
              url: urlToOpen
            };
            break;
          default :
            title = pushFallBack.title;
            body = pushFallBack.body;
            icon = pushFallBack.icon;
            tag = pushFallBack.tag;
            urlToOpen = pushFallBack.urlToOpen;
            notificationData = {
              url: urlToOpen
            };
            // Disabling notification
            showNotification = false;
        }
        // Sending notification
        showNotification && _helperFnc.showNotifications(title, body, icon, tag, notificationData);
      }
    },
    /**
     * Initiating push notification events
     * Adding event listeners on self obj
     * */
    initAddingEvents: function () {
      // Extending self by adding addEventListener for all of Events props
      _helperFnc.extend(self, Events, 'addEventListener');
    }
  };


  /**
   * 3. Extending pushFallBack
   * Adding fall backs to dsx data
   */
  _helperFnc.extend(pushFallBack, {
    title: "TWC Breaking News",
    body: "The Weather Channel Breaking News. Breaking news near your location, Read more",
    icon: '/images/touch/icon-128x128.png',
    tag: "TWC Push Notifications",
    urlToOpen: "https://weather.com/news"
  });


  /**
   * 4. Extending Events w/ eventListeners
   * Events listeners Including:
   * install, activate, push, notificationclick events
   */
  _helperFnc.extend(Events, {
    /** install event handler */
    install: function (event) {
      self.skipWaiting();
      console.log('Installed', event);
    },
    /** activate event handler */
    activate: function (event) {
      console.log('Activated', event);
    },
    /** push event handler */
    push: function (event) {
      event.waitUntil(
        fetch(DSX_Beta, {
          method: 'POST',
          mode: 'cors'
        }).then(function (response) {
          return response.json();
        }).then(function (dsxData) {

          _helperFnc.forEach(dsxData, _helperFnc.pushResponse);

        })
          .catch(function (err) {
            console.log(err);
          })
      );
    },
    /** notificationclick event handler */
    notificationclick: function (event) {
      event.notification.close();
      var urlValue = event.notification && event.notification.data.url,
        url = urlValue ? urlValue : "/";


      event.waitUntil(
        clients.matchAll({
          type: 'window'
        }).then(function (windowClients) {
          console.log('WindowClients', windowClients);

          _helperFnc.forEach(windowClients, function(windowClient, index){
            var client = windowClient;
            console.log('WindowClient', client);
            if (client.url === url && 'focus' in client) {
              return client.focus();
            }
          });

          if (clients.openWindow) {
            return clients.openWindow(url);
          }
        })
      );
    }
  });


  /** 5. Initiating adding events on self */
  _helperFnc.initAddingEvents();

})();