Add simple service worker and manifest file

Author: daviddarnes

_includes/site-sw.html

@@ -0,0 +1,20 @@
+<script type="text/javascript">
+(() => {
+  const registerServiceWorker = () => {
+    if (!navigator.serviceWorker) {
+      return;
+    }
+
+    navigator.serviceWorker
+      .register("{{ "/sw.js" | relative_url }}")
+      .then(registration => {
+        console.log("Service Worker: registered");
+      })
+      .catch(err => {
+        console.log("Service Worker: registration failed ", err);
+      });
+  };
+
+  registerServiceWorker();
+})();
+</script>

_layouts/default.html

@@ -20,6 +20,12 @@
 			{% seo %}
 		{% endif %}
 
+		{% if site.serviceWorker != false %}
+			<!-- Startup configuration -->
+			<link rel="manifest" href="{{ "/manifest.json" | relative_url }}">
+			<meta name="theme-color" content="#ffffff"/>
+		{% endif %}
+
     <link rel="stylesheet" href="{{ "/assets/styles.css" | relative_url }}">
 
 		{% if site.avatarurl %}{% include site-favicons.html %}{% endif %}
@@ -29,5 +35,6 @@
 
 		{{ content }}
 
+		{% if site.serviceWorker != false %}{% include site-sw.html %}{% endif %}
 	</body>
 </html>

manifest.json

@@ -0,0 +1,17 @@
+---
+---
+{
+  "lang": "{{ site.lang }}",
+  "name": "{{ site.title }}",
+  "short_name": "{{ site.title | replace: ' ', '' }}",
+  "theme_color": "black",
+  "background_color": "white",
+  "icons": [
+    {
+      "src": "{{ site.logo }}",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "display": "browser"
+}

sw.js

@@ -0,0 +1,86 @@
+---
+---
+const version = '{{ site.time | date: '%Y%m%d%H%M%S' }}';
+const cacheName = `static::${version}`;
+
+const buildContentBlob = () => {
+  return [
+    {%- for post in site.posts limit: 10 -%}
+      "{{ post.url }}",
+    {%- endfor -%}
+    {%- for page in site.pages -%}
+      {%- unless page.url contains 'sw.js' -%}
+        "{{ page.url }}",
+      {%- endunless -%}
+    {%- endfor -%}
+      "/assets/logo.svg","/assets/styles.css"
+  ]
+}
+
+const updateStaticCache = () => {
+  return caches.open(cacheName).then(cache => {
+    return cache.addAll(buildContentBlob());
+  });
+};
+
+const clearOldCache = () => {
+  return caches.keys().then(keys => {
+    // Remove caches whose name is no longer valid.
+    return Promise.all(
+      keys
+        .filter(key => {
+          return key !== cacheName;
+        })
+        .map(key => {
+          console.log(`Service Worker: removing cache ${key}`);
+          return caches.delete(key);
+        })
+    );
+  });
+};
+
+self.addEventListener("install", event => {
+  event.waitUntil(
+    updateStaticCache().then(() => {
+      console.log(`Service Worker: cache updated to version: ${cacheName}`);
+    })
+  );
+});
+
+self.addEventListener("activate", event => {
+  event.waitUntil(clearOldCache());
+});
+
+self.addEventListener("fetch", event => {
+  let request = event.request;
+  let url = new URL(request.url);
+
+  // Only deal with requests from the same domain.
+  if (url.origin !== location.origin) {
+    return;
+  }
+
+  // Always fetch non-GET requests from the network.
+  if (request.method !== "GET") {
+    event.respondWith(fetch(request));
+    return;
+  }
+
+  // For HTML requests, try the network first else fall back to the offline page.
+  if (request.headers.get("Accept").indexOf("text/html") !== -1) {
+    event.respondWith(fetch(request).catch(() => caches.match(event.request)));
+    return;
+  }
+
+  // For non-HTML requests, look in the cache first else fall back to the network.
+  event.respondWith(
+    caches.match(request).then(response => {
+      if (response) {
+        console.log("Serving cached: ", event.request.url);
+        return response;
+      }
+      console.log("Fetching: ", event.request.url);
+      return fetch(request);
+    })
+  );
+});