@networkpro/web 1.1.3 → 1.3.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@networkpro/web",
   "private": false,
   "sideEffects": false,
-  "version": "1.1.3",
+  "version": "1.3.0",
   "description": "Locking Down Networks, Unlocking Confidence | Security, Networking, Privacy — Network Pro Strategies",
   "keywords": [
     "security",
@@ -51,6 +51,10 @@
     "lint:md": "npx markdownlint-cli2 \"**/*.{md,markdown}\" \"#node_modules/**\" \"#build/**\"",
     "lint:css": "stylelint \"**/*.{css,svelte}\" --ignore-path .stylelintignore",
     "lint:all": "npm run lint && npm run lint:md && npm run lint:css && npm run format",
+    "lhci": "lhci",
+    "lighthouse": "npm run lighthouse:local",
+    "lighthouse:local": "npm run build && npm run preview & wait-on http://localhost:4173 && npm run lhci:run",
+    "lhci:run": "lhci autorun --config=.lighthouserc.cjs",
     "test": "npm run test:all",
     "test:all": "npm run test:client -- --run && npm run test:server -- --run",
     "test:client": "vitest --config vitest.config.client.js",

package/playwright.config.js

@@ -1,3 +1,10 @@
+/* ==========================================================================
+playwright.config.js
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
 // @ts-check
 import { defineConfig, devices } from "@playwright/test";
 

package/src/global.d.ts

@@ -0,0 +1,15 @@
+/* ==========================================================================
+src/global.d.ts
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== */
+
+interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[];
+  readonly userChoice: Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+  }>;
+  prompt(): Promise<void>;
+}

package/src/lib/components/PWAInstallButton.svelte

@@ -0,0 +1,93 @@
+<!-- ==========================================================================
+src/lib/components/PWAInstallButton.svelte
+
+SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
+This file is part of Network Pro.
+========================================================================== -->
+
+<script>
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
+
+  let show = false;
+
+  /** @type {BeforeInstallPromptEvent | null} */
+  let deferredPrompt = null;
+
+  /**
+   * @typedef {CustomEvent<BeforeInstallPromptEvent>} PWAInstallAvailableEvent
+   */
+
+  onMount(() => {
+    /**
+     * Listen for the custom event fired by registerServiceWorker.js
+     * to enable a custom install experience.
+     *
+     * TypeScript / svelte-check does not recognize custom events by default,
+     * so we cast the base Event to CustomEvent manually.
+     */
+    window.addEventListener(
+      "pwa-install-available",
+      (/** @type {Event} */ e) => {
+        const customEvent = /** @type {PWAInstallAvailableEvent} */ (e);
+        deferredPrompt = customEvent.detail;
+        show = true;
+      },
+    );
+  });
+
+  /**
+   * Trigger the native install prompt and handle user response
+   */
+  async function promptInstall() {
+    if (!deferredPrompt) return;
+
+    deferredPrompt.prompt();
+
+    const { outcome } = await deferredPrompt.userChoice;
+    console.log(`User response to PWA install prompt: ${outcome}`);
+
+    // Always hide the button after interaction
+    show = false;
+    deferredPrompt = null;
+  }
+</script>
+
+{#if show}
+  <button
+    id="pwa-install"
+    class="install-button"
+    on:click={promptInstall}
+    transition:fade={{ duration: 600 }}>
+    Install App
+  </button>
+{/if}
+
+<style>
+  .install-button {
+    display: block;
+    padding: 0.5rem 1rem;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    font-size: 1rem;
+    font-weight: bold;
+    color: #000;
+    background-color: #ffc627;
+    transition: background-color 0.2s ease-in-out;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: inherit;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1rem;
+  }
+
+  .install-button:hover {
+    background-color: #e6b300;
+  }
+
+  .install-button:focus {
+    outline: 2px solid #000;
+    outline-offset: 2px;
+  }
+</style>

package/src/lib/registerServiceWorker.js

@@ -5,25 +5,31 @@ SPDX-License-Identifier: CC-BY-4.0 OR GPL-3.0-or-later
 This file is part of Network Pro.
 ========================================================================== */
 
+/**
+ * Registers the service worker and handles update lifecycle, install prompt, and
+ * browser/environment compatibility checks. This supports offline usage and PWA behavior.
+ */
 export function registerServiceWorker() {
   if ('serviceWorker' in navigator) {
     // Skip registration in Firefox during development
-    const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
-    const isDevelopment = window.location.hostname === 'localhost' ||
-                         window.location.hostname === '127.0.0.1';
+    const isFirefox = navigator.userAgent.includes('Firefox');
+    const isDevelopment =
+      window.location.hostname === 'localhost' ||
+      window.location.hostname === '127.0.0.1';
 
     if (isFirefox && isDevelopment) {
       console.log('Service Worker registration skipped in Firefox development mode');
       return;
     }
 
-    // Wait until after the page fully loads for better performance
+    // Wait until after full page load for performance optimization
     window.addEventListener('load', () => {
-      navigator.serviceWorker.register('service-worker.js')
+      navigator.serviceWorker
+        .register('service-worker.js')
         .then((registration) => {
           console.log('Service Worker registered with scope:', registration.scope);
 
-          // Track installation of new service worker
+          // Track installation of a new service worker
           registration.addEventListener('updatefound', () => {
             const newWorker = registration.installing;
             console.log('New service worker installing...');
@@ -40,7 +46,7 @@ export function registerServiceWorker() {
               ) {
                 updatePrompted = true;
 
-                // Custom prompt: reload to update
+                // Custom prompt: ask user to reload for latest content
                 if (confirm('New content is available. Reload to update?')) {
                   window.location.reload();
                 }
@@ -52,7 +58,7 @@ export function registerServiceWorker() {
           console.error('Service Worker registration failed:', error);
         });
 
-      // Ensure page reloads when new service worker takes control
+      // Ensure the page reloads automatically when the new service worker takes control
       let refreshing = false;
       navigator.serviceWorker.addEventListener('controllerchange', () => {
         if (!refreshing) {
@@ -60,6 +66,14 @@ export function registerServiceWorker() {
           window.location.reload();
         }
       });
+
+      // Optional PWA install prompt logic
+      window.addEventListener('beforeinstallprompt', (e) => {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent('pwa-install-available', {
+          detail: /** @type {BeforeInstallPromptEvent} */ (e)
+        }));
+      });
     });
   }
 }

package/src/routes/+layout.svelte

@@ -12,8 +12,8 @@ This file is part of Network Pro.
   import Footer from "$lib/components/layout/Footer.svelte";
   import HeaderDefault from "$lib/components/layout/HeaderDefault.svelte";
   import HeaderHome from "$lib/components/layout/HeaderHome.svelte";
+  import PWAInstallButton from "$lib/components/PWAInstallButton.svelte";
   import { browser } from "$app/environment";
-  // TODO: Testing in progress
   import { registerServiceWorker } from "$lib/registerServiceWorker.js";
   import "$lib/styles";
 
@@ -47,7 +47,6 @@ This file is part of Network Pro.
     // Preload Apple Touch icon
     touchImg.src = appleTouchIcon;
 
-    // TODO: Testing in progress
     // Register the service worker
     registerServiceWorker();
   }
@@ -92,9 +91,11 @@ This file is part of Network Pro.
     {#if data.pathname === "/"}
       <!-- Render the Home Header for the root route -->
       <HeaderHome />
+      <PWAInstallButton />
     {:else}
       <!-- Render the Default Header for all other routes -->
       <HeaderDefault />
+      <PWAInstallButton />
     {/if}
   </ContainerSection>
 </header>

package/src/service-worker.js

@@ -8,25 +8,71 @@ This file is part of Network Pro.
 /** @type {ServiceWorkerGlobalScope} */
 const sw = self;
 
+const disallowedHosts = ["licdn.com", "googletagmanager.com"];
+
 import { build, files, version } from "$service-worker";
 
 /** @type {string} */
 const CACHE = `cache-${version}`;
 
 /** @type {string[]} */
-const ASSETS = Array.from(new Set([...build, ...files, "/offline.html"]));
+const excludedAssets = [];
+
+/** @type {string[]} */
+const ASSETS = Array.from(
+  new Set(
+    [...build, ...files, "/offline.html"].filter((path) => {
+      try {
+        const url = new URL(path, location.origin);
+        const hostname = url.hostname;
+
+        const shouldExclude =
+          path.startsWith("http") ||
+          disallowedHosts.some(
+            (host) => hostname === host || hostname.endsWith(`.${host}`),
+          ) ||
+          [
+            "/img/banner-1280x640.png",
+            "/img/banner-og-1200x630.png",
+            "/img/logo-transparent.png",
+            "/img/logo.png",
+            "/img/svelte.png",
+            "/robots.txt",
+            "/screenshots/desktop-foss.png",
+            "/sitemap.xml",
+            "/CNAME",
+          ].includes(path);
+
+        if (shouldExclude) excludedAssets.push(path);
+        return !shouldExclude;
+      } catch (err) {
+        console.warn("[SW] URL parse failed, skipping path:", path, err);
+        excludedAssets.push(path);
+        return true;
+      }
+    }),
+  ),
+);
 
-console.log("[SW] Assets to cache:", ASSETS); // Helps debug duplicates
+const uniqueExcludedAssets = [...new Set(excludedAssets)].sort();
+
+console.log("[SW] Assets to precache:", ASSETS);
+console.log("[SW] Excluded assets:", uniqueExcludedAssets);
 
 /**
  * @param {ExtendableEvent} event
  */
 sw.addEventListener("install", (event) => {
-  /** @type {ExtendableEvent} */ (event).waitUntil(
-    caches
-      .open(CACHE)
-      .then((cache) => cache.addAll(ASSETS))
-      .then(() => sw.skipWaiting()),
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE);
+      try {
+        await cache.addAll(ASSETS);
+        sw.skipWaiting();
+      } catch (err) {
+        console.warn("[SW] Failed to precache some assets:", err);
+      }
+    })(),
   );
 });
 
@@ -64,8 +110,10 @@ sw.addEventListener("activate", (event) => {
 sw.addEventListener("fetch", (event) => {
   /** @type {FetchEvent} */ (event).respondWith(
     (async () => {
-      const cached = await caches.match(event.request);
-      if (cached) return cached;
+      if (new URL(event.request.url).origin === location.origin) {
+        const cached = await caches.match(event.request);
+        if (cached) return cached;
+      }
 
       try {
         if (event.request.mode === "navigate") {

package/static/manifest.json

@@ -1,10 +1,15 @@
 {
+  "id": "/",
+  "start_url": "/?utm_source=homescreen",
+  "scope": "/",
   "name": "Network Pro Strategies",
   "short_name": "Network Pro",
   "description": "Access our expert cybersecurity services anytime, anywhere with our streamlined Progressive Web App. Optimized for speed, security, and mobile use, this app offers a seamless experience to explore our solutions, view project highlights, and get in touch—all in one place.",
-  "start_url": "/?utm_source=homescreen",
+  "lang": "en-US",
+  "dir": "ltr",
   "display": "standalone",
   "display_override": ["window-controls-overlay", "minimal-ui"],
+  "orientation": "any",
   "background_color": "#191919",
   "theme_color": "#ffc627",
   "icons": [
@@ -22,7 +27,7 @@
       "src": "/icon-512x512-maskable.png",
       "type": "image/png",
       "sizes": "512x512",
-      "purpose": "maskable"
+      "purpose": "any maskable"
     },
     {
       "src": "/icon-splash.png",
@@ -30,6 +35,8 @@
       "sizes": "512x512"
     }
   ],
+  "categories": ["business", "security", "technology", "network", "privacy"],
+  "prefer_related_applications": false,
   "screenshots": [
     {
       "src": "/screenshots/desktop-home.png",
@@ -60,9 +67,6 @@
       "label": "FOSS Spotlight on mobile"
     }
   ],
-  "orientation": "any",
-  "scope": "/",
-  "categories": ["business", "security", "technology", "network", "privacy"],
   "shortcuts": [
     {
       "name": "Consulting Services",