PWA Support

index.html

@@ -10,12 +10,14 @@
         <meta name="apple-mobile-web-app-title" content="SondeHub Tracker">
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="theme-color" content="#00a3d3" />
         <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon.png" />
         <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon.png" />
         <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon.png" />
         <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon.png" />
         <link rel="fluid-icon" href="img/fluidicon.png" title="Mobile Tracker" />
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
+        <link rel="manifest" href="manifest.json">
 
         <link rel="stylesheet" href="css/mobile.css"/>
         <link rel="stylesheet" href="css/leaflet.css" />
@@ -363,12 +365,13 @@ <h3>Report Recovery</h3>
     <script type="text/javascript" language="javascript" src="js/leaflet.js"></script>
     <script type="text/javascript" language="javascript" src="js/Leaflet.fullscreen.min.js"></script>
     <script type="text/javascript" language="javascript" src="js/L.Terminator.js"></script>
-    <script src="https://xc5dqkj2cgb1.statuspage.io/embed/script.js"></script>
+    <script src="https://xc5dqkj2cgb1.statuspage.io/embed/script.js" async defer></script>
     <script type="text/javascript" language="javascript" src="js/mobile.js"></script>
     <script type="text/javascript" language="javascript" src="js/rbush.js"></script>
     <script>var module = {};</script>
     <script src="js/leaflet.canvas-markers.js"></script>
     <script>module.exports(L);</script>
+    <script type="text/javascript" language="javascript" src="js/pwa.js"></script>
     <!--
     <script type="text/javascript" language="javascript" src="js/iscroll.js"></script>
     <script type="text/javascript" language="javascript" src="js/jquery-1.12.4-min.js"></script>

js/pwa.js

@@ -0,0 +1,3 @@
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js')
+}

js/tracker.js

@@ -384,6 +384,8 @@ function load() {
         preferCanvas: true,
     });
 
+    var svgRenderer = L.svg();
+
     map.addControl(new L.Control.Fullscreen({ position: 'bottomleft' }));
 
     new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
@@ -419,7 +421,7 @@ function load() {
     receiverCanvas.addTo(map);
 
     // initalize nite overlay
-    nite = new L.terminator();
+    nite = new L.terminator({ renderer: svgRenderer });
 
     if (offline.get("opt_daylight")) {
         map.addLayer(nite);
@@ -1372,8 +1374,11 @@ function redrawPrediction(vcallsign) {
     }
 }
 
-function updatePolyline(vcallsign) {
+function updatePolyline(vcallsign, flag) {
     for(var k in vehicles[vcallsign].polyline) {
+        if (flag) {
+            vehicles[vcallsign].polyline[k].setLatLngs([]);
+        }
         vehicles[vcallsign].polyline[k].setLatLngs(vehicles[vcallsign].positions);
     }
 }
@@ -2539,7 +2544,10 @@ function refresh(serial) {
     success: function(response, textStatus) {
         $("#stText").text("loading |");
         response.fetch_timestamp = Date.now();
-        update(response);
+        if (serial === undefined) {update(response);} else {
+            //vehicles[serial].kill();
+            update(response, true);
+        }
         $("#stText").text("");
         $("#stTimer").attr("data-timestamp", response.fetch_timestamp);
     },
@@ -3194,7 +3202,7 @@ var ssdv = {};
 var status = "";
 var bs_idx = 0;
 
-function update(response) {
+function update(response, flag) {
     if (response === null ||
         !response.positions ||
         !response.positions.position ||
@@ -3265,7 +3273,12 @@ function update(response) {
             if(vehicle === undefined) return;
 
             if(vehicle.updated) {
-                updatePolyline(vcallsign);
+                if (flag) {
+                    updatePolyline(vcallsign, true);
+                } else {
+                    updatePolyline(vcallsign);
+                }
+
                 updateVehicleInfo(vcallsign, vehicle.curr_position);
 
                 // remember last position for each vehicle

manifest.json

@@ -0,0 +1,24 @@
+{
+  "name": "SondeHub Tracker",
+  "short_name": "SondeHub",
+  "description": "A webapp for tracking radiosondes.",
+  "theme_color": "#00a3d3",
+  "background_color": "#33b5e5",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/img/icons/maskable_icon_x192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/img/icons/maskable_icon_x512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    }
+  ]
+}

service-worker.js

@@ -0,0 +1,73 @@
+self.addEventListener('install', function(event) {
+    event.waitUntil(
+        caches.open(cacheName).then(function(cache) {
+            return cache.addAll(
+                [
+                    '/css/mobile.css',
+                    '/css/leaflet.css',
+                    '/css/leaflet.fullscreen.css',
+                    '/js/leaflet.js',
+                    '/js/Leaflet.fullscreen.min.js',
+                    '/js/L.Terminator.js',
+                    '/js/mobile.js',
+                    '/js/rbush.js',
+                    '/js/leaflet.canvas-markers.js',
+                    '/js/pwa.js',
+                    '/js/init_plot.js',
+                    '/img/markers/antenna-green.png',
+                    '/img/markers/balloon-blue.png',
+                    '/img/markers/balloon-cyan.png',
+                    '/img/markers/balloon-green.png',
+                    '/img/markers/balloon-orange.png',
+                    '/img/markers/balloon-purple.png',
+                    '/img/markers/balloon-red.png',
+                    '/img/markers/balloon-yellow.png',
+                    '/img/markers/car-blue.png',
+                    '/img/markers/car-green.png',
+                    '/img/markers/car-red.png',
+                    '/img/markers/car-yellow.png',
+                    '/img/markers/parachute-yellow.png',
+                    '/img/markers/parachute-blue.png',
+                    '/img/markers/parachute-cyan.png',
+                    '/img/markers/parachute-green.png',
+                    '/img/markers/parachute-orange.png',
+                    '/img/markers/parachute-purple.png',
+                    '/img/markers/parachute-red.png',
+                    '/img/markers/payload-blue.png',
+                    '/img/markers/payload-cyan.png',
+                    '/img/markers/payload-green.png',
+                    '/img/markers/payload-not-recovered.png',
+                    '/img/markers/payload-orange.png',
+                    '/img/markers/payload-purple.png',
+                    '/img/markers/payload-recovered.png',
+                    '/img/markers/payload-red.png',
+                    '/img/markers/payload-yellow.png',
+                    '/img/markers/target-blue.png',
+                    '/img/markers/target-cyan.png',
+                    '/img/markers/target-green.png',
+                    '/img/markers/target-orange.png',
+                    '/img/markers/target-purple.png',
+                    '/img/markers/target-red.png',
+                    '/img/markers/target-yellow.png',
+                    '/img/markers/shadow.png',
+                    '/img/markers/balloon-pop.png',
+                    '/img/hab-spinner.gif',
+                    '/img/marker-you.gif',
+                    '/img/sondehub_logo.gif',
+                    '/favicon.ico',
+                    '/font/HabitatFont.woff',
+                    '/font/Roboto-regular.woff',
+                    '/index.html'
+                ]
+            );
+        })
+    );
+});
+
+self.addEventListener('fetch', function (event) {
+    event.respondWith(
+        caches.match(event.request).then(function (response) {
+            return response || fetch(event.request);
+        }),
+    );
+});