Add a Service Worker and an offline page

_includes/head.html

@@ -3,7 +3,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   {%- seo -%}
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
   {%- feed_meta -%}
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}

_layouts/default.html

@@ -15,6 +15,15 @@
 
     {%- include footer.html -%}
 
+<script type="text/javascript">
+   if ("serviceWorker" in navigator) {
+     navigator.serviceWorker.register("/sw.js").then(function(registration) {
+       console.log('Success!');
+     }).catch(function(error) {
+       console.log('Failure!', error);
+     })
+ }
+</script>
   </body>
 
 </html>

offline.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+<style type="text/css" media="screen">
+  .container {
+    margin: 10px auto;
+    max-width: 600px;
+    text-align: center;
+  }
+  h1 {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
+</style>
+
+<div class="container">
+  <h1>Oops!</h1>
+
+  <p>It looks like you're offline.</p>
+</div>

sw.js

@@ -0,0 +1,61 @@
+---
+layout: null
+---
+'use strict';
+
+const version = 'v1';
+const staticCacheName = "version-{{site.time | date: '%Y%m%d%H%M%S'}}";
+
+addEventListener('install', installEvent => {
+     console.log('The service worker is installing...');
+     skipWaiting();
+     installEvent.waitUntil(
+       caches.open(staticCacheName)
+       .then( staticCache => {
+         return staticCache.addAll([
+           '/assets/css/style.css',
+           '/assets/minima-social-icons.svg',
+           '/about/index.html',
+           '/404.html',
+           'offline.html'
+         ]);
+       })
+     );
+   });
+
+addEventListener('activate', activateEvent => {
+     console.log('The service worker is activated. Deleting old caches...');
+     activateEvent.waitUntil(
+       caches.keys()
+       .then( cacheNames => {
+         return Promise.all(
+           cacheNames.map( cacheName => {
+             if (cacheName != staticCacheName) {
+               return caches.delete(cacheName);
+             }
+           })
+       );
+     })
+     .then( () => {
+       return clients.claim();
+     })
+   );
+});
+
+
+addEventListener('fetch', fetchEvent => {
+     console.log('The service worker is listening.');
+     const request = fetchEvent.request;
+     fetchEvent.respondWith(
+       caches.match(request)
+       .then ( responseFromCache => {
+         if (responseFromCache) {
+           return responseFromCache;
+         }
+         return fetch(request)
+         .catch( error => {
+           return caches.match('/offline.html');
+         });
+      })
+    );
+});