Popups

Intro

This is a pre-built utility implementation for checking whether the current running app is still up to date. This prevents cached single-page apps from getting updated too late and fetching files that might not exist anymore.

You can configure on which events the checker should run.

/routes/+layout.svelte

<script lang="ts">
	import { dev, version } from '$app/environment';
	import { checkForUpdate, updateChecker, type UpdateCheckerProps } from '@leon8ix/jhana-ui/popup/update-checker';

	const props: UpdateCheckerProps = {
		// SvelteKit
		version,
		dev,
		// Triggers/Events
		laterDelaySec: 60,
		onmount: true,
		onvisible: true,
		// Dict/Labels
		heading: 'Update Available',
		message: 'A new Version of Jhana UI is available. Do you want to update right now?',
		btnUpdateNow: 'Update now',
		btnAskLater: 'Ask later',
	};
</script>

<svelte:document {@attach updateChecker(props)} />

<!-- 
	This is just to show you the popup, don't do this
	Passing a string as dev causes it to be treated as the online version, 
 	while true would just just skip the check
-->
<button
	type="button"
	class="btn"
	onclick={() => checkForUpdate({ ...props, version: '2', dev: '1', laterDelaySec: 5 })}
>
	Show popup
</button>