qurantathbit 1.0.2 → 1.0.3

package/index.html

@@ -92,7 +92,8 @@ body {
 		</style>
 		<link id="-gd-engine-icon" rel="icon" type="image/png" href="index.icon.png" />
 <link rel="apple-touch-icon" href="index.apple-touch-icon.png"/>
-
+<link rel="manifest" href="index.manifest.json">
+<style>body{background-color:#faf5ed}#status::before{content:'QuranTathbit';display:block;font:700 30px/1.25 system-ui,sans-serif;color:#14513d;margin-bottom:14px}#status::after{content:'the first visit downloads the app, then it is cached';display:block;font:400 13px/1.5 system-ui,sans-serif;color:#5c6b62;margin-top:18px}#status-progress{-webkit-appearance:none;appearance:none;border:0;height:10px;width:min(60vw,420px);border-radius:99px;overflow:hidden;background:#e6dfce}#status-progress::-webkit-progress-bar{background:#e6dfce;border-radius:99px}#status-progress::-webkit-progress-value{background:#1e6b52;border-radius:99px;transition:width .25s ease-out}#status-progress::-moz-progress-bar{background:#1e6b52;border-radius:99px}</style><script>(function(){if(typeof window.fetch!=='function'||typeof DecompressionStream==='undefined'){return}var nativeFetch=window.fetch.bind(window);function wasmUrl(u){var i=u.indexOf('index.wasm');if(i===-1){return false}var before=(i===0)?'':u.charAt(i-1);var after=u.charAt(i+10);return(before===''||before==='/')&&(after===''||after==='?'||after==='#')}window.fetch=function(input,init){var url=(typeof input==='string')?input:((input&&typeof input.url==='string')?input.url:'');if(!wasmUrl(url)){return nativeFetch(input,init)}return nativeFetch(url.replace('index.wasm','index.wasm.gz'),{credentials:'same-origin'}).then(function(resp){if(!resp.ok){throw new Error('gz missing')}var enc=(resp.headers.get('content-encoding')||'').toLowerCase();if(enc.indexOf('gzip')!==-1){return resp}return new Response(resp.body.pipeThrough(new DecompressionStream('gzip')),{status:200,headers:{'content-type':'application/wasm'}})}).catch(function(){return nativeFetch(input,init)})}})();</script>
 	</head>
 	<body>
 		<canvas id="canvas">
@@ -111,7 +112,7 @@ body {
 
 		<script src="index.js"></script>
 		<script>
-const GODOT_CONFIG = {"args":[],"canvasResizePolicy":2,"emscriptenPoolSize":8,"ensureCrossOriginIsolationHeaders":true,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":979112,"index.wasm":39514754},"focusCanvas":true,"gdextensionLibs":[],"godotPoolSize":4};
+const GODOT_CONFIG = {"args":[],"canvasResizePolicy":2,"emscriptenPoolSize":8,"ensureCrossOriginIsolationHeaders":true,"executable":"index","experimentalVK":false,"fileSizes":{"index.pck":983384,"index.wasm":39514754},"focusCanvas":true,"gdextensionLibs":[],"godotPoolSize":4,"serviceWorker":"index.service.worker.js"};
 const GODOT_THREADS_ENABLED = false;
 const engine = new Engine(GODOT_CONFIG);
 

package/index.manifest.json

@@ -0,0 +1 @@
+{"background_color":"#faf5ed","theme_color":"#14513d","display":"standalone","icons":[{"sizes":"144x144","src":"index.144x144.png","type":"image/png"},{"sizes":"180x180","src":"index.180x180.png","type":"image/png"},{"sizes":"512x512","src":"index.512x512.png","type":"image/png"}],"name":"QuranTathbit","orientation":"any","start_url":"./index.html"}

package/index.offline.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>You are offline</title>
+		<style>
+html {
+	background-color: #000000;
+	color: #ffffff;
+}
+
+body {
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	margin: 2rem;
+}
+
+p {
+	margin-block: 1rem;
+}
+
+button {
+	display: block;
+	padding: 1rem 2rem;
+	margin: 3rem auto 0;
+}
+		</style>
+	</head>
+	<body>
+		<h1>You are offline</h1>
+		<p>This application requires an Internet connection to run for the first time.</p>
+		<p>Press the button below to try reloading:</p>
+		<button type="button">Reload</button>
+		<script>
+document.querySelector('button').addEventListener('click', () => {
+	window.location.reload();
+});
+		</script>
+	</body>
+</html>

package/index.service.worker.js

@@ -0,0 +1,166 @@
+// This service worker is required to expose an exported Godot project as a
+// Progressive Web App. It provides an offline fallback page telling the user
+// that they need an Internet connection to run the project if desired.
+// Incrementing CACHE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+/** @type {string} */
+const CACHE_VERSION = '1792101335|2440927';
+/** @type {string} */
+const CACHE_PREFIX = 'QuranTathbit-sw-cache-';
+const CACHE_NAME = CACHE_PREFIX + CACHE_VERSION;
+/** @type {string} */
+const OFFLINE_URL = 'index.offline.html';
+/** @type {boolean} */
+const ENSURE_CROSSORIGIN_ISOLATION_HEADERS = true;
+// Files that will be cached on load.
+/** @type {string[]} */
+const CACHED_FILES = ["index.html","index.js","index.offline.html","index.icon.png","index.apple-touch-icon.png","index.audio.worklet.js","index.audio.position.worklet.js"];
+// Files that we might not want the user to preload, and will only be cached on first load.
+/** @type {string[]} */
+const CACHEABLE_FILES = ["index.wasm","index.pck"];
+const FULL_CACHE = CACHED_FILES.concat(CACHEABLE_FILES);
+
+self.addEventListener('install', (event) => {
+	event.waitUntil(caches.open(CACHE_NAME).then((cache) => cache.addAll(CACHED_FILES)));
+});
+
+self.addEventListener('activate', (event) => {
+	event.waitUntil(caches.keys().then(
+		function (keys) {
+			// Remove old caches.
+			return Promise.all(keys.filter((key) => key.startsWith(CACHE_PREFIX) && key !== CACHE_NAME).map((key) => caches.delete(key)));
+		}
+	).then(function () {
+		// Enable navigation preload if available.
+		return ('navigationPreload' in self.registration) ? self.registration.navigationPreload.enable() : Promise.resolve();
+	}));
+});
+
+/**
+ * Ensures that the response has the correct COEP/COOP headers
+ * @param {Response} response
+ * @returns {Response}
+ */
+function ensureCrossOriginIsolationHeaders(response) {
+	if (response.headers.get('Cross-Origin-Embedder-Policy') === 'require-corp'
+		&& response.headers.get('Cross-Origin-Opener-Policy') === 'same-origin') {
+		return response;
+	}
+
+	const crossOriginIsolatedHeaders = new Headers(response.headers);
+	crossOriginIsolatedHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
+	crossOriginIsolatedHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
+	const newResponse = new Response(response.body, {
+		status: response.status,
+		statusText: response.statusText,
+		headers: crossOriginIsolatedHeaders,
+	});
+
+	return newResponse;
+}
+
+/**
+ * Calls fetch and cache the result if it is cacheable
+ * @param {FetchEvent} event
+ * @param {Cache} cache
+ * @param {boolean} isCacheable
+ * @returns {Response}
+ */
+async function fetchAndCache(event, cache, isCacheable) {
+	// Use the preloaded response, if it's there
+	/** @type { Response } */
+	let response = await event.preloadResponse;
+	if (response == null) {
+		// Or, go over network.
+		response = await self.fetch(event.request);
+	}
+
+	if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+		response = ensureCrossOriginIsolationHeaders(response);
+	}
+
+	if (isCacheable) {
+		// And update the cache
+		cache.put(event.request, response.clone());
+	}
+
+	return response;
+}
+
+self.addEventListener(
+	'fetch',
+	/**
+	 * Triggered on fetch
+	 * @param {FetchEvent} event
+	 */
+	(event) => {
+		const isNavigate = event.request.mode === 'navigate';
+		const url = event.request.url || '';
+		const referrer = event.request.referrer || '';
+		const base = referrer.slice(0, referrer.lastIndexOf('/') + 1);
+		const local = url.startsWith(base) ? url.replace(base, '') : '';
+		const isCacheable = FULL_CACHE.some((v) => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
+		if (isNavigate || isCacheable) {
+			event.respondWith((async () => {
+				// Try to use cache first
+				const cache = await caches.open(CACHE_NAME);
+				if (isNavigate) {
+					// Check if we have full cache during HTML page request.
+					/** @type {Response[]} */
+					const fullCache = await Promise.all(FULL_CACHE.map((name) => cache.match(name)));
+					const missing = fullCache.some((v) => v === undefined);
+					if (missing) {
+						try {
+							// Try network if some cached file is missing (so we can display offline page in case).
+							const response = await fetchAndCache(event, cache, isCacheable);
+							return response;
+						} catch (e) {
+							// And return the hopefully always cached offline page in case of network failure.
+							console.error('Network error: ', e); // eslint-disable-line no-console
+							return caches.match(OFFLINE_URL);
+						}
+					}
+				}
+				let cached = await cache.match(event.request);
+				if (cached != null) {
+					if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+						cached = ensureCrossOriginIsolationHeaders(cached);
+					}
+					return cached;
+				}
+				// Try network if don't have it in cache.
+				const response = await fetchAndCache(event, cache, isCacheable);
+				return response;
+			})());
+		} else if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
+			event.respondWith((async () => {
+				let response = await fetch(event.request);
+				response = ensureCrossOriginIsolationHeaders(response);
+				return response;
+			})());
+		}
+	}
+);
+
+self.addEventListener('message', (event) => {
+	// No cross origin
+	if (event.origin !== self.origin) {
+		return;
+	}
+	const id = event.source.id || '';
+	const msg = event.data || '';
+	// Ensure it's one of our clients.
+	self.clients.get(id).then(function (client) {
+		if (!client) {
+			return; // Not a valid client.
+		}
+		if (msg === 'claim') {
+			self.skipWaiting().then(() => self.clients.claim());
+		} else if (msg === 'clear') {
+			caches.delete(CACHE_NAME);
+		} else if (msg === 'update') {
+			self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then((all) => all.forEach((c) => c.navigate(c.url)));
+		}
+	});
+});
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qurantathbit",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A quiet companion for keeping the Qur'an close — one deck, one card at a time, with your own GitHub as the cloud. Web build served from any static host or `npx qurantathbit`.",
   "license": "MIT",
   "repository": {
@@ -33,6 +33,12 @@
     "index.png",
     "index.audio.worklet.js",
     "index.audio.position.worklet.js",
+    "index.manifest.json",
+    "index.service.worker.js",
+    "index.offline.html",
+    "index.144x144.png",
+    "index.180x180.png",
+    "index.512x512.png",
     "decks/",
     "README.npm.md",
     "LICENSE"