diff --git a/README.md b/README.md index bf511e4..7c4bf28 100644 --- a/README.md +++ b/README.md @@ -4,3 +4,4 @@ - [Gitea Create Repo API: Curl POST](/gitea-create-repo-api-curl-post.md) - [Mount LUKS drive to Windows Subsystem for Linux Bare](/mount-luks-drive-to-windwos-subsystem-for-linux-bare.md) - [Convert .mkv to .mp4 with FFMPEG at higher quality](/convert-mkv-to-mp4-with-ffmpeg-at-higher-quality.md) +- [GOHUGO PWA](/gohugo-pwa.md) diff --git a/gohugo-pwa.md b/gohugo-pwa.md new file mode 100644 index 0000000..1738e27 --- /dev/null +++ b/gohugo-pwa.md @@ -0,0 +1,252 @@ +# GOHUGO PWA SETUP + +## layouts/partials/custom_head.html + +```html + + + + + + + +``` + +## layouts/partials/custom_body.html + +```html + +``` + + + +## static/main.js + +```javascript +if ('serviceWorker' in navigator) { + window.addEventListener('load', () => { + navigator.serviceWorker.register('/sw.js') + .then(req => { + console.log('Registered!', reg); + }).catch(err => { + console.log('Registration failed: ', err); + }); + }); +} +``` + +## static/manifest.webmanifest + +```json +{ + "name": "Pat K", + "short_name": "PK", + "start_url": "/", + "scope": "/", + "background_color": "#000000", + "theme_color": "#2e1e3c", + "display": "standalone", + "id": "5801e2e4fab6956ac349d7c724329b869cbffb19e87e545cd5bf6ffb2cc4a3e7", + "icons": [ + { + "src": "icons/192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "icons/512.png", + "type": "image/png", + "sizes": "512x512" + } + ] +} +``` + +## static/icons + +```bash +ffmpeg -i example.png -vf "scale=192:192" icon-192.png +ffmpeg -i example.png -vf "scale=512:512" icon-512.png +``` + +## hugo.toml + +```toml +[outputs] + home = ["HTML", "SW"] + +[outputFormats.SW] + mediaType = "text/javascript" + baseName = "sw" + isPlainText = true + notAlternative = true +``` + +## themes/hugo-bearblog/layouts/index.sw.js + +```javascript +const CACHE_NAME = "patk-{{ now.Unix }}"; + +const PRECACHE = [ + "/index.html", + "/manifest.webmanifest", + "/main.js", + "/robots.txt", + "/icons/192.png", + "/icons/512.png", + "/404.html", + "/sitemap.xml", + {{- range hugo.Sites }} + {{- range .Pages }} + {{ printf "%q" .RelPermalink }}, + {{- end }} + {{- end }} +]; + +self.addEventListener("install", (event) => { + event.waitUntil( + caches.open(CACHE_NAME).then((cache) => { + return cache.addAll(PRECACHE); + }) + ); + +// self.skipWaiting(); // remove if want to changes to occur without pressing reload button +}); + +self.addEventListener("activate", (event) => { + event.waitUntil( + caches.keys().then((keys) => { + return Promise.all( + keys + .filter((key) => key !== CACHE_NAME) + .map((key) => caches.delete(key)) + ); + }) + ); + + self.clients.claim(); +}); + +self.addEventListener("fetch", (event) => { + event.respondWith( + caches.match(event.request).then((cachedResponse) => { + return cachedResponse || fetch(event.request); +// return fetch(event.request) || cachedResponse; // switch if you want to fetch resources first and serve cached if offline; current serve cache then request online fetch if error or not available + }) + ); +}); + +self.addEventListener("message", (event) => { + if (event.data?.type === "SKIP_WAITING") { + self.skipWaiting(); + } +}); +``` + +## Makefile + +- Make file requires tabs not space indentation + +```makefile +.PHONY: help cl gen serve pub dev + +help: + @echo "Usage: make