Begin Progrssive Web App #7

ovdingen · May 22, 2018 · a2101e2 · a2101e2
1 parent 9bed764
commit a2101e2
Show file tree

Hide file tree

Showing 10 changed files with 155 additions and 2 deletions.
diff --git a/static/.DS_Store b/static/.DS_Store
diff --git a/static/img/Vierkant logo.png b/static/img/Vierkant logo.png
diff --git a/static/img/icons-192.png b/static/img/icons-192.png
diff --git a/static/img/icons-512.png b/static/img/icons-512.png
diff --git a/static/js/sw.js b/static/js/sw.js
@@ -0,0 +1,62 @@
+var CACHE_NAME = 'spoor-app-cache-v1';
+var urlsToCache = [
+  '/',
+  '/../static/css/materialize.css',
+  '/../static/css/style.css',
+  '/../static/js/jquery-2.1.1.min.js',
+  '/../static/js/materialize.js',
+  '/../static/js/custom.js',
+  '/../static/js/dichtbij.js',
+  '/../static/img/achtergrond.jpg'
+];
+
+self.addEventListener('install', function(event) {
+  // Perform install steps
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        console.log('Opened cache');
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+      .then(function(response) {
+        // Cache hit - return response
+        if (response) {
+          return response;
+        }
+
+        // IMPORTANT: Clone the request. A request is a stream and
+        // can only be consumed once. Since we are consuming this
+        // once by cache and once by the browser for fetch, we need
+        // to clone the response.
+        var fetchRequest = event.request.clone();
+
+        return fetch(fetchRequest).then(
+          function(response) {
+            // Check if we received a valid response
+            if(!response || response.status !== 200 || response.type !== 'basic') {
+              return response;
+            }
+
+            // IMPORTANT: Clone the response. A response is a stream
+            // and because we want the browser to consume the response
+            // as well as the cache consuming the response, we need
+            // to clone it so we have two streams.
+            var responseToCache = response.clone();
+
+            caches.open(CACHE_NAME)
+              .then(function(cache) {
+                cache.put(event.request, responseToCache);
+              });
+
+            return response;
+          }
+        );
+      })
+    );
+});
diff --git a/static/manifest.json b/static/manifest.json
@@ -0,0 +1,20 @@
+{
+  "short_name": "Spoor",
+  "name": "Spoor.app",
+  "icons": [
+    {
+      "src": "/../static/img/icons-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/../static/img/icons-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "theme_color": "#009688"
+}
diff --git a/templates/index.html b/templates/index.html
@@ -16,8 +16,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Spoor APP</title>
 
-  <meta name="keywords" content="ovdingen, treinviewer, ns treinen, realtime ov, ov, openbaarvervoer, openbaar vervoer">
+  <meta name="keywords" content="treinviewer, realtime treinen, treinen, realtime, info, vertraging, station">
   <meta name="description" content="Voor al het openbaar vervoer in Nederland">
+  <meta name="theme-color" content="#009688"/>
+  <link rel="manifest" href="static/manifest.json">
 
   <!-- CSS  -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
@@ -209,6 +211,21 @@ <h4>Example requests:</h4>
   <script src="static/js/init.js"></script>
   <script src="static/js/custom.js"></script>
 
+  <!-- Serviceworker-->
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.register('/../static/js/sw.js').then(function(registration) {
+          // Registration was successful
+          console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }, function(err) {
+          // registration failed :(
+          console.log('ServiceWorker registration failed: ', err);
+        });
+      });
+    }
+  </script>
+
 
   <!-- Locatie-->
   <script src="static/js/dichtbij.js"></script>

diff --git a/templates/ovfiets.html b/templates/ovfiets.html
@@ -15,6 +15,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Spoor APP</title>
 
+  <meta name="theme-color" content="#009688"/>
+  <link rel="manifest" href="/../static/manifest.json">
+
   <!-- CSS  -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="/../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
@@ -136,6 +139,21 @@ <h5>Openingstijden</h5>
 
     <script src="/static/js/station.js"></script>
 
+    <!-- Serviceworker-->
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function() {
+          navigator.serviceWorker.register('/../static/js/sw.js').then(function(registration) {
+            // Registration was successful
+            console.log('ServiceWorker registration successful with scope: ', registration.scope);
+          }, function(err) {
+            // registration failed :(
+            console.log('ServiceWorker registration failed: ', err);
+          });
+        });
+      }
+    </script>
+
     <script>
       $(document).ready(function(){
         $('.tabs').tabs();
@@ -144,7 +162,7 @@ <h5>Openingstijden</h5>
       $(document).ready(function(){
         $('.parallax').parallax();
       });
-      </script>
+    </script>
 
     </body>
     <!-- 

diff --git a/templates/station.html b/templates/station.html
@@ -15,6 +15,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Spoor APP</title>
 
+  <meta name="theme-color" content="#009688"/>
+  <link rel="manifest" href="/../static/manifest.json">
+
   <!-- CSS  -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="/../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
@@ -189,6 +192,21 @@ <h4>OV-fiets</h4>
   </script>
   <script src="/static/js/station.js"></script>
 
+  <!-- Serviceworker-->
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.register('/../static/js/sw.js').then(function(registration) {
+          // Registration was successful
+          console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }, function(err) {
+          // registration failed :(
+          console.log('ServiceWorker registration failed: ', err);
+        });
+      });
+    }
+  </script>
+
   <script>
     $(document).ready(function(){
       $('.tabs').tabs();

diff --git a/templates/trein.html b/templates/trein.html
@@ -15,6 +15,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>Spoor APP</title>
 
+  <meta name="theme-color" content="#009688"/>
+  <link rel="manifest" href="/../static/manifest.json">
+
   <!-- CSS  -->
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="/../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
@@ -185,6 +188,21 @@ <h5 class="red-text">LET OP! Trein rijdt niet.</h5>
 
     <script src="/static/js/station.js"></script>
 
+    <!-- Serviceworker-->
+    <script>
+      if ('serviceWorker' in navigator) {
+        window.addEventListener('load', function() {
+          navigator.serviceWorker.register('/../static/js/sw.js').then(function(registration) {
+            // Registration was successful
+            console.log('ServiceWorker registration successful with scope: ', registration.scope);
+          }, function(err) {
+            // registration failed :(
+            console.log('ServiceWorker registration failed: ', err);
+          });
+        });
+      }
+    </script>
+
     <script>
       // $(document).ready(function(){
       //   $('.parallax').parallax();