Cleaned up JS scripts and added service worker

This commit is contained in:
Brandon Rozek 2022-11-22 22:24:06 -05:00
parent 1f1e07b4bf
commit 5214da544e
7 changed files with 125 additions and 16 deletions

12
assets/js/script.js Normal file
View file

@ -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"});
}
});
}

View file

@ -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

13
layouts/offline.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
{{ partial "head.html" . }}
<body>
{{ partial "header.html" . }}
<main>
<div class="main">
<p><a href="{{ .Site.BaseURL }}">Go Home</a></p>
</div>
</main>
{{ partial "footer.html" . }}
</body>
</html>

View file

@ -13,6 +13,7 @@
<meta name="supported-color-schemes" content="light dark" />
<meta name="author" content="{{ .Site.Params.Author }}" />
<meta name="robots" content="index,follow" />
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}{{ .Site.Params.favicon }}">
<!-- Identities -->
@ -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 }}
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
{{- $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 }}
<link rel="stylesheet" href="{{ $cssDark.Permalink }}" media="(prefers-color-scheme: dark)" integrity="{{ $cssDark.Data.Integrity }}">
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> -->
<!-- custom css -->
{{- range .Site.Params.custom_css -}}
@ -60,15 +61,7 @@
<!-- {{- template "_internal/twitter_cards.html" . -}} -->
{{- partial "twitter_cards.html" . -}}
<!-- Polyfill for old browsers -->
{{ `<!--[if lte IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->` | safeHTML }}
{{ `<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->` | safeHTML }}
<script src="https://polyfill.io/v3/polyfill.js"></script>
<!-- MathJax -->
{{- if or .Params.math .Site.Params.math -}}
@ -76,4 +69,7 @@
{{- end -}}
{{ partial "citation.html" . }}
{{- $script := resources.Get "js/script.js" -}}
<script src="{{ $script.Permalink }}" async></script>
</head>

View file

@ -1,4 +1,3 @@
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
MathJax.Hub.Config({
tex2jax: {

View file

@ -10,7 +10,6 @@
{{ $mark := resources.Get "js/jquery.mark.es6.min.js" }}
{{ $lunr := resources.Get "js/lunr.js" }}
{{ $search := resources.Get "js/search.js" }}
<script src="{{ $jquery.Permalink }}"></script>
<script src="{{ $mark.Permalink }}"></script>
<script src="{{ $lunr.Permalink }}"></script>
<script src="{{ $search.Permalink }}"></script>
{{ $lunrPackage := slice $jquery $mark $lunr | resources.Concat "js/lunrPackage.js" | resources.Minify | resources.Fingerprint }}
<script src="{{ $lunrPackage.Permalink }}"></script>
<script src="{{ $search.Permalink }}" async></script>

91
static/serviceworker.js Normal file
View file

@ -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;
});
})
);
});