PWA: add PWA installation prompt and related assets

package.json

@@ -5,6 +5,8 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev --port 3000 --host",
+		"tunnel": "npx localtunnel --port 3000",
+		"dev:tunnel": "concurrently \"npm run dev\" \"npm run tunnel\"",
 		"build": "vite build",
 		"preview": "vite preview --port 3000 --host",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -26,16 +28,19 @@
 		"@types/lodash-es": "^4.17.12",
 		"@types/mock-fs": "^4.13.4",
 		"@types/node": "^22.15.17",
+		"@vite-pwa/sveltekit": "^1.0.0",
 		"@vitest/coverage-v8": "^3.1.3",
 		"@vitest/ui": "^3.1.3",
 		"autoprefixer": "^10.4.21",
 		"c8": "^10.1.3",
+		"concurrently": "^9.1.2",
 		"coveralls-next": "^4.2.1",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
 		"jsdom": "^26.1.0",
+		"localtunnel": "^2.0.2",
 		"mock-fs": "^5.5.0",
 		"postcss": "^8.5.3",
 		"prettier": "^3.3.2",
@@ -63,4 +68,4 @@
 		"mode-watcher": "^0.5.0",
 		"vite": "^6.0.0"
 	}
-}
+}

src/lib/components/PWAInstallPrompt.svelte

@@ -0,0 +1,76 @@
+<script>
+	// @ts-ignore
+	import { logger } from '$lib/utils/logger';
+	import { browser } from '$app/environment';
+	let { data } = $props();
+
+	// @ts-ignore
+	let deferredPrompt = null;
+	let showButton = $state(false);
+	showButton = data?.showButton ? data.showButton : false; // for test
+
+	if (browser) {
+		// @ts-ignore
+		window.addEventListener('beforeinstallprompt', (e) => {
+			// Prevent the mini-info bar from appearing on mobile
+			e.preventDefault();
+			// Stash the event so it can be triggered later.
+			deferredPrompt = e;
+			// Update UI notify the user they can add to home screen
+			showButton = localStorage.getItem('dismissedPWAInstallPrompt') !== 'true';
+			console.log('beforeinstallprompt', e);
+		});
+
+
+		}
+
+    function installApp() {
+			// @ts-ignore
+			if (deferredPrompt) {
+				deferredPrompt.prompt();
+				// @ts-ignore
+				deferredPrompt.userChoice.then((choiceResult) => {
+					if (choiceResult.outcome === 'accepted') {
+						logger.log('Accepted the install prompt');
+					} else {
+						console.log('Rejected the install prompt');
+					}
+					deferredPrompt = null;
+					showButton = false;
+				});
+			}
+		}
+
+	function closePrompt() {
+		localStorage.setItem('dismissedPWAInstallPrompt', 'true');
+		showButton = false;
+	}
+</script>
+
+{#if showButton}
+<div class="fixed bottom-0 left-0 right-0 bg-white text-purple-700 p-4 flex justify-between items-center z-10" style="box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);">
+	<div class="flex items-left gap-2 mr-2">
+		<!-- Logo -->
+		<img src="/web/icon-192.png" alt="App Icon" class="w-10 h-10 mr-2" />
+		<!-- App Name -->
+		<div class="flex flex-col items-start">
+			<span class="font-bold">SUPPL-AI</span>
+			<!-- Description -->
+			<span class="text-sm text-gray-600 mt-1">Installa l'app per un accesso rapido e facile</span>
+		</div>
+	</div>
+	<div class="flex gap-2 items-center">
+		<button 
+			onclick={installApp} 
+			class="item-primary rounded-full border-none p-3 text-center font-bold cursor-pointer">
+			Install
+		</button>
+		<button 
+			onclick={closePrompt} 
+			class="bg-none border-none text-2xl font-bold text-primary cursor-pointer">
+			&times;
+		</button>
+	</div>
+</div>
+
+{/if} 

src/routes/+layout.svelte

@@ -2,6 +2,11 @@
 	import '../app.css';
 	import { browser } from '$app/environment';
 	import { logger } from '$lib/utils/logger';
+
+	import PwaInstallPrompt from '$lib/components/PWAInstallPrompt.svelte';
+  import { pwaInfo } from 'virtual:pwa-info';
+  let webManifestLink = pwaInfo?.webManifest?.linkTag ?? '';
+
 	let {
 		children,
 		data
@@ -40,6 +45,18 @@
 			}
 		}
 	});
+
+
 </script>
 
+<svelte:head>
+	<title>Suppl-AI</title>
+  {@html webManifestLink}
+	<link rel="apple-touch-icon" href="img/favicon.ico">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="default">
+	<meta name="apple-mobile-web-app-title" content="SUPPL-AI">
+
+</svelte:head>
+<PwaInstallPrompt />
 {@render children?.()}

static/web/README.txt

@@ -0,0 +1,18 @@
+Add this to your HTML <head>:
+
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+Add this to your app's manifest.json:
+
+    ...
+    {
+      "icons": [
+        { "src": "/favicon.ico", "type": "image/x-icon", "sizes": "16x16 32x32" },
+        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
+        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
+        { "src": "/icon-192-maskable.png", "type": "image/png", "sizes": "192x192", "purpose": "maskable" },
+        { "src": "/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
+      ]
+    }
+    ...

tests/lib/components/PWAInstallPrompt.test.ts

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/svelte';
+import PWAInstallPrompt from '$lib/components/PWAInstallPrompt.svelte';
+
+describe('PWAInstallPrompt', () => {
+
+  it('should render the install prompt when showButton is true', () => {
+    render(PWAInstallPrompt,{ data:{showButton: true }});
+
+    expect(screen.getByText('Install')).toBeInTheDocument();
+  });
+
+});

tsconfig.json

@@ -10,7 +10,7 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler",
-		"types": ["vitest/globals"]
+		"types": ["vitest/globals", "vite-plugin-pwa/info"]
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files

vite.config.ts

@@ -1,39 +1,84 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
 
 export default defineConfig(({ mode }) => ({
-	plugins: [sveltekit()],
+	plugins: [
+		sveltekit(),
+		SvelteKitPWA({
+			registerType: 'autoUpdate',
+			manifest: {
+				name: 'SUPPL-AI',
+				short_name: 'SupplAI',
+				description: 'Gestione intelligente dei documenti e FAQ',
+				theme_color: '#007bff',
+				background_color: '#ffffff',
+				display: 'standalone',
+				start_url: '/',
+				icons: [
+					{
+						src: 'web/icon-192.png',
+						sizes: '192x192',
+						type: 'image/png'
+					},
+					{
+						src: 'web/icon-512.png',
+						sizes: '512x512',
+						type: 'image/png'
+					}
+				],
+				screenshots: [
+					{
+						src: '/screenshots/mobile.png',
+						sizes: '1290x2796',
+						type: 'image/png',
+						form_factor: 'narrow'
+					},
+					{
+						src: '/screenshots/desktop.png',
+						sizes: '2560x1262',
+						type: 'image/png',
+						form_factor: 'wide'
+					}
+				]
+			},
+			devOptions: {
+				enabled: true
+			}
+		})
+	],
 	test: {
 		environment: 'jsdom',
 		globals: true,
 		setupFiles: './src/setupTests.ts',
 		passWithNoTests: true,
-		reporters: 'verbose', 
+		reporters: 'verbose',
 		coverage: {
-      provider: 'v8',
-      reporter: ['text', 'html', 'lcov'],
-      reportsDirectory: './coverage',
-      exclude: [
-				'src/setupTests.ts', 
-				'**/*.d.ts', 
+			provider: 'v8',
+			reporter: ['text', 'html', 'lcov'],
+			reportsDirectory: './coverage',
+			exclude: [
+				'src/setupTests.ts',
+				'**/*.d.ts',
 				'.svelte-kit/**',
 				'**/*.config.ts',
 				'**/*.config.js',
 				'static/**',
 				'html/**',
 				'node_modules/**',
 				'src/lib/index.ts',
-				'src/lib/utils/logger.ts',
-			],
-    },
+				'src/lib/utils/logger.ts'
+			]
+		}
 	},
 	css: {
-    postcss: './postcss.config.js',
-  },
+		postcss: './postcss.config.js'
+	},
 	resolve: {
-		conditions: mode === 'test' ? ['browser'] : [],
+		conditions: mode === 'test' ? ['browser'] : []
 	},
 	server: {
-		cors: true
-	},
+		cors: true,
+		allowedHosts: ['.loca.lt']
+	}
 }));