add basic pwa support

liamcottle · Nov 17, 2024 · ed4d0ff · ed4d0ff
1 parent 47b3efe
commit ed4d0ff
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 2 deletions.
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex bg-white p-2 border-b h-16">
         <div class="my-auto mr-2">
-            <img src="../assets/icon.png" class="size-12 rounded"/>
+            <img src="/icon.png" class="size-12 rounded"/>
         </div>
         <div class="my-auto mr-auto">
             <div class="font-bold">MeshTXT</div>

diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,8 @@
     <title>MeshTXT</title>
     <meta name="title" content="MeshTXT">
     <meta name="description" content="A simple, mobile friendly, web based Meshtastic client.">
-    <link rel="icon" type="image/png" href="assets/icon.png"/>
+    <link rel="icon" type="image/png" href="icon.png"/>
+    <link rel="manifest" href="/manifest.json">
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website">
@@ -21,5 +22,11 @@
 <body>
 <div id="app" class="bg-gray-100"></div>
 <script type="module" src="main.js"></script>
+<script>
+    // install service worker to allow for pwa install
+    if('serviceWorker' in navigator){
+        navigator.serviceWorker.register('/service-worker.js');
+    }
+</script>
 </body>
 </html>
diff --git a/src/manifest.json b/src/manifest.json
@@ -0,0 +1,17 @@
+{
+  "name": "MeshTXT",
+  "short_name": "MeshTXT",
+  "description": "A simple, mobile friendly, web based Meshtastic client.",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "icon.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "display": "standalone",
+  "theme_color": "#FFFFFF",
+  "background_color": "#FFFFFF"
+}
diff --git a/src/assets/icon.png → src/public/icon.png b/src/assets/icon.png → src/public/icon.png
diff --git a/src/service-worker.js b/src/service-worker.js
@@ -0,0 +1,4 @@
+self.addEventListener('fetch',function() {
+    // this is required to meet the requirements for an installable pwa
+    // it allows the browser to ask the user if they want to install to their homescreen
+});