[TASK] Add simple offline service worker

FreifunkVogtland · Mar 11, 2018 · 87eb98f · 87eb98f
1 parent 8e8cdd6
commit 87eb98f
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 2 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -14,3 +14,7 @@ insert_final_newline = true
 [*.{js,html,scss,json,yml,md}]
 indent_size = 2
 indent_style = space
+
+
+[assets/favicon/manifest.json]
+indent_size = 4
diff --git a/assets/favicon/manifest.json b/assets/favicon/manifest.json
@@ -1,5 +1,6 @@
 {
     "name": "Meshviewer",
+    "short_name": "Meshviewer",
     "icons": [
         {
             "src": "./android-chrome-192x192.png",
@@ -14,6 +15,8 @@
     ],
     "theme_color": "#dc0067",
     "background_color": "#dc0067",
+    "start_url": ".",
     "display": "standalone",
     "orientation": "portrait"
-}
+}
+
diff --git a/gulp/tasks/copy.js b/gulp/tasks/copy.js
@@ -2,7 +2,7 @@ module.exports = function (gulp, plugins, config) {
   return function copy() {
     gulp.src(['html/*.html', 'assets/favicon/*'])
       .pipe(gulp.dest(config.build));
-    gulp.src(['assets/logo.svg'])
+    gulp.src(['assets/logo.svg', 'service-worker.js'])
       .pipe(gulp.dest(config.build));
     gulp.src(['node_modules/promise-polyfill/dist/promise.js', 'polyfill.js'])
       .pipe(gulp.dest(config.build + '/vendor'));

diff --git a/html/offline.html b/html/offline.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Freifunk Regensburg e.V. - Meshviewer</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <link rel="stylesheet" href="main.css" inline>
+</head>
+<body>
+<div class="loader">
+  <p>
+    Your are Offline!<br />
+    <img inline src="logo.svg" class="spinner" alt="Loading ..."/>
+    <br />
+    No connection available.
+    <br /><br /><button onclick="location.reload(true)" class="btn text" aria-label="Try to reload">Try to reload</button><br />
+  </p>
+  <noscript>
+    <strong>JavaScript required</strong>
+  </noscript>
+</div>
+</body>
+</html>
diff --git a/polyfill.js b/polyfill.js
@@ -48,3 +48,7 @@ if (typeof Object.assign !== 'function') {
 
   window.CustomEvent = CustomEvent;
 })();
+
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js');
+}
diff --git a/service-worker.js b/service-worker.js
@@ -0,0 +1,23 @@
+self.addEventListener('install', function (event) {
+  var offlineRequest = new Request('offline.html');
+  event.waitUntil(
+    fetch(offlineRequest).then(function (response) {
+      return caches.open('offline').then(function (cache) {
+        return cache.put(offlineRequest, response);
+      });
+    })
+  );
+});
+
+self.addEventListener('fetch', function (event) {
+  var request = event.request;
+  if (request.method === 'GET') {
+    event.respondWith(
+      fetch(request).catch(function () {
+        return caches.open('offline').then(function (cache) {
+          return cache.match('offline.html');
+        });
+      })
+    );
+  }
+});