checking the pwa installation capabilities (#34)

* checking the pwa installation capabilities * fixing PR review comments * added better and bigger icon images * adding image files to cahce; loading pwacompact in async way * deferring the pwacompact to render the DOM first * more clean code --------- Co-authored-by: Gokul K <gokulk@Gokuls-MacBook-Air.local>
gokulk16 · Sep 22, 2024 · 8918dc5 · 8918dc5
1 parent 57138f9
commit 8918dc5
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 0 deletions.
diff --git a/assets/images/favicon/favicon-192.png b/assets/images/favicon/favicon-192.png
diff --git a/assets/images/favicon/favicon-512.png b/assets/images/favicon/favicon-512.png
diff --git a/esbuild-helper/copy-file-plugin.js b/esbuild-helper/copy-file-plugin.js
@@ -0,0 +1,16 @@
+import fs from "fs";
+
+const copyFilePlugin = (fileSrcPath, fileDestPath) => ({
+  name: "copy-file-plugin",
+  setup(build) {
+    build.onEnd(async () => {
+      try {
+        fs.copyFileSync(fileSrcPath, fileDestPath);
+      } catch (e) {
+        console.error(`Failed to copy file: ${fileSrcPath}`, e);
+      }
+    });
+  },
+});
+
+export default copyFilePlugin;
diff --git a/esbuild.js b/esbuild.js
@@ -2,6 +2,7 @@ import * as esbuild from "esbuild";
 import copyStaticFiles from "esbuild-copy-static-files";
 import * as fsExtra from "fs-extra";
 import { sentryEsbuildPlugin } from "@sentry/esbuild-plugin";
+import copyFilePlugin from "./esbuild-helper/copy-file-plugin.js";
 
 fsExtra.emptyDirSync("./dist");
 
@@ -13,6 +14,8 @@ esbuild.build({
   sourcemap: true, // Source map needed for sentry to work
   mainFields: ["module", "main"],
   plugins: [
+    copyFilePlugin("./manifest.json", "./dist/manifest.json"),
+    copyFilePlugin("./sw.js", "./dist/sw.js"),
     copyStaticFiles({
       src: "./css",
       dest: "dist/css",

diff --git a/html/index.html b/html/index.html
@@ -14,6 +14,7 @@
       type="image/png"
       href="./assets/images/favicon/favicon-48.png"
     />
+    <link rel="manifest" href="manifest.json" />
   </head>
   <body>
     <h1 class="no-show">
@@ -107,5 +108,11 @@ <h2>
         </section>
       </div>
     </div>
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/pwacompat/pwacompat.min.js"
+      integrity="sha256-QmifG9ty2co3761lBWJwL5KdDOdJ4sFjQ/ULE4aD18U="
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/js/editor.js b/js/editor.js
@@ -759,7 +759,28 @@ export async function initSentry() {
   });
 }
 
+export async function registerSW() {
+  try {
+    if (!("serviceWorker" in navigator)) {
+      console.log("Service Workers are not supported by this browser");
+      return;
+    }
+
+    window.addEventListener("load", () => {
+      navigator.serviceWorker
+        .register("../sw.js")
+        .then((registration) => {})
+        .catch((error) => {
+          console.error("Service Worker registration failed:", error);
+        });
+    });
+  } catch (error) {
+    console.error("Service Worker registration failed:", error);
+  }
+}
+
 export async function init() {
+  registerSW();
   initSentry();
   setupDocument();
   await loadSettings();

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,41 @@
+{
+  "name": "Type to Calculate",
+  "short_name": "Type to Calculate",
+
+  "icons": [
+    {
+      "src": "/assets/images/favicon/favicon-16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/favicon/favicon-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/favicon/favicon-48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/favicon/favicon-150.png",
+      "sizes": "150x150",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/favicon/favicon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/images/favicon/favicon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#191919",
+  "background_color": "#7f7f7f"
+}
diff --git a/sw.js b/sw.js
@@ -0,0 +1,30 @@
+// sw.js
+const CACHE_NAME = "ttc-cache-v1";
+const urlsToCache = [
+  "/",
+  "/index.html",
+  "/css/*.css",
+  "/js/editor.js",
+  "/favicon-150.png",
+  "/favicon-48.png",
+  "/favicon-512.png",
+  "/favicon-192.png",
+];
+
+// Install the service worker
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+// Fetch the cached assets
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    })
+  );
+});