feat: Making Quartz available offline by making it a PWA (#465)

* Adding PWA and chaching for offline aviability * renamed workbox config to fit Quartz' scheme * Documenting new configuration * Added missig umami documentation * Fixed formatting so the build passes, thank you prettier :) * specified caching strategies to improve performance * formatting... * fixing "404 manifest.json not found" on subdirectories by adding a / to manifestpath * turning it into a plugin * Removed Workbox-cli and updated @types/node * Added Serviceworkercode to offline.ts * formatting * Removing workbox from docs * applied suggestions * Removed path.join for sw path Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Removed path.join for manifest path Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Removing path module import * Added absolute path to manifests start_url and manifest "import" using baseUrl * Adding protocol to baseurl Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * Adding protocol to start_url too then * formatting... * Adding fallback page * Documenting offline plugin * formatting... * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * merge suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * formatting... * Fixing manifest path, all these nits hiding the actual issues .-. * Offline fallback page through plugins, most things taken from 404 Plugin * adding Offline Plugin to config * formatting... * Turned offline off as default and removed offline.md --------- Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
2025-04-30 22:24:14 +00:00 · 2023-09-20 20:38:13 +02:00 · 2023-09-20 20:38:13 +02:00 · d6301fae90
commit d6301fae90
parent 27a6087dd5
13 changed files with 235 additions and 6 deletions
--- a/quartz/plugins/emitters/componentResources.ts
+++ b/quartz/plugins/emitters/componentResources.ts
@ -116,6 +116,11 @@ function addGlobalPageResources(
        document.dispatchEvent(event)`)
  }

+  componentResources.afterDOMLoaded.push(`
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js');
+  }`)
+
  let wsUrl = `ws://localhost:${ctx.argv.wsPort}`

  if (ctx.argv.remoteDevHost) {
--- a/quartz/plugins/emitters/index.ts
+++ b/quartz/plugins/emitters/index.ts
@ -7,3 +7,4 @@ export { Assets } from "./assets"
 export { Static } from "./static"
 export { ComponentResources } from "./componentResources"
 export { NotFoundPage } from "./404"
+export { Offline } from "./offline"
--- a/quartz/plugins/emitters/offline.ts
+++ b/quartz/plugins/emitters/offline.ts
@ -0,0 +1,97 @@
+import { QuartzEmitterPlugin } from "../types"
+import { FilePath, FullSlug } from "../../util/path"
+import { FullPageLayout } from "../../cfg"
+import { sharedPageComponents } from "../../../quartz.layout"
+import OfflineFallbackPage from "../../components/pages/OfflineFallbackPage"
+import BodyConstructor from "../../components/Body"
+import { pageResources, renderPage } from "../../components/renderPage"
+import { defaultProcessedContent } from "../vfile"
+import { QuartzComponentProps } from "../../components/types"
+
+export const Offline: QuartzEmitterPlugin = () => {
+  const opts: FullPageLayout = {
+    ...sharedPageComponents,
+    pageBody: OfflineFallbackPage(),
+    beforeBody: [],
+    left: [],
+    right: [],
+  }
+
+  const { head: Head, pageBody, footer: Footer } = opts
+  const Body = BodyConstructor()
+
+  return {
+    name: "OfflineSupport",
+    getQuartzComponents() {
+      return [Head, Body, pageBody, Footer]
+    },
+    async emit({ cfg }, _content, resources, emit): Promise<FilePath[]> {
+      const manifest = {
+        short_name: cfg.configuration.pageTitle,
+        name: cfg.configuration.pageTitle,
+        description: cfg.configuration.description,
+        background_color: cfg.configuration.theme.colors.lightMode.light,
+        theme_color: cfg.configuration.theme.colors.lightMode.light,
+        display: "minimal-ui",
+        icons: [
+          {
+            src: "static/icon.svg",
+            sizes: "any",
+            purpose: "maskable",
+          },
+          {
+            src: "static/icon.svg",
+            sizes: "any",
+            purpose: "any",
+          },
+        ],
+        start_url:
+          cfg.configuration.baseUrl == undefined ? "/" : `https://${cfg.configuration.baseUrl}/`,
+      }
+
+      const serviceWorker =
+        "importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');" +
+        "const {pageCache, imageCache, staticResourceCache, googleFontsCache, offlineFallback} = workbox.recipes;" +
+        "pageCache(); googleFontsCache(); staticResourceCache(); imageCache(); offlineFallback();"
+
+      const slug = "offline" as FullSlug
+
+      const url = new URL(`https://${cfg.configuration.baseUrl ?? "example.com"}`)
+      const path = url.pathname as FullSlug
+      const externalResources = pageResources(path, resources)
+      const [tree, vfile] = defaultProcessedContent({
+        slug,
+        text: "Offline",
+        description: "This page isn't offline available yet.",
+        frontmatter: { title: "Offline", tags: [] },
+      })
+
+      const componentData: QuartzComponentProps = {
+        fileData: vfile.data,
+        externalResources,
+        cfg: cfg.configuration,
+        children: [],
+        tree,
+        allFiles: [],
+      }
+
+      return Promise.all([
+        emit({
+          content: JSON.stringify(manifest),
+          slug: "manifest" as FullSlug,
+          ext: ".json",
+        }),
+        emit({
+          content: serviceWorker,
+          slug: "sw" as FullSlug,
+          ext: ".js",
+        }),
+        emit({
+          content: renderPage(slug, componentData, opts, externalResources),
+          slug,
+          ext: ".html",
+        }),
+      ])
+    },
+  }
+}