@cocreate/pwa 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.21.0](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.20.0...v1.21.0) (2024-12-14)
+
+
+### Features
+
+* dynamic theme handling ([c2688f2](https://github.com/CoCreate-app/CoCreate-pwa/commit/c2688f2f148f0c68e3693cf932a24976658eb475))
+
 # [1.20.0](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.19.4...v1.20.0) (2024-11-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/pwa",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "A simple pwa component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "pwa",

package/src/index.js

@@ -22,10 +22,10 @@
  * For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
  */
 
-import observer from '@cocreate/observer'
-import localStorage from '@cocreate/local-storage'
-import './web-share'
-
+import observer from "@cocreate/observer";
+import localStorage from "@cocreate/local-storage";
+import "./web-share";
+// import "./theme";
 
 /**
  * Warn the page must be served over HTTPS
@@ -41,104 +41,114 @@ import './web-share'
 // }
 
 function init() {
-    const button = document.querySelector('[actions*="install"]');
-
-    window.addEventListener('beforeinstallprompt', (event) => {
-        window.deferredPrompt = event;
-        if (button)
-            button.removeAttribute('hidden');
-    });
-
-    if (button) {
-        button.addEventListener('click', async () => {
-            // console.log('👍', 'installBtn-clicked');
-            const promptEvent = window.deferredPrompt;
-            if (!promptEvent) {
-                // The deferred prompt isn't available.
-                return;
-            }
-            // Show the install prompt.
-            promptEvent.prompt();
-            // Log the result
-            const result = await promptEvent.userChoice;
-            console.log('👍', 'userChoice', result);
-            // Reset the deferred prompt variable, since
-            // prompt() can only be called once.
-            window.deferredPrompt = null;
-            // Hide the install button.
-            button.setAttribute('hidden', '');
-        });
-    }
-
-    window.addEventListener('appinstalled', (event) => {
-        // console.log('👍', 'appinstalled', event);
-        // Clear the deferredPrompt so it can be garbage collected
-        window.deferredPrompt = null;
-    });
-
-    if ('serviceWorker' in navigator) {
-        let workerPath
-        if (window.CoCreateConfig && window.CoCreateConfig.serviceWorker)
-            workerPath = window.CoCreateConfig.serviceWorker
-        else
-            workerPath = localStorage.getItem("serviceWorker") || '/service-worker.js'
-
-        localStorage.setItem("serviceWorker", workerPath);
-
-        let cache
-        if (window.CoCreateConfig && window.CoCreateConfig.cache)
-            cache = window.CoCreateConfig.cache
-        else
-            cache = localStorage.getItem("cache") || 'true'
-
-        localStorage.setItem("cache", cache);
-        workerPath += `?cache=${cache}`
-
-        let isPwa = true
-        if (workerPath) {
-            navigator.serviceWorker.getRegistrations().then(registrations => {
-                if (registrations.length === 0 || isPwa == true)
-                    window.addEventListener("load", function () {
-                        navigator.serviceWorker.getRegistration(workerPath).then(registration => {
-                            if (registration && registration.active && registration.active.scriptURL.includes(workerPath)) {
-                                console.log('Service Worker Active')
-                            } else {
-                                navigator.serviceWorker.register(workerPath)
-                                    .then(reg => {
-                                        reg.onupdatefound = () => {
-                                            const installingWorker = reg.installing;
-                                            installingWorker.onstatechange = () => {
-                                                // console.log('Service Worker', installingWorker.state);
-                                            }
-                                        }
-                                    })
-                                    .catch(err => console.log('SW ERROR', err));
-                            }
-                        });
-                    });
-            });
-
-        }
-    }
+	const button = document.querySelector('[actions*="install"]');
+
+	window.addEventListener("beforeinstallprompt", (event) => {
+		window.deferredPrompt = event;
+		if (button) button.removeAttribute("hidden");
+	});
+
+	if (button) {
+		button.addEventListener("click", async () => {
+			// console.log('👍', 'installBtn-clicked');
+			const promptEvent = window.deferredPrompt;
+			if (!promptEvent) {
+				// The deferred prompt isn't available.
+				return;
+			}
+			// Show the install prompt.
+			promptEvent.prompt();
+			// Log the result
+			const result = await promptEvent.userChoice;
+			console.log("👍", "userChoice", result);
+			// Reset the deferred prompt variable, since
+			// prompt() can only be called once.
+			window.deferredPrompt = null;
+			// Hide the install button.
+			button.setAttribute("hidden", "");
+		});
+	}
+
+	window.addEventListener("appinstalled", (event) => {
+		// console.log('👍', 'appinstalled', event);
+		// Clear the deferredPrompt so it can be garbage collected
+		window.deferredPrompt = null;
+	});
+
+	if ("serviceWorker" in navigator) {
+		let workerPath;
+		if (window.CoCreateConfig && window.CoCreateConfig.serviceWorker)
+			workerPath = window.CoCreateConfig.serviceWorker;
+		else
+			workerPath =
+				localStorage.getItem("serviceWorker") || "/service-worker.js";
+
+		localStorage.setItem("serviceWorker", workerPath);
+
+		let cache;
+		if (window.CoCreateConfig && window.CoCreateConfig.cache)
+			cache = window.CoCreateConfig.cache;
+		else cache = localStorage.getItem("cache") || "true";
+
+		localStorage.setItem("cache", cache);
+		workerPath += `?cache=${cache}`;
+
+		let isPwa = true;
+		if (workerPath) {
+			navigator.serviceWorker.getRegistrations().then((registrations) => {
+				if (registrations.length === 0 || isPwa == true)
+					window.addEventListener("load", function () {
+						navigator.serviceWorker
+							.getRegistration(workerPath)
+							.then((registration) => {
+								if (
+									registration &&
+									registration.active &&
+									registration.active.scriptURL.includes(
+										workerPath
+									)
+								) {
+									console.log("Service Worker Active");
+								} else {
+									navigator.serviceWorker
+										.register(workerPath)
+										.then((reg) => {
+											reg.onupdatefound = () => {
+												const installingWorker =
+													reg.installing;
+												installingWorker.onstatechange =
+													() => {
+														// console.log('Service Worker', installingWorker.state);
+													};
+											};
+										})
+										.catch((err) =>
+											console.log("SW ERROR", err)
+										);
+								}
+							});
+					});
+			});
+		}
+	}
 }
 
-init()
+init();
 
 async function persistData() {
-    if (navigator.storage && navigator.storage.persist) {
-        const result = await navigator.storage.persist();
-        //   console.log(`Data persisted: ${result}`);
-    }
+	if (navigator.storage && navigator.storage.persist) {
+		const result = await navigator.storage.persist();
+		//   console.log(`Data persisted: ${result}`);
+	}
 }
 
 observer.init({
-    name: 'initPwa',
-    observe: ['addedNodes'],
-    selector: '[actions="install"]',
-    callback: (mutation) => {
-        init()
-    }
+	name: "initPwa",
+	observe: ["addedNodes"],
+	selector: '[actions="install"]',
+	callback: (mutation) => {
+		init();
+	}
 });
 
-
-export default { persistData }
+export default { persistData };

package/src/theme.js

@@ -0,0 +1,57 @@
+function applyThemeAttributes() {
+	// Detect the current theme (light or dark)
+	const isDarkMode = window.matchMedia(
+		"(prefers-color-scheme: dark)"
+	).matches;
+
+	// Select all elements with light or dark attributes
+	const elements = document.querySelectorAll("[light], [dark]");
+
+	elements.forEach((element) => {
+		// Determine the attribute to use based on the theme
+		const themeAttr = isDarkMode ? "dark" : "light";
+		const themeValue = element.getAttribute(themeAttr);
+
+		// Determine the current value of the attribute to update
+		let attributeToUpdate;
+		if (element.tagName === "LINK" && element.rel === "manifest") {
+			attributeToUpdate = "href";
+		} else if (
+			element.tagName === "META" &&
+			element.name === "theme-color"
+		) {
+			attributeToUpdate = "content";
+		}
+
+		if (attributeToUpdate && themeValue) {
+			const currentValue = element.getAttribute(attributeToUpdate);
+
+			// Update only if the current value does not match the new value
+			if (currentValue !== themeValue) {
+				if (element.tagName === "LINK" && element.rel === "manifest") {
+					// Handle manifest link replacement
+					const newElement = element.cloneNode(); // Clone the element
+					newElement.setAttribute(attributeToUpdate, themeValue); // Update href
+
+					// Replace the old link with the new one to force fetch
+					element.parentNode.replaceChild(newElement, element);
+					console.log(`Manifest updated: ${themeValue}`);
+				} else {
+					// For other elements like meta, update the attribute directly
+					element.setAttribute(attributeToUpdate, themeValue);
+					if (element.tagName === "META") {
+						console.log(`Theme color updated: ${themeValue}`);
+					}
+				}
+			}
+		}
+	});
+}
+
+// Apply theme attributes on page load
+applyThemeAttributes();
+
+// Listen for changes in the user's theme preference
+window
+	.matchMedia("(prefers-color-scheme: dark)")
+	.addEventListener("change", applyThemeAttributes);