Experimental PWA support (#13)

12 files changed, 111 insertions, 0 deletions

diff --git a/lib/Travelynx.pm b/lib/Travelynx.pm
index 7829d2a..48fb22b 100755
--- a/lib/Travelynx.pm
+++ b/lib/Travelynx.pm
@@ -1723,6 +1723,7 @@ sub startup {
 	$r->get('/changelog')->to('static#changelog');
 	$r->get('/impressum')->to('static#imprint');
 	$r->get('/imprint')->to('static#imprint');
+	$r->get('/offline')->to('static#offline');
 	$r->get('/api/v0/:user_action/:token')->to('api#get_v0');
 	$r->get('/api/v1/:user_action/:token')->to('api#get_v1');
 	$r->get('/login')->to('account#login_form');
diff --git a/lib/Travelynx/Controller/Static.pm b/lib/Travelynx/Controller/Static.pm
index e0d56f2..2c35f1b 100644
--- a/lib/Travelynx/Controller/Static.pm
+++ b/lib/Travelynx/Controller/Static.pm
@@ -23,4 +23,10 @@ sub imprint {
 	$self->render('imprint');
 }
 
+sub offline {
+	my ($self) = @_;
+
+	$self->render('offline');
+}
+
 1;
diff --git a/public/service-worker.js b/public/service-worker.js
new file mode 100644
index 0000000..2b5c556
--- /dev/null
+++ b/public/service-worker.js
@@ -0,0 +1,47 @@
+const CACHE_NAME = 'static-cache-v10';
+const FILES_TO_CACHE = [
+  '/offline.html',
+  '/static/v10/css/materialize.min.css',
+  '/static/v10/css/material-icons.css',
+  '/static/v10/css/local.css',
+  '/static/v10/js/jquery-2.2.4.min.js',
+  '/static/v10/js/materialize.min.js',
+  '/static/v10/js/travelynx-actions.min.js',
+];
+
+self.addEventListener('install', (evt) => {
+  evt.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(FILES_TO_CACHE);
+    })
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (evt) => {
+  evt.waitUntil(
+    caches.keys().then((keyList) => {
+      return Promise.all(keyList.map((key) => {
+        if (key !== CACHE_NAME) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+  self.clients.claim();
+});
+
+self.addEventListener('fetch', (evt) => {
+  if (evt.request.mode !== 'navigate') {
+    return;
+  }
+  evt.respondWith(
+    fetch(evt.request)
+        .catch(() => {
+          return caches.open(CACHE_NAME)
+              .then((cache) => {
+                return cache.match('offline.html');
+              });
+        })
+  );
+});
diff --git a/public/static/icons/icon-128x128.png b/public/static/icons/icon-128x128.png
new file mode 100644
index 0000000..2dfa5b4
--- /dev/null
+++ b/public/static/icons/icon-128x128.png
diff --git a/public/static/icons/icon-144x144.png b/public/static/icons/icon-144x144.png
new file mode 100644
index 0000000..151e555
--- /dev/null
+++ b/public/static/icons/icon-144x144.png
diff --git a/public/static/icons/icon-152x152.png b/public/static/icons/icon-152x152.png
new file mode 100644
index 0000000..a5a034d
--- /dev/null
+++ b/public/static/icons/icon-152x152.png
diff --git a/public/static/icons/icon-192x192.png b/public/static/icons/icon-192x192.png
new file mode 100644
index 0000000..a00418e
--- /dev/null
+++ b/public/static/icons/icon-192x192.png
diff --git a/public/static/icons/icon-256x256.png b/public/static/icons/icon-256x256.png
new file mode 100644
index 0000000..e9493a3
--- /dev/null
+++ b/public/static/icons/icon-256x256.png
diff --git a/public/static/icons/icon-512x512.png b/public/static/icons/icon-512x512.png
new file mode 100644
index 0000000..074e828
--- /dev/null
+++ b/public/static/icons/icon-512x512.png
diff --git a/public/static/manifest.json b/public/static/manifest.json
new file mode 100644
index 0000000..7e856f2
--- /dev/null
+++ b/public/static/manifest.json
@@ -0,0 +1,34 @@
+{
+  "name": "travelynx",
+  "short_name": "travelynx",
+  "scope": "/",
+  "icons": [{
+    "src": "/static/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    }, {
+      "src": "/static/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    }, {
+      "src": "/static/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    }, {
+      "src": "/static/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }, {
+      "src": "/static/icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    }, {
+      "src": "/static/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }],
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#673ab7"
+}
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index a43d9f1..4877488 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -5,6 +5,7 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="theme-color" content="#673ab7">
+	<link rel="manifest" href="/static/manifest.json">
 	% my $av = 'v10'; # asset version
 	%= stylesheet "/static/${av}/css/materialize.min.css"
 	%= stylesheet "/static/${av}/css/material-icons.css"
@@ -55,5 +56,16 @@
 	%= content
 </div>
 
+<script>
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/service-worker.js')
+        .then((reg) => {
+          console.log('Service worker registered.', reg);
+        });
+  });
+}
+</script>
+
 </body>
 </html>
diff --git a/templates/offline.html.ep b/templates/offline.html.ep
new file mode 100644
index 0000000..85faff0
--- /dev/null
+++ b/templates/offline.html.ep
@@ -0,0 +1,11 @@
+<div class="row">
+	<div class="col s12 center-align">
+		<i class="material-icons large">sync_problem</i>
+	</div>
+</div>
+<div class="row">
+	<div class="col s12 center-align">
+		Server nicht erreichbar.<br/>
+		travelynx funktioniert nur mit Internetverbindung.
+	</div>
+</div>