revamped the SW according to the latest docs

Author: Franc Bele

src/app.html

@@ -7,7 +7,6 @@
 	<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
 
 	<!-- PWA stuff -->
-	<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest">
 	<base href="/" />
 	<meta name="viewport"
 		content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

src/lib/ReloadPrompt.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { useRegisterSW } from "virtual:pwa-register/svelte";
+    const { needRefresh, updateServiceWorker, offlineReady } = useRegisterSW({
+        onRegistered(r) {
+            // uncomment following code if you want check for updates
+            // r && setInterval(() => {
+            //    console.log('Checking for sw update')
+            //    r.update()
+            // }, 20000 /* 20s for testing purposes */)
+            console.log(`SW Registered: ${r}`);
+        },
+        onRegisterError(error) {
+            console.log("SW registration error", error);
+        },
+    });
+    const close = () => {
+        offlineReady.set(false);
+        needRefresh.set(false);
+    };
+    $: toast = $offlineReady || $needRefresh;
+</script>
+
+{#if toast}
+    <div class="pwa-toast" role="alert">
+        <div class="message">
+            {#if $offlineReady}
+                <span>App ready to work offline</span>
+            {:else}
+                <span>
+                    New content available, click on reload button to update.
+                </span>
+            {/if}
+        </div>
+        {#if $needRefresh}
+            <button on:click={() => updateServiceWorker(true)}>Reload</button>
+        {/if}
+        <button on:click={close}>Close</button>
+    </div>
+{/if}
+
+<style>
+    .pwa-toast {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        margin: 16px;
+        padding: 12px;
+        border: 1px solid #8885;
+        border-radius: 4px;
+        z-index: 2;
+        text-align: left;
+        box-shadow: 3px 4px 5px 0 #8885;
+        background-color: white;
+    }
+    .pwa-toast .message {
+        margin-bottom: 8px;
+    }
+    .pwa-toast button {
+        border: 1px solid #8885;
+        outline: none;
+        margin-right: 5px;
+        border-radius: 2px;
+        padding: 3px 10px;
+    }
+</style>

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
 	import './styles.css';
 	import { listenForBeforeInstallPrompt } from '$lib/pwa.store';
 	import { onMount } from 'svelte';
+	import { pwaInfo } from "virtual:pwa-info";
 
 	// we do implicit registration of service worker using the Readable API in pwa.store.ts
 
@@ -23,7 +24,16 @@
 		console.log(`Attaching 'beforeinstallprompt' listeners.`);
 		listenForBeforeInstallPrompt();
 	});
+
+	$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : "";
 </script>
 
-<svelte:head />
+<svelte:head>
+	{@html webManifestLink}
+</svelte:head>
+
 <slot />
+
+{#await import('$lib/ReloadPrompt.svelte') then {default: ReloadPrompt}}
+  <ReloadPrompt />
+{/await}

src/service-worker/index.ts

@@ -17,6 +17,9 @@ const config = {
 			precompress: false,
 			strict: true
 		})
+	},
+	serviceWorker: {
+		register: false
 	}
 };
 

svelte.config.js

@@ -6,6 +6,7 @@
 		],
 		"types": [
 			"ionic-svelte",
+			"vite-plugin-pwa/info",
 			"vite-plugin-pwa/svelte"
 		],
 		"allowJs": true,

tsconfig.json

@@ -1,16 +1,17 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { SvelteKitPWA } from '@vite-pwa/sveltekit';
-import { VitePWA } from 'vite-plugin-pwa';
 import mkcert from 'vite-plugin-mkcert';
 
-
 const pwaManifest = {
 	name: "Ionic SSR demo",
 	short_name: "IonicSSRDemo",
 	description: "Ionic SSR demo",
 	theme_color: '#f27649',
 	orientation: "portrait",
 	start_url: "/app/splash",
+	id: "/",
+    background_color: "#ffffff",
+    lang: "en",
 	icons: [
 		// The original 192x192 icon size was actually 512x512
 		{
@@ -42,14 +43,14 @@ const pwaConfiguration = {
 /** @type {import('vite').UserConfig} */
 const config = {
 	define: {
-		// we need it for 'workbox-precaching'
-		'process.env.NODE_ENV': '"production"'
+		'process.env.NODE_ENV': process.env.NODE_ENV === 'production' 
+		? '"production"'
+		: '"development"'
 	},
 	plugins: [
 		sveltekit(),
 		// a plugin for enabling provisional certificate for https preview server
 		mkcert(),
-		// VitePWA(pwaConfiguration)
 		SvelteKitPWA(pwaConfiguration)
 	],
 	// for service worker to work properly the PWA needs to be running on https protocol