Building Progressive Web Apps

self.addEventListener('fetch', function (event) {
 event.respondWith(
   fetch(event.request)
   .then(function(response){
     // then block is optional. This block is executed
     // for every resource on your site - from css to js.
     // You must return the response which is an instance
     // of the Response object, else no content is served.
     return response;
   })
   .catch(function () {
     // This is executed once - as soon as the browser
     // detects that the user is offline.
     return new Response(
       '<b>Offline</b>',
       { headers: { 'Content-Type': 'text/html' } }
     );
   })
 );
});

var CACHE_VERSION = 1;

var CURRENT_CACHES = {
 gih: 'gih-cache-v' + CACHE_VERSION
};

/*
listen for the install event before downloading
the files for serving offline content
*/
self.addEventListener('install', function (event) {
 // waitUntil tells the service worker that a work
 // is ongoing until it finishes executing the promise
 event.waitUntil(
   // caches - is a global object
   caches.open(CURRENT_CACHES.gih).then(function (cache) {
     // store assets offline
     // cache.addAll will save the whole Response object
     return cache.addAll([
       '/index-offline.html',
       'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
       '/css/gih-offline.css',
       '/img/jumbo-background-sm.jpg',
       '/img/logo-header.png'
     ]);
   }));
});

// clean up old cache using a simple versioning
// https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Deleting_old_caches
self.addEventListener('activate', function (event) {
 var cacheWhitelist = Object.keys(CURRENT_CACHES).map(function (key) {
   return CURRENT_CACHES[key];
 });
 // delete old cache
 event.waitUntil(
   caches.keys().then(function (keyList) {
     return Promise.all(keyList.map(function (key) {
       if (cacheWhitelist.indexOf(key) === -1) {
         return caches.delete(key);
       }
     }));
   })
 );
});

self.addEventListener('fetch', function (event) {
 event.respondWith(
   // in the absence of a network connection,
   // serve the HTML file of your choosing
   // from the 'install' listener
   fetch(event.request)
     .catch(function () {
       // note that different querystring parameters
       // will make caches.match fail
       return caches.match(event.request)
         .then(function (response) {
           if (response) {
             return response;
           } else if (event.request.headers.get('accept').includes('text/html')) {
             // return your offline page for HTML requests
             return caches.match('/index-offline.html');
           }
         });
     })
 );
});

if (!window.indexedDB) {
  throw new Error('No browser support for IndexedDb.');
}

const TABLE_NAME = 'tbl1';

// request is an instance of IDBOpenDBRequest
var request = window.indexedDB.open('testdb', 1);

//event is Event
//event.target is IDBOpenDBRequest
request.onsuccess = (event) => {
  var x = event;
}

//event is Event
//event.target is IDBOpenDBRequest
request.onerror = (event) => {
  console.error(event.target.error);
}

//event is IDBVersionChangeEvent
//event.target is IDBOpenDBRequest
request.onupgradeneeded = function (event) {
  //db is IDBDatabase
  var db = event.target.result;

  //store is IDBObjectStore
  //any error here will fall back into request.onerror
  var store = db.createObjectStore(TABLE_NAME, {autoIncrement: true});

  //transaction is IDBTransaction
  var transaction = store.transaction;

  //event is Event
  //event.target is IDBTransaction and is the same transaction variable
  transaction.onerror = (event) => {
    console.error(event.target.error);
  }

  //event is Event
  //event.target is IDBTransaction and is the same transaction variable
  transaction.oncomplete = (event) => { /* noop */ }
}

var idbInsert = function(){
  //db is IDBDatabase
  var db = request.result;

  var insertRequest = db.transaction(TABLE_NAME, 'readwrite')
    .objectStore(TABLE_NAME)  //instance IDBObjectStore
    .add({inserted: (new Date()).toDateString() }); //instance of IDBRequest

  //event is Event
  //event.target is IDBRequest
  insertRequest.onsuccess = (event) => { /* noop */ }

  insertRequest.onerror = (event) => {
    console.log('Error', event.target.error);
  }
}

var idbFind = function(idKey, fnSuccess, fnError){
  idKey = idKey || 3;
  var db = request.result;
  var findRequest = db.transaction(TABLE_NAME, 'readwrite')
    .objectStore(TABLE_NAME)
    .get(idKey);

  findRequest.onsuccess = (event) => {
    //event.target.result is your data
    //undefined if nothing was found
    console.log('Success', event.target.result);

    //callback for updating success
    if(fnSuccess && typeof fnSuccess === 'function'){
      fnSuccess(event);
    }
  }

  findRequest.onerror = (event) => {
    //callback for updating failures
    if(fnSuccess && typeof fnSuccess === 'function'){
      fnError(event);
    }
  }
}

//FF has getAll but it's non-standard
var idbList = function(){
  var records = [];
  var db = request.result;
  var store = db.transaction(TABLE_NAME)
    .objectStore(TABLE_NAME);

  store.openCursor().onsuccess = function(event){
    var cursor = event.target.result;
    if(cursor){
      records.push(cursor.value);
      cursor.continue();
    }else{
      console.log('Records fetched: ', records);
    }
  }
}

var idbDelete = function(idKey){
  idKey = idKey || 3;
  var db = request.result;
  var deleteRequest = db.transaction(TABLE_NAME, 'readwrite')
    .objectStore(TABLE_NAME)
    .delete(idKey);

  deleteRequest.onsuccess = (event) => { /* noop */ }
  deleteRequest.onerror = (event) => { /* noop */ }
}


var idbUpdate = function(idKey){
  idKey = idKey || 3;
  idbFind(idKey, function(event){
    //get the data and update the record
    var findResult = event.target.result;
    findResult.updated = true;

    //save your changes
    var objectStore = event.target.transaction.objectStore(TABLE_NAME);

    //take note of idKey for autoincrement fields
    //put is also an insert/update operation
    var updateRequest = objectStore.put(findResult, idKey);

    updateRequest.onsuccess = (event) => {
      console.log('Success',event);
    };

    updateRequest.onerror = (event) => {
      console.log('Error', event.target.error);
    }

  }, function(event){
    console.log('Error', event.target.error);
  });
}

// Example on how to log fetch API requests from the service worker to the window
// Window code
var msgChan = new MessageChannel();
// receiving
msgChan.port1.onmessage = function (event) {
 console.log('URL fetched:', event.data);
};
// sending
navigator.serviceWorker.controller.postMessage('listening', [msgChan.port2]);

// Service worker code
self.addEventListener('message', function (messageEvent) {
 var openPort = messageEvent.ports[0];
 self.addEventListener('fetch', function (fetchEvent) {
   // sending every time a fetch api request is issued
   openPort.postMessage(fetchEvent.request.url);
 });
});

// DOM Message
if(‘serviceWorker’ in navigator && navigator.serviceWorker.controller){
  navigator.serviceWorker.controller.postMessage(
    { action: 'submit' }
  );
}

// Service Worker Handler
self.addEventListener('message', function (event) {
  if (event.data.action === 'submit') {
     console.log(‘Window Source:’, event.source);
  }
});

// Service Worker, must be placed inside an event to ensure that clients are registered
self.addEventListener('message', function (event) {
 // Use this to limit communication with the triggering window
 // self.clients.get(event.source.id).then(function(){...})
 
 self.clients.matchAll().then(function (clients) {
   clients.forEach(function (client) {
     client.postMessage({ action: 'log', message: 'client id' + client.id });
   });
 });
});

// Open Window
if ('serviceWorker' in navigator) {
 navigator.serviceWorker.addEventListener('message', function (event) {
   if (data.action === 'log') {
     console.log(data.message);
   }
 });
}

if ('serviceWorker' in navigator) {
 // Notifications will work even if you don't have a
 // service worker javascript file registered
 Notification.requestPermission().then(function (permission) {
   if (permission === 'granted') {
     // .ready can be called anywhere. it delays execution
     // of your code until the service worker is active
     navigator.serviceWorker.ready.then(function (registration) {
       var count = 1;
       // The tag parameter allows you to overwrite an existing
       // notification instead of displaying a new one
       var createNotification = function() {
         registration.showNotification('New Messages Count: ', {
           body: count,
           tag: 'counter-notification'
         });
         count += 1;
       };
       // simulates sending an updated message
       setInterval(createNotification, 2000);
     });
   }
 });
}

// Simple Client Subscription
if ("Notification" in window &&
"PushManager" in window &&
"serviceWorker" in navigator) {
Notification.requestPermission().then(function (permission) {
  if (permission === "granted") {
    navigator.serviceWorker.ready.then(function (registration) {
      // userVisibleOnly=false is not supported
      return registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: "VAPID_KEY_HERE"
      });
    }).then(function (subscription) {
     var fetchOptions = {
       method: "post",
       headers: new Headers({
         "Content-Type": "application/json"
       }),
       body: JSON.stringify(subscription)
     };
     return fetch("/add-subscription", fetchOptions);
    });
  }
});
}

// Simple Server example using web-push
app.post("/add-subscription", function (req, res) {
 webpush.setGCMAPIKey("GCMAPIKey");
 webpush.setVapidDetails(
   "SUBJECT_USUALLY_THE_EMAIL",
   "VAPID_PUBLIC_KEY",
   "VAPID_PRIVATE_KEY"
 );

 webpush
   .sendNotification(req.body, { data: {} })
   .then(function () {
     res.json({ sent: true });
   })
   .catch(function () {
     res.json({ sent: false });
   });
});

// Service Worker Listener
self.addEventListener('push', function(event) {
 self.registration.showNotification('Push message received', {
   body: event.data
 });
});