Added sw.js and manifest

manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "PHP Server Monitor",
+  "short_name": "PSM",
+  "icons": [{
+    "src": "static/phpservermon.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    }, {
+      "src": "favicon.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    } ,{
+      "src": "favicon.ico",
+      "sizes": "32x32",
+      "type": "image/x-icon"
+    }],
+  "start_url": "/index.php",
+  "display": "standalone",
+  "background_color": "#3E4EB8",
+  "theme_color": "#ffffff"
+}

service-worker.js

@@ -0,0 +1,73 @@
+var dataCacheName = 'PSM-v1';
+var cacheName = 'PSM-PWA-final-1';
+var filesToCache = [
+  '/',
+  '/index.php',
+  '/static/js/history.js',
+  '/static/js/script.js',
+  '/static/js/search.js',
+  '/static/css/bootstrap.min.css',
+  '/static/css/search.min.css',
+  '/static/css/style.min.css',
+  '/static/phpservermon.png'
+];
+
+self.addEventListener('install', function(e) {
+  console.log('[ServiceWorker] Install');
+  e.waitUntil(
+    caches.open(cacheName).then(function(cache) {
+      console.log('[ServiceWorker] Caching app shell');
+      return cache.addAll(filesToCache);
+    })
+  );
+});
+
+self.addEventListener('activate', function(e) {
+  console.log('[ServiceWorker] Activate');
+  e.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (key !== cacheName && key !== dataCacheName) {
+          console.log('[ServiceWorker] Removing old cache', key);
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+  return self.clients.claim();
+});
+
+/*self.addEventListener('fetch', function(e) {
+  console.log('[Service Worker] Fetch', e.request.url);
+  var dataUrl = 'https://query.yahooapis.com/v1/public/yql';
+  if (e.request.url.indexOf(dataUrl) > -1) {
+    /*
+     * When the request URL contains dataUrl, the app is asking for fresh
+     * weather data. In this case, the service worker always goes to the
+     * network and then caches the response. This is called the "Cache then
+     * network" strategy:
+     * https://jakearchibald.com/2014/offline-cookbook/#cache-then-network
+     */
+    /*
+    e.respondWith(
+      caches.open(dataCacheName).then(function(cache) {
+        return fetch(e.request).then(function(response){
+          cache.put(e.request.url, response.clone());
+          return response;
+        });
+      })
+    );
+  } else {
+    /*
+     * The app is asking for app shell files. In this scenario the app uses the
+     * "Cache, falling back to the network" offline strategy:
+     * https://jakearchibald.com/2014/offline-cookbook/#cache-falling-back-to-network
+     */
+    /*
+    e.respondWith(
+      caches.match(e.request).then(function(response) {
+        return response || fetch(e.request);
+      })
+    );
+  }
+});*/

src/templates/default/main/body.tpl.html

@@ -7,6 +7,16 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<meta name="description" content="PHP Server Monitor - {{ subtitle }}">
 	<meta name="robots" content="noindex" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<link rel="manifest" href="manifest.json">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black">
+	<meta name="apple-mobile-web-app-title" content="PSM">
+	<link rel="apple-touch-icon" href="static/phpservermon.png">
+	<meta name="msapplication-TileImage" content="static/phpservermon.png">
+	<meta name="msapplication-TileColor" content="#424242">
+	<!-- TODO add base url -->
+  	<!-- <link rel="canonical" href=""> -->
 	<meta name="theme-color" content="#424242">
 	<link rel="icon" type="image/x-icon" href="favicon.ico" />
 	<link rel="icon" type="image/png" href="favicon.png" />

static/js/scripts.js

@@ -153,4 +153,10 @@ if ($(".search_input").length > 0) {
 			rel: 'stylesheet',
 			href: 'static/css/search.min.css'
 		});
+}
+
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+             .register('./service-worker.js')
+             .then(function() { console.log('Service Worker Registered'); });
 }