Skip to content

Instantly share code, notes, and snippets.

@willbowling

willbowling/our-sw-example.js

Last active March 18, 2016 14:23
Show Gist options
  • Save willbowling/a52d3ee32c5647eccf03 to your computer and use it in GitHub Desktop.
Save willbowling/a52d3ee32c5647eccf03 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. willbowling revised this gist Mar 18, 2016. 1 changed file with 107 additions and 62 deletions.
    169 changes: 107 additions & 62 deletions our-sw-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@


    /** 1. vars */
    var DSX_Beta = 'https://some-endpoint-here/device-token',
    var DSX_Beta = '/js/SampleDSXNotificationQ.js',
    Events = {}, pushFallBack = {}, baseUrl = '//weather.com/';


    @@ -15,15 +15,25 @@
    * All work done in the controller goes here in the form of well-defined functions
    */
    var _helperFnc = {
    /** Extending helper fnc */
    /**
    * 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) {
    for (var key in fromObj) {
    if (fromObj.hasOwnProperty(key)) {
    !fnc ? toObj[key] = fromObj[key] : toObj[fnc](key, Events[key]);
    }
    }
    this.forEach(fromObj, function(data, key){
    !fnc ? toObj[key] = fromObj[key] : toObj[fnc](key, Events[key]);
    });
    },
    /** Showing notification alert helper fnc */
    /**
    * 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,
    @@ -33,6 +43,86 @@
    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
    @@ -81,57 +171,10 @@
    }).then(function (response) {
    return response.json();
    }).then(function (dsxData) {
    // Handle Different Alerts Here:
    if (dsxData && dsxData.length > 0) {
    for (var i = 0; i < dsxData.length; i++) {
    var dsxObj = dsxData[i].content;
    var productType = dsxObj.product;
    debugger;
    // If Product Is Severe
    if (productType === "severe") {
    var 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
    }
    // If Product Is Global 8
    } else if (productType === "global8") {
    var 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
    }
    // If Product Is Breaking News
    } else if (productType === "breakingnews") {
    var 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
    }
    } else {
    var title = pushFallBack.title,
    body = pushFallBack.body,
    icon = pushFallBack.icon,
    tag = pushFallBack.tag,
    urlToOpen = pushFallBack.urlToOpen,
    notificationData = {
    url: urlToOpen
    }
    }
    // Show Alert Now
    _helperFnc.showNotifications(title, body, icon, tag, notificationData);
    };
    };
    })

    _helperFnc.forEach(dsxData, _helperFnc.pushResponse);

    })
    .catch(function (err) {
    console.log(err);
    })
    @@ -149,13 +192,15 @@
    type: 'window'
    }).then(function (windowClients) {
    console.log('WindowClients', windowClients);
    for (var i = 0; i < windowClients.length; i++) {
    var client = windowClients[i];

    _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);
    }
  2. willbowling created this gist Mar 17, 2016.
    171 changes: 171 additions & 0 deletions our-sw-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,171 @@
    /* global twc */
    /*jshint -W065 */
    /*Version 0.1 */
    (function () {
    'use strict';


    /** 1. vars */
    var DSX_Beta = 'https://some-endpoint-here/device-token',
    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 */
    extend: function (toObj, fromObj, fnc) {
    for (var key in fromObj) {
    if (fromObj.hasOwnProperty(key)) {
    !fnc ? toObj[key] = fromObj[key] : toObj[fnc](key, Events[key]);
    }
    }
    },
    /** Showing notification alert helper fnc */
    showNotifications: function (title, body, icon, tag, data) {
    self.registration.showNotification(title, {
    body: body,
    icon: icon,
    tag: tag,
    data: data,
    requireInteraction: false
    });
    },
    /**
    * 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) {
    // Handle Different Alerts Here:
    if (dsxData && dsxData.length > 0) {
    for (var i = 0; i < dsxData.length; i++) {
    var dsxObj = dsxData[i].content;
    var productType = dsxObj.product;
    debugger;
    // If Product Is Severe
    if (productType === "severe") {
    var 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
    }
    // If Product Is Global 8
    } else if (productType === "global8") {
    var 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
    }
    // If Product Is Breaking News
    } else if (productType === "breakingnews") {
    var 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
    }
    } else {
    var title = pushFallBack.title,
    body = pushFallBack.body,
    icon = pushFallBack.icon,
    tag = pushFallBack.tag,
    urlToOpen = pushFallBack.urlToOpen,
    notificationData = {
    url: urlToOpen
    }
    }
    // Show Alert Now
    _helperFnc.showNotifications(title, body, icon, tag, notificationData);
    };
    };
    })
    .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);
    for (var i = 0; i < windowClients.length; i++) {
    var client = windowClients[i];
    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();

    })();