Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@ASoldo
ASoldo committed Jan 8, 2024
1 parent 2da706c commit 3d9fde6
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 74 deletions.
2 changes: 1 addition & 1 deletion app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="fixed top-16 right-2 z-[10000]">
<div class="fixed top-16 right-2">
<ToastWrapper />
</div>
<div class="flex flex-col h-screen">
Expand Down
153 changes: 82 additions & 71 deletions components/PWA.vue
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,13 @@
<!-- <template> -->
<!-- <VitePwaManifest /> -->
<!-- <ClientOnly> -->
<!-- <div v-if="$pwa?.offlineReady || $pwa?.needRefresh" -->
<!-- class="bg-red-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50" -->
<!-- role="alert"> -->
<!-- <div class="flex"> -->
<!-- <div class="py-1"> -->
<!-- <span v-if="$pwa.offlineReady"> Aplikacija spremna za izvanmrežni rad.</span> -->
<!-- <span v-else> -->
<!-- Novi sadržaj dostupan, kliknite na gumb za ponovno učitavanje kako biste ažurirali. -->
<!-- </span> -->
<!-- </div> -->
<!-- <div class="pl-4 flex items-center"> -->
<!-- <button v-if="$pwa.needRefresh" @click="$pwa.updateServiceWorker()" -->
<!-- class="font-bold text-blue-500 hover:text-blue-800"> -->
<!-- Ponovno učitavanje -->
<!-- </button> -->
<!-- <button @click="$pwa.cancelPrompt()" class="font-bold text-blue-500 hover:text-blue-800 ml-4"> -->
<!-- Zatvori -->
<!-- </button> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div v-if=" -->
<!-- $pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh -->
<!-- " class="bg-blue-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50" -->
<!-- role="alert"> -->
<!-- <div class="flex items-center"> -->
<!-- <div class="py-1"> -->
<!-- <span> Instaliraj PWA za lakše igranje i potpuni doživljaj. </span> -->
<!-- </div> -->
<!-- <div class="pl-4 flex"> -->
<!-- <button @click="$pwa.install()" class="font-bold text-blue-500 hover:text-blue-800"> -->
<!-- Instaliraj -->
<!-- </button> -->
<!-- <button @click="$pwa.cancelInstall()" class="font-bold text-blue-500 hover:text-blue-800 ml-4"> -->
<!-- Odustani -->
<!-- </button> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </ClientOnly> -->
<!-- </template> -->

<script setup>
// If you want to use it in setup, import from the nuxtApp.
const { $pwa } = useNuxtApp();

// const toast = useToast();

onMounted(() => {
if ($pwa.offlineReady) {
// toast.success("App ready to work offline");
console.log("App ready to work offline");
}
});
</script>

<template>
<VitePwaManifest />
<!-- <NuxtPwaManifest /> -->
<ClientOnly>
<!-- You can use $pwa directly in templates! -->
<!-- <div v-show="$pwa.needRefresh" -->
<!-- class="bg-red-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50"> -->
<!-- <span> New content available, click on reload button to update. </span> -->
<!---->
<!-- <button class="font-bold text-blue-500 hover:text-blue-800 ml-4" @click="$pwa.updateServiceWorker()"> -->
<!-- Reload now -->
<!-- </button> -->
<!-- </div> -->
<div v-if="$pwa?.offlineReady || $pwa?.needRefresh"
class="bg-blue-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50"
class="bg-red-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50"
role="alert">
<div class="flex">
<div class="py-1">
<span v-if="$pwa.offlineReady">
Aplikacija spremna za izvanmrežni rad!</span>
Aplikacija spremna za izvanmrežni rad.</span>
<span v-else>
Novi sadržaj dostupan, kliknite na gumb za ponovno učitavanje kako
biste ažurirali.
Expand Down Expand Up @@ -112,3 +43,83 @@ onMounted(() => {
</div>
</ClientOnly>
</template>

<!-- <script setup> -->
<!-- // If you want to use it in setup, import from the nuxtApp. -->
<!-- const { $pwa } = useNuxtApp(); -->
<!---->
<!-- // const toast = useToast(); -->
<!---->
<!-- onMounted(() => { -->
<!-- if ($pwa.offlineReady) { -->
<!-- // toast.success("App ready to work offline"); -->
<!-- console.log("App ready to work offline"); -->
<!-- } -->
<!-- }); -->
<!-- </script> -->
<!---->
<!-- <template> -->
<!-- <!-- <NuxtPwaManifest /> -->
-->
<!-- <ClientOnly> -->
<!-- <VitePwaManifest /> -->
<!-- <!-- You can use $pwa directly in templates! -->
-->
<!-- <!-- <div v-show="$pwa.needRefresh" -->
-->
<!-- <!-- class="bg-red-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50"> -->
-->
<!-- <!-- <span> New content available, click on reload button to update. </span> -->
-->
<!-- <!---->
-->
<!-- <!-- <button class="font-bold text-blue-500 hover:text-blue-800 ml-4" @click="$pwa.updateServiceWorker()"> -->
-->
<!-- <!-- Reload now -->
-->
<!-- <!-- </button> -->
-->
<!-- <!-- </div> -->
-->
<!-- <div v-if="$pwa?.offlineReady || $pwa?.needRefresh" -->
<!-- class="bg-blue-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50" -->
<!-- role="alert"> -->
<!-- <div class="flex"> -->
<!-- <div class="py-1"> -->
<!-- <span v-if="$pwa.offlineReady"> -->
<!-- Aplikacija spremna za izvanmrežni rad!</span> -->
<!-- <span v-else> -->
<!-- Novi sadržaj dostupan, kliknite na gumb za ponovno učitavanje kako -->
<!-- biste ažurirali. -->
<!-- </span> -->
<!-- </div> -->
<!-- <div class="pl-4 flex items-center"> -->
<!-- <button v-if="$pwa.needRefresh" @click="$pwa.updateServiceWorker()" -->
<!-- class="font-bold text-blue-500 hover:text-blue-800"> -->
<!-- Ponovno učitavanje -->
<!-- </button> -->
<!-- <button @click="$pwa.cancelPrompt()" class="font-bold text-blue-500 hover:text-blue-800 ml-4"> -->
<!-- Zatvori -->
<!-- </button> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div v-if="$pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh -->
<!-- " class="bg-blue-100 border-t-4 border-red-500 rounded-b text-blue-900 px-4 py-3 shadow-md sticky bottom-0 z-50" -->
<!-- role="alert"> -->
<!-- <div class="flex items-center"> -->
<!-- <div class="py-1"> -->
<!-- <span> Instaliraj PWA za lakše igranje i potpuni doživljaj. </span> -->
<!-- </div> -->
<!-- <div class="pl-4 flex"> -->
<!-- <button @click="$pwa.install()" class="font-bold text-blue-500 hover:text-blue-800"> -->
<!-- Instaliraj -->
<!-- </button> -->
<!-- <button @click="$pwa.cancelInstall()" class="font-bold text-blue-500 hover:text-blue-800 ml-4"> -->
<!-- Odustani -->
<!-- </button> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </ClientOnly> -->
<!-- </template> -->
4 changes: 2 additions & 2 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@
</div>
<Products />
<Impressum />
<CookieControl locale="hr" class="z-50">
<PWA class="w-full h-full" />
<CookieControl locale="hr">
<template #bar>
<div class="flex flex-col">
<h3>
Expand All @@ -65,7 +66,6 @@
<h3>Kolačići</h3>
</template>
</CookieControl>
<PWA class="w-full h-full" />
</div>
</div>
</template>
Expand Down

0 comments on commit 3d9fde6

Please sign in to comment.