From 5214da544e32313b075a9cdc442e327899e2d6ef Mon Sep 17 00:00:00 2001 From: Brandon Rozek Date: Tue, 22 Nov 2022 22:24:06 -0500 Subject: [PATCH] Cleaned up JS scripts and added service worker --- assets/js/script.js | 12 ++++ exampleSite/config.toml | 1 - layouts/offline.html | 13 ++++ layouts/partials/head.html | 16 ++--- layouts/partials/mathjax_support.html | 1 - layouts/partials/search.html | 7 +-- static/serviceworker.js | 91 +++++++++++++++++++++++++++ 7 files changed, 125 insertions(+), 16 deletions(-) create mode 100644 assets/js/script.js create mode 100644 layouts/offline.html create mode 100644 static/serviceworker.js diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..3aeaec6 --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,12 @@ +if (navigator && navigator.serviceWorker) { + navigator.serviceWorker.register('/serviceworker.js', { + scope: '/' + }); + + window.addEventListener("load", function() { + if (navigator.serviceWorker.controller != null) { + navigator.serviceWorker.controller.postMessage({"command":"trimCache"}); + } + }); +} + diff --git a/exampleSite/config.toml b/exampleSite/config.toml index eb18e5b..220cba3 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -22,7 +22,6 @@ hasCJKLanguage = true publicationYear = "2019" # listPageDateFormat = "January, 2006" # See https://gohugo.io/functions/format/ # singlePageDateFormat = "January 2, 2006" - # custom_css = ["/css/custom.css"] # custom_js = ["/js/custom.js"] # Make sure setting a following option for search bar to work diff --git a/layouts/offline.html b/layouts/offline.html new file mode 100644 index 0000000..dcf2575 --- /dev/null +++ b/layouts/offline.html @@ -0,0 +1,13 @@ + + + {{ partial "head.html" . }} + + {{ partial "header.html" . }} +
+
+

Go Home

+
+
+ {{ partial "footer.html" . }} + + diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 1dddee1..42c5353 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -13,6 +13,7 @@ + @@ -43,11 +44,11 @@ {{- $syntaxHighlight := resources.Get "css/syntax-highlight.css" -}} {{ $css := slice $style $markdown $fontawesome $syntaxHighlight | resources.Concat "css/style.css" | resources.Minify | resources.Fingerprint }} + {{- $styleDark := resources.Get "css/style-dark.css" -}} {{- $markdownDark := resources.Get "css/markdown-dark.css" -}} {{ $cssDark := slice $styleDark $markdownDark | resources.Concat "css/style-dark.css" | resources.Minify | resources.Fingerprint }} - {{- range .Site.Params.custom_css -}} @@ -60,15 +61,7 @@ {{- partial "twitter_cards.html" . -}} - - {{ `` | safeHTML }} - - {{ `` | safeHTML }} + {{- if or .Params.math .Site.Params.math -}} @@ -76,4 +69,7 @@ {{- end -}} {{ partial "citation.html" . }} + + {{- $script := resources.Get "js/script.js" -}} + diff --git a/layouts/partials/mathjax_support.html b/layouts/partials/mathjax_support.html index cae9723..e3429b4 100644 --- a/layouts/partials/mathjax_support.html +++ b/layouts/partials/mathjax_support.html @@ -1,4 +1,3 @@ - - - - \ No newline at end of file + {{ $lunrPackage := slice $jquery $mark $lunr | resources.Concat "js/lunrPackage.js" | resources.Minify | resources.Fingerprint }} + + diff --git a/static/serviceworker.js b/static/serviceworker.js new file mode 100644 index 0000000..36ba221 --- /dev/null +++ b/static/serviceworker.js @@ -0,0 +1,91 @@ +let version = 'v1::'; +let cacheName = 'website'; +let offlinePage = '/offline'; +let offlineFundamentals = [offlinePage, '/']; +let maxItems = 100; + +self.addEventListener('install', function (event) { + // Cache offline fundamentals + event.waitUntil(caches.open(version + cacheName).then(function (cache) { + return cache.addAll(offlineFundamentals); + })); +}); + +function trimCache(name, maxItems) { + caches.open(name).then(function(cache) { + cache.keys().then(function(keys) { + if (keys.length > maxItems) { + cache.delete(keys[0]).then(trimCache(name, maxItems)); + } + }); + }); +} + +// Listens for trimCache command which occurs on page load +self.addEventListener('message', event => { + if (event.data.command == 'trimCache') { + trimCache(version + cacheName, maxItems); + } + }); + + +// If the version changes, invalidate the cache +self.addEventListener('activate', function (event) { + event.waitUntil( + caches.keys() + .then(function (keys) { + // Remove caches whose name is no longer valid + return Promise.all(keys + .filter(function (key) { + return key.indexOf(version) !== 0; + }) + .map(function (key) { + return caches.delete(key); + }) + ); + }) + ); +}); + +// Listen for request events +self.addEventListener('fetch', function (event) { + let request = event.request; + + // Always fetch non-GET requests from the network + if (request.method !== 'GET') { + event.respondWith( + fetch(request) + .catch(function () { + return caches.match(offlinePage); + }) + ); + return; + } + + let isRequestType = function(name) { return request.headers.get('Accept').includes(name); } + + // Network-first Approach + event.respondWith( + // Attepmt to grab the latest copy from the network + fetch(request).then(function (response) { + // If successful, create a copy of the response + // and save it to the cache + let cacheCopy = response.clone(); + event.waitUntil(caches.open(version + cacheName).then(function (cache) { + return cache.put(request, cacheCopy); + })); + return response; + + }).catch(function (error) { + // Otherwise, check the cache. + return caches.match(request).then(function (response) { + // Show offline page if cache misses for HTML pages. + if (isRequestType('text/html')) { + return response || caches.match(offlinePage); + } + return response; + + }); + }) + ); +}); \ No newline at end of file