update manifest and add service worker

app/classes/web/static_handler.py

@@ -11,6 +11,9 @@ except ModuleNotFoundError as e:
 
 class CustomStaticHandler(tornado.web.StaticFileHandler):
     def validate_absolute_path(self, root: str, absolute_path: str) -> Optional[str]:
+        # This is for the mobile app service worker
+        if self.request.path.find("service-worker.js") != -1:
+            self.set_header("Service-Worker-Allowed", "/")
         try:
             return super().validate_absolute_path(root, absolute_path)
         except tornado.web.HTTPError as error:

app/frontend/static/assets/crafty.webmanifest

@@ -0,0 +1,37 @@
+{
+  "background_color": "#222436",
+  "description": "Crafty Controller is a free and open-source Minecraft launcher and manager that allows users to start and administer Minecraft servers from a user-friendly interface.",
+  "dir": "ltr",
+  "display": "standalone",
+  "name": "Crafty Controller",
+  "orientation": "any",
+  "scope": "/",
+  "short_name": "Crafty",
+  "start_url": "/",
+  "theme_color": "#964df7",
+  "categories": ["utilities"],
+  "screenshots": [],
+  "icons": [
+    {
+      "src": "/static/assets/images/Crafty_4-0.png",
+      "type": "image/png",
+      "sizes": "144x144"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Crafty Controller 4",
+      "short_name": "Crafty",
+      "description": "Minecraft server manager",
+      "url": "/panel/dashboard",
+      "icons": [
+        {
+          "src": "/static/assets/images/Crafty_4-0.png",
+          "sizes": "144x144"
+        }
+      ]
+    }
+  ],
+  "lang": "en",
+  "prefer_related_applications": false
+}

app/frontend/static/assets/js/service-worker.js

@@ -0,0 +1,47 @@
+// This is the "Offline page" service worker
+
+importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
+
+const CACHE = "pwabuilder-page";
+
+// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
+const offlineFallbackPage = "ToDo-replace-this-name.html";
+
+self.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('install', async (event) => {
+  event.waitUntil(
+    caches.open(CACHE)
+      .then((cache) => cache.add(offlineFallbackPage))
+  );
+});
+
+if (workbox.navigationPreload.isSupported()) {
+  workbox.navigationPreload.enable();
+}
+
+self.addEventListener('fetch', (event) => {
+  if (event.request.mode === 'navigate') {
+    event.respondWith((async () => {
+      try {
+        const preloadResp = await event.preloadResponse;
+
+        if (preloadResp) {
+          return preloadResp;
+        }
+
+        const networkResp = await fetch(event.request);
+        return networkResp;
+      } catch (error) {
+
+        const cache = await caches.open(CACHE);
+        const cachedResp = await cache.match(offlineFallbackPage);
+        return cachedResp;
+      }
+    })());
+  }
+});

app/frontend/templates/base.html

@@ -18,7 +18,7 @@
     href="https://cdn.datatables.net/v/bs4/dt-1.10.22/fh-3.1.7/r-2.2.6/sc-2.0.3/sp-1.2.2/datatables.min.css" />
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
   <link rel="stylesheet" href="/static/assets/css/crafty.css">
-  <link rel="manifest" href="crafty.json">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -536,6 +536,14 @@
 
       });
     });
+    $(document).ready(() => {
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/static/assets/js/service-worker.js', {scope: '/'})
+          .then(function (registration) {
+            console.log('Service Worker Registered');
+          });
+      }
+    });
   </script>
 
   {% block js %}

app/frontend/templates/blank_base.html

@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
   <link rel="stylesheet" href="/static/assets/vendors/fontawesome6/css/all.css">
   <link rel="stylesheet" href="/static/assest/css/crafty.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->

app/frontend/templates/crafty.json

@@ -1,32 +0,0 @@
-{
-    "$schema": "https://json.schemastore.org/web-manifest-combined.json",
-    "short_name": "Crafty",
-    "name": "Crafty Controller 4",
-    "icons": [
-        {
-            "src": "../static/assets/images/Crafty_4-0.png",
-            "type": "image/png",
-            "sizes": "192x192"
-        }
-    ],
-    "start_url": "/public/login",
-    "background_color": "#3367D6",
-    "display": "fullscreen",
-    "scope": "/",
-    "theme_color": "#3367D6",
-    "shortcuts": [
-        {
-            "name": "Crafty Controller 4",
-            "short_name": "Crafty",
-            "description": "View weather information for today",
-            "url": "/panel/dashboard",
-            "icons": [
-                {
-                    "src": "../static/assets/images/Crafty_4-0.png",
-                    "sizes": "192x192"
-                }
-            ]
-        }
-    ],
-    "description": "Server Management Console/Wrapper"
-}

app/frontend/templates/public/login.html

@@ -12,6 +12,7 @@
   <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
   <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->
@@ -140,7 +141,15 @@
       let login_opacity_div = document.getElementById('login_opacity');
       let opacity = login_opacity_div.getAttribute('data-value');
       document.getElementById('login-form-background').style.background = 'rgb(34, 36, 55, ' + (opacity / 100) + ')';
+      //Register Service worker for mobile app
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/static/assets/js/service-worker.js', {scope: '/'})
+          .then(function (registration) {
+            console.log('Service Worker Registered');
+          });
+      }
     });
+    
   </script>
 </body>
 

app/frontend/templates/public_base.html

@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
   <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
   <link rel="stylesheet" href="/static/assets/vendors/fontawesome6/css/all.css">
+  <link rel="manifest" href="/static/assets/crafty.webmanifest">
   <!-- endinject -->
   <!-- Plugin css for this page -->
   <!-- End Plugin css for this page -->