2.4k ★

PWA & Offline

✎ Improve this page

JekyllLMS is a installable Progressive Web App out of the box.

What’s Included

  • manifest.json (root, Liquid-processed) — name, theme color, and icon, generated from _config.yml’s title/description so you only edit one place.
  • sw.js (root) — a minimal service worker: network-first for every request, only falling back to the cache when the network request fails (i.e. offline). This means normal reloads always get the latest deploy — no stale CSS/JS, no hard refresh needed — while still giving the PWA an offline fallback when there’s no connection. It’s registered from _layouts/default.html, guarded by a 'serviceWorker' in navigator check so it’s a no-op on unsupported browsers. If you ever need to force every installed client to drop its old cache (e.g. after a big asset restructure), bump the CACHE version string at the top of sw.js — the activate handler deletes any cache that doesn’t match the current name.
  • assets/logo.svg — the flask mark used as favicon, apple-touch-icon, and the manifest’s icon.

Icons

The manifest ships a single SVG icon (purpose: "any maskable"), which modern Chrome and Android install prompts render correctly. iOS Safari’s apple-touch-icon does not support SVG — it’ll fall back to a screenshot of the page until you add a real PNG. This environment had no image-rasterizer available, so PNGs weren’t generated automatically. If you have ImageMagick or rsvg-convert installed locally, generate them with:

# 180×180 apple-touch-icon, 192/512 for manifest PNG fallbacks
rsvg-convert -w 180 -h 180 assets/logo.svg -o assets/apple-touch-icon.png
rsvg-convert -w 192 -h 192 assets/logo.svg -o assets/icon-192.png
rsvg-convert -w 512 -h 512 assets/logo.svg -o assets/icon-512.png

Then add <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png"> to _includes/head.html and the two extra sizes to manifest.json’s icons array.

Disabling

To ship without PWA behavior, remove the service-worker registration <script> block from _layouts/default.html and delete manifest.json / sw.js / the <link rel="manifest"> tag in _includes/head.html.