From df2301f496ce0bd81bc8967fb27d49f7c76fe948 Mon Sep 17 00:00:00 2001
From: Christine Dodrill <me@christine.website>
Date: Sat, 20 Oct 2018 13:17:13 -0700
Subject: [PATCH] static: support offline page service worker

---
 static/js/pwabuilder-sw.js | 55 ++++++++++++++++++++++++++++++++++++++
 static/manifest.json       | 24 +++++++++++------
 templates/base.html        | 11 ++++++++
 3 files changed, 82 insertions(+), 8 deletions(-)
 create mode 100755 static/js/pwabuilder-sw.js

diff --git a/static/js/pwabuilder-sw.js b/static/js/pwabuilder-sw.js
new file mode 100755
index 0000000..4b3b1e2
--- /dev/null
+++ b/static/js/pwabuilder-sw.js
@@ -0,0 +1,55 @@
+//This is the service worker with the combined offline experience (Offline page + Offline copy of pages)
+
+//Install stage sets up the offline page in the cache and opens a new cache
+self.addEventListener('install', function(event) {
+  event.waitUntil(preLoad());
+});
+
+var preLoad = function(){
+  console.log('[PWA Builder] Install Event processing');
+  return caches.open('pwabuilder-offline').then(function(cache) {
+    console.log('[PWA Builder] Cached index and offline page during Install');
+    return cache.addAll(['/offline.html', '/index.html']);
+  });
+}
+
+self.addEventListener('fetch', function(event) {
+  console.log('[PWA Builder] The service worker is serving the asset.');
+  event.respondWith(checkResponse(event.request).catch(function() {
+    return returnFromCache(event.request)}
+  ));
+  event.waitUntil(addToCache(event.request));
+});
+
+var checkResponse = function(request){
+  return new Promise(function(fulfill, reject) {
+    fetch(request).then(function(response){
+      if(response.status !== 404) {
+        fulfill(response)
+      } else {
+        reject()
+      }
+    }, reject)
+  });
+};
+
+var addToCache = function(request){
+  return caches.open('pwabuilder-offline').then(function (cache) {
+    return fetch(request).then(function (response) {
+      console.log('[PWA Builder] add page to offline'+response.url)
+      return cache.put(request, response);
+    });
+  });
+};
+
+var returnFromCache = function(request){
+  return caches.open('pwabuilder-offline').then(function (cache) {
+    return cache.match(request).then(function (matching) {
+     if(!matching || matching.status == 404) {
+       return cache.match('offline.html')
+     } else {
+       return matching
+     }
+    });
+  });
+};
diff --git a/static/manifest.json b/static/manifest.json
index 3fee2f5..8136ce9 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -1,9 +1,17 @@
 {
-  "name": "Christine Dodrill",
-  "short_name": "Christine",
-  "theme_color": "#ffcbe4",
-  "background_color": "#fa99ca",
-  "display": "standalone",
-  "scope": "/",
-  "start_url": "/"
-}
+    "name": "Christine Dodrill",
+    "short_name": "Christine",
+    "theme_color": "#ffcbe4",
+    "background_color": "#fa99ca",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "https://christine.website/",
+    "description": "Blog and Resume for Christine Dodrill",
+    "orientation": "any",
+    "icons": [
+        {
+            "src": "https://christine.website/static/img/avatar.png",
+            "sizes": "1024x1024"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 52a98fc..4bdea31 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -62,6 +62,17 @@
             <footer>
                 <blockquote>Copyright 2018 Christine Dodrill. Any and all opinions listed here are my own and not representative of my employer.</blockquote>
             </footer>
+            <script>
+             if (navigator.serviceWorker.controller) {
+                 console.log("Active service worker found, no need to register");
+             } else {
+                 navigator.serviceWorker.register("/static/js/pwabuilder-sw.js", {
+                     scope: "https://christine.website/"
+                 }).then(function(reg) {
+                     console.log("Service worker has been registered for scope:" + reg.scope);
+                 });
+             }
+            </script>
         </div>
     </body>
 </html>