Adding asset cachin for lua scripts and lexicon zip

wiktionary_pron/index.html

@@ -21,7 +21,7 @@
               rel="stylesheet">
     </noscript>
 
-    <script defer src="scripts/wasmoon.js" type="text/javascript"></script>
+    <script src="scripts/wasmoon.js"></script>
     <script defer src="scripts/main.js" type="module"></script>
 
 
@@ -37,13 +37,13 @@
           name="description">
 
 
+    <script src="scripts/localforage.min.js"></script>
 
     <link href="https://fonts.googleapis.com" rel="preconnect"/>
     <link crossorigin href="https://fonts.gstatic.com" rel="preconnect"/>
     <link rel="apple-touch-icon" sizes="180x180" href="icons/transcriber/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="icons/transcriber/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="icons/transcriber/favicon-16x16.png">
-    <link rel="manifest" href="icons/transcriber/site.webmanifest">
 
     <link href="css/style.css" rel="stylesheet" type="text/css">
 

wiktionary_pron/scripts/lexicon.js

@@ -1,19 +1,19 @@
-import { loadFileFromZip } from "./utils.js";
+import { loadFileFromZipOrPath, fetchWithCache } from "./utils.js";
 
 async function loadLexicon(language) {
   const languages = {
     German: "german_lexicon.zip",
   };
   const lexiconFolder = "./utils/";
-  const wordPairsList = await loadFileFromZip(
-    lexiconFolder + languages[language],
-    "de_lexicon.json",
-  );
+
+  const zipBlob = await fetchWithCache(lexiconFolder + languages[language]);
+
+  const wordPairsList = await loadFileFromZipOrPath(zipBlob, "de_lexicon.json");
+
+  const worker = new Worker("scripts/lexicon_loader_worker.js");
 
   function process_lexicon(text) {
     return new Promise((resolve) => {
-      const worker = new Worker("scripts/lexicon_loader_worker.js");
-
       worker.onmessage = function (e) {
         resolve(e.data);
       };
@@ -23,6 +23,7 @@ async function loadLexicon(language) {
   }
 
   const lexicon = await process_lexicon(wordPairsList);
+  worker.terminate();
   return lexicon;
 }
 

wiktionary_pron/scripts/lua_init.js

@@ -1,8 +1,11 @@
+import { fetchWithCache } from "./utils.js";
+
 const factory = await lb.factory;
 const lua = await factory.createEngine();
 
 // Set a JS function to be a global lua function
-lua.global.set("fetch", (url) => fetch(url));
+
+lua.global.set("fetch", (url) => fetchWithCache(url));
 
 async function mountFile(file_path, lua_path) {
   const content = await fetch(file_path).then((data) => data.text());
@@ -44,7 +47,8 @@ await lua.doString(`
               --local resp = fetch(string.format('https://cdn.statically.io/gh/hellpanderrr/hellpanderrr.github.io/master/wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
               --local resp = fetch(string.format('https://cdn.jsdelivr.net/gh/hellpanderrr/[email protected]/wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
               updateLoadingText(path, extension)
-              local resp = fetch(string.format('https://cdn.jsdelivr.net/gh/hellpanderrr/[email protected]/wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
+              --local resp = fetch(string.format('https://cdn.jsdelivr.net/gh/hellpanderrr/[email protected]/wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
+              local resp = fetch(string.format('https://cdn.statically.io/gh/hellpanderrr/hellpanderrr.github.io/master/wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
               
               --local resp = fetch(string.format('../wiktionary_pron/lua_modules/%s.%s',path,extension) ):await()
               updateLoadingText("", "")

wiktionary_pron/scripts/utils.js

@@ -218,33 +218,69 @@ function createElementFromHTML(htmlString) {
   return div.firstChild;
 }
 
-const loadedScripts = {};
-
-async function loadFileFromZip(zipPath, filename) {
+async function loadFileFromZipOrPath(zipPathOrBlob, filename) {
   return new Promise((resolve, reject) => {
     loadJs("./scripts/jszip.min.js", async () => {
       await loadJs("./scripts/jszip-utils.min.js", async () => {
-        JSZipUtils.getBinaryContent(zipPath, function (err, data) {
-          if (err) {
-            reject(err);
-          } else {
-            resolve(data);
-          }
-        });
+        let data;
+        if (!(typeof zipPathOrBlob === "string")) {
+          console.log("blob", zipPathOrBlob);
+          data = await zipPathOrBlob.blob();
+        } else {
+          console.log("path", zipPathOrBlob);
+          const response = await fetchWithCache(zipPathOrBlob);
+          data = await response.blob();
+        }
+        JSZip.loadAsync(data)
+          .then(async (zip) => {
+            const fileData = await zip.file(filename).async("string");
+            resolve(fileData);
+          })
+          .catch((error) => {
+            console.error(error);
+            reject(error); // or handle the error as needed
+          });
       });
     });
-  })
-    .then(async (data) => {
-      const zip = await JSZip.loadAsync(data);
-      const fileData = await zip.file(filename).async("string");
-      return fileData;
-    })
-    .catch((error) => {
-      console.error(error);
-      return null; // or handle the error as needed
-    });
+  });
+}
+
+async function fetchWithCache(url) {
+  console.log("reading cache", url);
+  const cachedResponse = await localforage.getItem(url);
+  if (cachedResponse) {
+    console.log("reading from cache", url);
+    if (cachedResponse instanceof Blob) {
+      const response = new Response(cachedResponse);
+      response.headers.set("X-From-Cache", "true");
+      console.log("Returned cached blob ", url);
+      return response;
+    }
+    const response = new Response(JSON.parse(cachedResponse));
+    response.headers.set("X-From-Cache", "true");
+    console.log("Returned cached string ", url);
+    return response;
+  }
+  console.log("caching ", url);
+  const response = await fetch(url);
+
+  const contentType = response.headers.get("content-type");
+  let responseContent;
+  let responseWithHeaders;
+
+  if (contentType == "application/zip") {
+    const responseContent = await response.blob();
+    await localforage.setItem(url, responseContent);
+  } else {
+    responseContent = await response.text();
+    await localforage.setItem(url, JSON.stringify(responseContent));
+  }
+  responseWithHeaders = new Response(responseContent, response);
+  return responseWithHeaders;
 }
 
+const loadedScripts = {};
+
 async function loadJs(url, code) {
   console.log(loadedScripts);
   if (loadedScripts[url]) {
@@ -280,6 +316,7 @@ export {
   get_ipa_no_cache,
   memoizeLocalStorage,
   loadJs,
-  loadFileFromZip,
+  loadFileFromZipOrPath,
   createElementFromHTML,
+  fetchWithCache,
 };