Updates

qwinsi · Jul 2, 2024 · 8c10b4d · 8c10b4d
1 parent 2135ac6
commit 8c10b4d
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -2,16 +2,24 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="manifest" href="/tex2typst-webapp/manifest.json">
     <link rel="icon" href="/tex2typst-webapp/favicon.ico">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" crossorigin="anonymous">
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" crossorigin="anonymous"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>tex2typst Web App - Convert LaTex formula code to Typst</title>
 
     <script type="module" crossorigin src="/tex2typst-webapp/assets/index-0xgDFlGd.js"></script>
     <link rel="stylesheet" crossorigin href="/tex2typst-webapp/assets/index-iEzId2gj.css">
   </head>
   <body>
     <div id="app"></div>
+    <script>
+      if (!navigator.serviceWorker.controller) {
+          navigator.serviceWorker.register("/tex2typst-webapp/sw.js").then(function(reg) {
+              console.log("Service worker has been registered for scope: " + reg.scope);
+          });
+      }
+     </script>
   </body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,17 @@
+{
+    "name": "tex2typst Web App",
+    "short_name": "tex2typst",
+    "theme_color": "#ffcbe4",
+    "background_color": "#eeeeee",
+    "display": "standalone",
+    "scope": "/tex2typst-webapp/",
+    "start_url": "https://qwinsi.github.io/tex2typst-webapp/index.html",
+    "description": "Covert LaTeX math formula code to Typst code!",
+    "orientation": "any",
+    "icons": [
+        {
+            "src": "https://qwinsi.github.io/tex2typst-webapp/favicon.ico",
+            "sizes": "32x32"
+        }
+    ]
+}
diff --git a/offline.html b/offline.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="manifest" href="/tex2typst-webapp/manifest.json">
+    <link rel="icon" href="/tex2typst-webapp/favicon.ico">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" crossorigin="anonymous">
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" crossorigin="anonymous"></script>
+    <title>tex2typst Web App - Convert LaTex formula code to Typst</title>
+
+    <script type="module" crossorigin src="/tex2typst-webapp/assets/index-0xgDFlGd.js"></script>
+    <link rel="stylesheet" crossorigin href="/tex2typst-webapp/assets/index-iEzId2gj.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      if (!navigator.serviceWorker.controller) {
+          navigator.serviceWorker.register("/tex2typst-webapp/sw.js").then(function(reg) {
+              console.log("Service worker has been registered for scope: " + reg.scope);
+          });
+      }
+     </script>
+  </body>
+</html>
diff --git a/sw.js b/sw.js
@@ -0,0 +1,55 @@
+// Adapted from https://blog.heroku.com/how-to-make-progressive-web-app
+
+const SUBDIRECTORY = "/tex2typst-webapp";
+
+self.addEventListener("install", function(event) {
+    event.waitUntil(preLoad());
+  });
+
+  var preLoad = function(){
+    console.log("Installing web app");
+    return caches.open("offline").then(function(cache) {
+      console.log("caching index and important routes");
+      return cache.addAll([SUBDIRECTORY + "/", SUBDIRECTORY + "/assets", SUBDIRECTORY + "/offline.html"]);
+    });
+  };
+
+  self.addEventListener("fetch", function(event) {
+    event.respondWith(checkResponse(event.request).catch(function() {
+      return returnFromCache(event.request);
+    }));
+    event.waitUntil(addToCache(event.request));
+  });
+
+  var checkResponse = function(request){
+    return new Promise(function(fulfill, reject) {
+      fetch(request).then(function(response){
+        if(response.status !== 404) {
+          fulfill(response);
+        } else {
+          reject();
+        }
+      }, reject);
+    });
+  };
+
+  var addToCache = function(request){
+    return caches.open("offline").then(function (cache) {
+      return fetch(request).then(function (response) {
+        console.log(response.url + " was cached");
+        return cache.put(request, response);
+      });
+    });
+  };
+
+  var returnFromCache = function(request){
+    return caches.open("offline").then(function (cache) {
+      return cache.match(request).then(function (matching) {
+       if(!matching || matching.status == 404) {
+         return cache.match("offline.html");
+       } else {
+         return matching;
+       }
+      });
+    });
+  };