add service worker

6 files changed, 63 insertions, 11 deletions

diff --git a/README.md b/README.md
index 5f0b973..05f8b30 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ Some of the basic features of Piercer are:
 * Great SEO by default.
 * Mobile-first philosophy.
 * PostCSS can be used if desired.
+* Service Workers for caching resources.
 * Fast.
 
 Some of the things that are not planned to add for the moment are:
diff --git a/assets/js/header.js b/assets/js/header.js
deleted file mode 100644
index 12de881..0000000
--- a/assets/js/header.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const header = document.querySelector("header");
-
-function paddingHeader() {
-    document.body.style.paddingTop = `${header.offsetHeight}px`;
-}
-
-window.addEventListener("load", paddingHeader);
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..8549696
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,15 @@
+// Header
+const header = document.querySelector('header');
+
+window.addEventListener("load", () => {
+    document.body.style.paddingTop = `${header.offsetHeight}px`;
+});
+
+// Service Worker
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.min.js', { scope: '/' }).then((registration) => {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope);
+    }, (err) => {
+        console.log('ServiceWorker registration failed: ', err);
+    });
+}
\ No newline at end of file
diff --git a/assets/sw.js b/assets/sw.js
new file mode 100644
index 0000000..e40529f
--- /dev/null
+++ b/assets/sw.js
@@ -0,0 +1,42 @@
+let cacheVersion = 'v1';
+let urlsToCache = [
+    '/images/',
+    '/css/bundle.min.css',
+    '/js/main.min.js',
+];
+
+self.addEventListener('install', (e) => {
+    e.waitUntil(
+        caches.open('v1').then(function (c) {
+            return c.addAll(urlsToCache);
+        })
+    );
+});
+
+self.addEventListener('fetch', (e) => {
+    e.respondWith(
+        caches.match(e.request)
+            .then((response) => {
+                if (response) {
+                    return response;
+                }
+
+                let fetchRequest = e.request.clone();
+                return fetch(fetchRequest).then(
+                    (response) => {
+                        if (!response || response.status !== 200 || response.type !== 'basic') {
+                            return response;
+                        }
+
+                        let responseToCache = response.clone();
+                        caches.open(cacheVersion)
+                            .then((cache) => {
+                                cache.put(e.request, responseToCache);
+                            });
+
+                        return response;
+                    }
+                );
+            })
+    );
+});
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 5d55511..fcd29c6 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,5 +1,6 @@
-{{ $header := resources.Get "js/header.js" }}
-{{ $bundle := slice $header | resources.Concat "js/bundle.js" }}
-{{ $js := $bundle | resources.Minify | resources.Fingerprint }}
+{{ $main := resources.Get "js/main.js" }}
+{{ $js := slice $main | resources.Concat "js/bundle.js" | resources.Minify }}
+{{ $sw := resources.Get "/sw.js" | resources.Minify }}
 
+<script defer src="{{ $sw.Permalink }}"></script>
 <script defer src="{{ $js.Permalink }}"></script>
\ No newline at end of file
diff --git a/layouts/partials/styles-hugo.html b/layouts/partials/styles-hugo.html
index 05aa29b..d39c3fd 100644
--- a/layouts/partials/styles-hugo.html
+++ b/layouts/partials/styles-hugo.html
@@ -7,6 +7,6 @@
 {{ $medias := resources.Get "css/media-queries.css" }}
 {{ $bundle := slice $reset $base $common $style $single $list $medias | resources.Concat "css/bundle.css" }}
 
-{{ $css := $bundle | resources.Minify | resources.Fingerprint "sha512" }}
+{{ $css := $bundle | resources.Minify }}
 
 <link rel="stylesheet" href="{{ $css.Permalink }}">
\ No newline at end of file