mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-24 14:37:20 +00:00
Add reload prompt for when a new update.
This commit is contained in:
parent
3c31e89f5e
commit
c8f9ae3441
@ -9,6 +9,7 @@
|
||||
</router-view>
|
||||
</div>
|
||||
|
||||
<ReloadPrompt />
|
||||
<FooterComponent />
|
||||
</div>
|
||||
</template>
|
||||
@ -16,6 +17,7 @@
|
||||
<script>
|
||||
import NavBar from "./components/NavBar.vue";
|
||||
import FooterComponent from "./components/FooterComponent.vue";
|
||||
import ReloadPrompt from "./components/ReloadPrompt.vue";
|
||||
|
||||
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
@ -23,6 +25,7 @@ export default {
|
||||
components: {
|
||||
NavBar,
|
||||
FooterComponent,
|
||||
ReloadPrompt,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
33
src/components/ReloadPrompt.vue
Normal file
33
src/components/ReloadPrompt.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
import { useRegisterSW } from "virtual:pwa-register/vue";
|
||||
|
||||
const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW();
|
||||
|
||||
const close = async () => {
|
||||
offlineReady.value = false;
|
||||
needRefresh.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="offlineReady || needRefresh" class="pwa-toast" role="alert">
|
||||
<div class="message">
|
||||
<span v-if="offlineReady"> App ready to work offline </span>
|
||||
<span v-else> New content available, click on reload button to update. </span>
|
||||
</div>
|
||||
<button v-if="needRefresh" @click="updateServiceWorker()">Reload</button>
|
||||
<button @click="close">Close</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.pwa-toast {
|
||||
@apply fixed right-0 bottom-0 m-4 p-3 border border-gray-500 rounded shadow bg-white text-gray-700;
|
||||
}
|
||||
.pwa-toast .message {
|
||||
@apply margin-bottom-2;
|
||||
}
|
||||
.pwa-toast button {
|
||||
@apply border border-solid border-gray-500 rounded px-2 py-1;
|
||||
}
|
||||
</style>
|
@ -71,8 +71,6 @@ import "uno.css";
|
||||
|
||||
const timeAgo = new TimeAgo("en-US");
|
||||
|
||||
import("./registerServiceWorker");
|
||||
|
||||
const mixin = {
|
||||
methods: {
|
||||
timeFormat: function (duration) {
|
||||
|
@ -1,7 +0,0 @@
|
||||
/* eslint-disable no-console */
|
||||
|
||||
import { registerSW } from "virtual:pwa-register";
|
||||
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
registerSW();
|
||||
}
|
@ -19,7 +19,7 @@ export default defineConfig({
|
||||
targets: ["defaults", "not IE 11"],
|
||||
}),
|
||||
VitePWA({
|
||||
registerType: "autoUpdate",
|
||||
registerType: "prompt",
|
||||
workbox: {
|
||||
globPatterns: ["**/*.{js,css,html,ico,svg,png}", "manifest.webmanifest"],
|
||||
globIgnores: ["**/*-legacy-*.js"],
|
||||
|
Loading…
Reference in New Issue
Block a user