feat: offline support with service worker caching (#141)

glzr-io · Dec 11, 2024 · 0af5dc3 · 0af5dc3
1 parent 556a83a
commit 0af5dc3
Show file tree

Hide file tree

Showing 31 changed files with 1,242 additions and 125 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/boilerplate-react-buildless/example.zebar.json b/examples/boilerplate-react-buildless/example.zebar.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://github.com/glzr-io/zebar/raw/v2.4.0/resources/widget-schema.json",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.7.0/resources/widget-schema.json",
   "htmlPath": "./index.html",
   "zOrder": "normal",
   "shownInTaskbar": false,

diff --git a/examples/boilerplate-react-buildless/index.html b/examples/boilerplate-react-buildless/index.html
@@ -4,15 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- Base styles for better consistency across platforms (aka. CSS reset). -->
-    <link rel="stylesheet" type="text/css" href="../normalize.css" />
-
     <!-- Custom styles. -->
     <link rel="stylesheet" type="text/css" href="./styles.css" />
 
-    <!-- Add empty favicon to suppress not found errors. -->
-    <link rel="icon" href="data:;" />
-
     <!-- Allows React to be run buildless via "text/babel" script below. -->
     <script
       src="https://unpkg.com/@babel/[email protected]/babel.min.js"
@@ -52,7 +46,7 @@
         return (
           <div className="app">
             {output.audio?.defaultPlaybackDevice && (
-              <div class="chip">
+              <div className="chip">
                 {output.audio.defaultPlaybackDevice.name}-
                 {output.audio.defaultPlaybackDevice.volume}
                 <input
@@ -67,7 +61,7 @@
                 />
               </div>
             )}
-            <div class="chip">
+            <div className="chip">
               Media: {output.media?.currentSession?.title}-
               {output.media?.currentSession?.artist}
               <button onClick={() => output.media?.togglePlayPause()}>

diff --git a/examples/boilerplate-solid-ts/example.zebar.json b/examples/boilerplate-solid-ts/example.zebar.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://github.com/glzr-io/zebar/raw/v2.4.0/resources/widget-schema.json",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.7.0/resources/widget-schema.json",
   "htmlPath": "./dist/index.html",
   "zOrder": "normal",
   "shownInTaskbar": false,

diff --git a/examples/boilerplate-solid-ts/index.html b/examples/boilerplate-solid-ts/index.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <title>Zebar</title>
-    <link rel="stylesheet" type="text/css" href="../normalize.css" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/examples/starter/vanilla.html b/examples/starter/vanilla.html
@@ -4,15 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- Base styles for better consistency across platforms (aka. CSS reset). -->
-    <link rel="stylesheet" type="text/css" href="../normalize.css" />
-
     <!-- Custom styles. -->
     <link rel="stylesheet" type="text/css" href="./styles.css" />
 
-    <!-- Add empty favicon to suppress not found errors. -->
-    <link rel="icon" href="data:;" />
-
     <!-- Allows React to be run buildless via "text/babel" script below. -->
     <script
       src="https://unpkg.com/@babel/[email protected]/babel.min.js"

diff --git a/examples/starter/vanilla.zebar.json b/examples/starter/vanilla.zebar.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://github.com/glzr-io/zebar/raw/v2.4.0/resources/widget-schema.json",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.7.0/resources/widget-schema.json",
   "htmlPath": "./vanilla.html",
   "zOrder": "normal",
   "shownInTaskbar": false,

diff --git a/examples/starter/with-glazewm.html b/examples/starter/with-glazewm.html
@@ -4,15 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- Base styles for better consistency across platforms (aka. CSS reset). -->
-    <link rel="stylesheet" type="text/css" href="../normalize.css" />
-
     <!-- Custom styles. -->
     <link rel="stylesheet" type="text/css" href="./styles.css" />
 
-    <!-- Add empty favicon to suppress not found errors. -->
-    <link rel="icon" href="data:;" />
-
     <!-- Allows React to be run buildless via "text/babel" script below. -->
     <script
       src="https://unpkg.com/@babel/[email protected]/babel.min.js"

diff --git a/examples/starter/with-glazewm.zebar.json b/examples/starter/with-glazewm.zebar.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://github.com/glzr-io/zebar/raw/v2.4.0/resources/widget-schema.json",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.7.0/resources/widget-schema.json",
   "htmlPath": "./with-glazewm.html",
   "zOrder": "normal",
   "shownInTaskbar": false,

diff --git a/examples/starter/with-komorebi.html b/examples/starter/with-komorebi.html
@@ -4,15 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <!-- Base styles for better consistency across platforms (aka. CSS reset). -->
-    <link rel="stylesheet" type="text/css" href="../normalize.css" />
-
     <!-- Custom styles. -->
     <link rel="stylesheet" type="text/css" href="./styles.css" />
 
-    <!-- Add empty favicon to suppress not found errors. -->
-    <link rel="icon" href="data:;" />
-
     <!-- Allows React to be run buildless via "text/babel" script below. -->
     <script
       src="https://unpkg.com/@babel/[email protected]/babel.min.js"

diff --git a/examples/starter/with-komorebi.zebar.json b/examples/starter/with-komorebi.zebar.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://github.com/glzr-io/zebar/raw/v2.4.0/resources/widget-schema.json",
+  "$schema": "https://github.com/glzr-io/zebar/raw/v2.7.0/resources/widget-schema.json",
   "htmlPath": "./with-komorebi.html",
   "zOrder": "normal",
   "shownInTaskbar": false,

diff --git a/packages/client-api/src/config/index.ts b/packages/client-api/src/config/index.ts
@@ -1,5 +1,6 @@
 export * from './monitor-selection';
 export * from './dock-config';
+export * from './widget-caching';
 export * from './widget-config';
 export * from './widget-placement';
 export * from './widget-preset';
diff --git a/packages/client-api/src/config/widget-caching.ts b/packages/client-api/src/config/widget-caching.ts
@@ -0,0 +1,9 @@
+export type WidgetCaching = {
+  defaultDuration: number;
+  rules: WidgetCachingRule[];
+};
+
+export type WidgetCachingRule = {
+  urlRegex: string;
+  duration: number;
+};
diff --git a/packages/client-api/src/config/widget-config.ts b/packages/client-api/src/config/widget-config.ts
@@ -1,3 +1,4 @@
+import type { WidgetCaching } from './widget-caching';
 import type { WidgetPreset } from './widget-preset';
 
 export type WidgetConfig = {
@@ -7,5 +8,6 @@ export type WidgetConfig = {
   focused: boolean;
   resizable: boolean;
   transparent: boolean;
+  caching: WidgetCaching;
   presets: WidgetPreset[];
 };
diff --git a/packages/desktop/Cargo.toml b/packages/desktop/Cargo.toml
@@ -18,7 +18,14 @@ async-trait = "0.1"
 base64 = "0.22"
 clap = { version = "4", features = ["derive"] }
 crossbeam = "0.8"
+netdev = "0.24"
+regex = "1"
 reqwest = { version = "0.11", features = ["json"] }
+rocket = { version = "0.5", features = ["json"] }
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+starship-battery = "0.8"
+sysinfo = "0.30"
 tauri = { version = "2.0", features = [
   "devtools",
   "macos-private-api",
@@ -29,15 +36,10 @@ tauri-plugin-dialog = "2.0"
 tauri-plugin-http = "2.0"
 tauri-plugin-shell = "2.0"
 tauri-plugin-single-instance = "2.0"
-serde = { version = "1", features = ["derive"] }
-serde_json = "1"
-starship-battery = "0.8"
-sysinfo = "0.30"
 tokio = { version = "1.33", features = ["full"] }
 tracing = "0.1"
 tracing-subscriber = { version = "0.3", features = ["env-filter"] }
-netdev = "0.24"
-regex = "1"
+uuid = { version = "1", features = ["v4"] }
 
 [target.'cfg(target_os = "windows")'.dependencies]
 komorebi-client = { git = "https://github.com/LGUG2Z/komorebi", tag = "v0.1.28" }

diff --git a/packages/desktop/capabilities/widget.json b/packages/desktop/capabilities/widget.json
@@ -4,7 +4,11 @@
   "description": "Widget capabilities",
   "windows": ["widget-*"],
   "remote": {
-    "urls": ["http://asset.localhost", "asset://localhost"]
+    "urls": [
+      "http://asset.localhost",
+      "asset://localhost",
+      "http://127.0.0.1:6124"
+    ]
   },
   "permissions": [
     "core:app:default",

diff --git a/packages/desktop/resources/initialization-script.js b/packages/desktop/resources/initialization-script.js
@@ -0,0 +1,67 @@
+if (window.location.host === '127.0.0.1:6124') {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+      .register('/__zebar/sw.js', { scope: '/' })
+      .then(sw => {
+        console.log('[Zebar] Service Worker registered.');
+
+        const message = {
+          type: 'SET_CONFIG',
+          config: window.__ZEBAR_STATE.config.caching,
+        };
+
+        sw.active?.postMessage(message);
+        sw.installing?.postMessage(message);
+        sw.waiting?.postMessage(message);
+      })
+      .catch(err =>
+        console.error('[Zebar] Service Worker failed to register:', err),
+      );
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    addFavicon();
+    loadCss('/__zebar/normalize.css');
+  });
+}
+
+/**
+ * Adds a CSS file with the given path to the head element.
+ */
+function loadCss(path) {
+  const link = document.createElement('link');
+  link.setAttribute('data-zebar', '');
+  link.rel = 'stylesheet';
+  link.type = 'text/css';
+  link.href = path;
+  insertIntoHead(link);
+}
+
+/**
+ * Adds a favicon to the head element if one is not already present.
+ */
+function addFavicon() {
+  if (!document.querySelector('link[rel="icon"]')) {
+    const link = document.createElement('link');
+    link.setAttribute('data-zebar', '');
+    link.rel = 'icon';
+    link.href = 'data:;';
+    insertIntoHead(link);
+  }
+}
+
+/**
+ * Inserts the element before any other resource tags in the head element.
+ * Ensures that user-defined stylesheets or favicons are prioritized over
+ * Zebar's defaults.
+ */
+function insertIntoHead(element) {
+  const resources = document.head.querySelectorAll('link, script, style');
+  const target = resources[0]?.previousElementSibling;
+
+  if (target) {
+    target.after(element);
+  } else {
+    document.head.appendChild(element);
+  }
+}
diff --git a/examples/normalize.css → packages/desktop/resources/normalize.css b/examples/normalize.css → packages/desktop/resources/normalize.css