diff --git a/src/routes/(components)/layout/ChangelogDialog.svelte b/src/routes/(components)/layout/ChangelogDialog.svelte index 21f63154..adff922e 100644 --- a/src/routes/(components)/layout/ChangelogDialog.svelte +++ b/src/routes/(components)/layout/ChangelogDialog.svelte @@ -7,15 +7,17 @@ import { onMount } from 'svelte'; import LoaderCircle from 'virtual:icons/lucide/loader-circle'; import ReloadIcon from 'virtual:icons/lucide/refresh-ccw'; - import { needRefresh, updateDataLossDialog } from './PWAFunctions.svelte'; + import { checkForUpdates, needRefresh, updateDataLossDialog } from './PWAFunctions.svelte'; let open = $state(false); + let checkingForUpdate = $state(false); let dialogText = $state(); - let latestRelease = $state<{ tag_name: string; body: string }>(); + let releases = $state<{ tag_name: string; body: string }[]>([]); onMount(async () => { - const response = await fetch('https://api.github.com/repos/WhyAsh5114/MyFit/releases/latest'); - latestRelease = await response.json(); + const response = await fetch('https://api.github.com/repos/WhyAsh5114/MyFit/releases'); + releases = await response.json(); + const latestRelease = releases[0]; const ls = window.localStorage; const changelogShownOf = ls.getItem('changelogShownOf'); @@ -24,13 +26,24 @@ changelogShownOf.localeCompare(latestRelease!.tag_name, undefined, { numeric: true }) === -1 ) { open = true; - loadChangelog(); + checkingForUpdate = true; + await checkForUpdates!(); + checkingForUpdate = false; + loadChangelog(changelogShownOf); } ls.setItem('changelogShownOf', latestRelease!.tag_name); }); - async function loadChangelog() { - dialogText = DOMPurify.sanitize(await marked.parse(latestRelease!.body)); + async function loadChangelog(lastRelease: string) { + const notShownReleases = releases.filter( + (release) => release.tag_name.localeCompare(lastRelease, undefined, { numeric: true }) === 1 + ); + + dialogText = ''; + for (const release of notShownReleases) { + dialogText += DOMPurify.sanitize(await marked.parse(release.body)); + dialogText += '
'; + } } @@ -41,11 +54,20 @@ {@html dialogText} - {:else} diff --git a/src/routes/(components)/layout/PWAFunctions.svelte.ts b/src/routes/(components)/layout/PWAFunctions.svelte.ts index 78e3d2a1..55fe93d7 100644 --- a/src/routes/(components)/layout/PWAFunctions.svelte.ts +++ b/src/routes/(components)/layout/PWAFunctions.svelte.ts @@ -1,24 +1,27 @@ import { browser } from '$app/environment'; import { useRegisterSW } from 'virtual:pwa-register/svelte'; +let checkForUpdates: (() => Promise) | null = null; + const sw = browser ? useRegisterSW({ onRegisteredSW(swUrl, r) { - if (r) { - setInterval(async () => { - if (!navigator || r.installing) return; - if ('connection' in navigator && !navigator.onLine) return; + checkForUpdates = async () => { + if (!r) return; + if (!navigator || r.installing) return; + if ('connection' in navigator && !navigator.onLine) return; - const resp = await fetch(swUrl, { + const resp = await fetch(swUrl, { + cache: 'no-store', + headers: { cache: 'no-store', - headers: { - cache: 'no-store', - 'cache-control': 'no-cache' - } - }); - if (resp.status === 200) await r.update(); - }, 3600000); - } + 'cache-control': 'no-cache' + } + }); + if (resp.status === 200) await r.update(); + }; + + if (r) setInterval(checkForUpdates, 3600000); console.log(`SW Registered: ${r}`); }, onRegisterError(error) { @@ -31,3 +34,5 @@ export const needRefresh = sw?.needRefresh; export const updateServiceWorker = sw?.updateServiceWorker; export const offlineReady = sw?.offlineReady; export const updateDataLossDialog = $state({ open: false }); + +export { checkForUpdates };