Experimental PWA support (#13)

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');

lib/Travelynx/Controller/Static.pm

@@ -23,4 +23,10 @@ sub imprint {
 	$self->render('imprint');
 }
 
+sub offline {
+	my ($self) = @_;
+
+	$self->render('offline');
+}
+
 1;

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');
+              });
+        })
+  );
+});

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"
+}

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>

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>