add notifications for new moves through a service worker

.htaccess

@@ -1 +1,2 @@
-Header set Cache-Control "max-age=10,public"
+Header always set Cache-Control "max-age=60,public"
+Header always set Content-Security-Policy "worker-src 'self';"

index.html

@@ -143,6 +143,7 @@
       <div>
          <form id="cb_control_form" onsubmit="return false;">
             <div id="cb_controls">
+               <input id="cb_notify" type="checkbox"><label for="cb_notify">Notify</label>
                <button id="cb_undo" type="button" disabled="true">Undo</button>
                <button id="cb_redo" type="button" disabled="true">Redo</button>
                <button id="cb_reset" type="button">Reset</button>
@@ -150,11 +151,11 @@
                <span id="cb_message"></span><br>
             </div>
             <div id="cb_names">
-               <label>Players:</label>
+               <label for="cb_light_name">Players:</label>
                <input id="cb_light_name" placeholder="Light"> vs. <input id="cb_dark_name" placeholder="Dark">
             </div>
             <div id='cb_game'>
-               <label>Select game:</label>
+               <label for="cb_select_game">Select game:</label>
                <select id="cb_select_game">
                   <option id="cb_new_game">&mdash; New Game &mdash;</option>
                </select>

js/chess.js

@@ -24,7 +24,6 @@ let initialBoard = (function (){
          'rnbkqbnr',
       ],
       'player': 'light',
-      'moves': 0,
    });
    return function (){ return JSON.parse(init); }
 })();
@@ -499,7 +498,9 @@ function putState(board){
    var boardElem = $('#cb_board');
    var gameId = boardElem.data('gameId');
    var game = gun.get(PacoSakoUUID).get('games').get(gameId);
-   game.put({ 'board': JSON.stringify(board) });
+   var state = JSON.stringify(board);
+   $('#cb_board').data('skip_notify', state);
+   game.put({ 'board': state });
    putMeta();
 }
 
@@ -539,17 +540,28 @@ function switchGameId(newId){
    boardElem.data('board', newBoard);
    renderBoard(newBoard);
 
+   $('#cb_notify')[0].checked = false;
+   $('#cb_light_name').val('');
+   $('#cb_dark_name').val('');
+   $('#cb_board').removeData('skip_notify');
+
    gun.get(PacoSakoUUID).get('games').get(newId).on(function(d){
       if (d && d['board'] && $('#cb_board').data('gameId') === newId) {
-         var board = JSON.parse(d['board']);
+         const board = JSON.parse(d['board']);
+         const cb_board = $('#cb_board').first();
+         if ($('#cb_notify')[0].checked && cb_board.data('skip_notify') !== d['board']) {
+            if (board['move'] && board['move']['took'] && board['move']['took'][0] === 'k') {
+               notify((board['move']['side'][0] === 'd' ? 'Dark' : 'Light') + ' player won!');
+            } else {
+               notify((board['player'][0] === 'd' ? 'Dark' : 'Light') + ' player\'s turn');
+            }
+         }
+         $('#cb_board').data('skip_notify', d['board']);
          $('#cb_board').data('board', board);
          renderBoard(board);
       }
    });
 
-   $('#cb_light_name').val('');
-   $('#cb_dark_name').val('');
-
    gun.get(PacoSakoUUID).get('meta').get(newId).on(function(d){
       if (d && $('#cb_board').data('gameId') === newId) {
          $('#cb_light_name').val(d['lightName'] || '');
@@ -565,7 +577,55 @@ function switchGameId(newId){
    }
 }
 
+function disableNotify(){
+   $('#cb_notify')[0].checked = false;
+   $('#cb_notify').attr('disabled', true);
+}
+
+function requestNotify(){
+   try {
+      if (Notification && Notification.permission !== 'granted') {
+         Notification.requestPermission(function (permission){
+            if (permission === 'denied') {
+               disableNotify();
+            }
+         });
+      }
+   } catch (err) {
+      disableNotify();
+   }
+}
+
+function notify(body) {
+   try {
+      Notification.requestPermission(function(permission){
+         if (permission === 'granted') {
+            navigator.serviceWorker.ready.then(function(registration){
+               registration.showNotification('Paco Ŝako', {
+                  badge: 'svg/Chess_klt45.svg',
+                  icon: 'svg/Chess_klt45.svg',
+                  body: body,
+                  tag: 'notice',
+               });
+            });
+         } else if (permission === 'denied') {
+            disableNotify();
+         }
+      });
+   } catch (err) {
+      disableNotify();
+   }
+}
+
 $(function (){
+   try {
+      if ('serviceWorker' in navigator) {
+         navigator.serviceWorker.register('sw.js').catch(disableNotify);
+      }
+   } catch (err) {
+      disableNotify();
+   }
+
    $('.cb-square').droppable({
       accept: '.cb-piece',
       disabled: true,
@@ -633,6 +693,16 @@ $(function (){
       }
    });
 
+   $('#cb_notify').on('change', function(){
+      if (this.checked) {
+         requestNotify();
+      }
+   });
+
+   if (Notification.permission === 'denied') {
+      disableNotify();
+   }
+
    let updateMeta = function() { putMeta(); }
    $('#cb_light_name').on('input', updateMeta);
    $('#cb_dark_name').on('input', updateMeta);
@@ -703,6 +773,14 @@ $(function (){
       }
    });
 
+   window.onpopstate = function(event){
+      var gameId = location.hash.replace(/^#\//, '');
+      if (gameId.length === 16) {
+         switchGameId(gameId);
+      }
+   };
+
+
    var gameId = location.hash.replace(/^#\//, '');
    if (gameId.length !== 16) {
       gameId = randomId();