feat: refresh btn for pwa

Zephyruso · Feb 19, 2025 · 54e80c9 · 54e80c9
1 parent b459108
commit 54e80c9
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 6 deletions.
diff --git a/src/components/settings/ZashboardSettings.vue b/src/components/settings/ZashboardSettings.vue
@@ -20,6 +20,14 @@
           </span>
         </a>
       </div>
+      <button
+        class="btn btn-sm absolute right-2 top-2"
+        @click="refreshPages"
+        v-if="isPWA"
+      >
+        {{ $t('refresh') }}
+        <ArrowPathIcon class="h-4 w-4" />
+      </button>
     </div>
     <div class="card-body gap-4">
       <div class="grid grid-cols-1 gap-2 xl:grid-cols-2">
@@ -147,7 +155,12 @@ import LanguageSelect from '@/components/settings/LanguageSelect.vue'
 import { useSettings } from '@/composables/settings'
 import { FONTS } from '@/constant'
 import { exportSettings } from '@/helper'
-import { deleteBase64FromIndexedDB, LOCAL_IMAGE, saveBase64ToIndexedDB } from '@/helper/utils'
+import {
+  deleteBase64FromIndexedDB,
+  isPWA,
+  LOCAL_IMAGE,
+  saveBase64ToIndexedDB,
+} from '@/helper/utils'
 import {
   autoUpgrade,
   customBackgroundURL,
@@ -156,7 +169,7 @@ import {
   swipeInTabs,
   theme,
 } from '@/store/settings'
-import { ArrowUpCircleIcon } from '@heroicons/vue/24/outline'
+import { ArrowPathIcon, ArrowUpCircleIcon } from '@heroicons/vue/24/outline'
 import { twMerge } from 'tailwind-merge'
 import { ref } from 'vue'
 import ImportSettings from '../common/ImportSettings.vue'
@@ -233,4 +246,13 @@ const themes = [
   'nord',
   'sunset',
 ]
+
+const refreshPages = async () => {
+  const registrations = await navigator.serviceWorker.getRegistrations()
+
+  for (const registration of registrations) {
+    registration.unregister()
+  }
+  window.location.reload()
+}
 </script>
diff --git a/src/helper/utils.ts b/src/helper/utils.ts
@@ -3,6 +3,9 @@ import { useMediaQuery } from '@vueuse/core'
 export const twoColumn = useMediaQuery('(min-width: 810px)')
 export const twoColumnWithSidebar = useMediaQuery('(min-width: 1130px)')
 export const isMiddleScreen = useMediaQuery('(max-width: 768px)')
+export const isPWA = (() => {
+  return window.matchMedia('(display-mode: standalone)').matches || navigator.standalone
+})()
 
 const BACKGROUND_IMAGE = 'background-image'
 export const LOCAL_IMAGE = 'local-image'

diff --git a/src/i18n/en.ts b/src/i18n/en.ts
@@ -153,6 +153,7 @@ const en = {
   connectionIP: 'Connection IP',
   simpleCardPreset: 'Simple Preset',
   detailedCardPreset: 'Detailed Preset',
+  refresh: 'Refresh',
 }
 
 export type LANG_MESSAGE = typeof en

diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts
@@ -156,6 +156,7 @@ const ru: LANG_MESSAGE = {
   connectionIP: 'IP-источник соединения',
   simpleCardPreset: 'Простой карточки',
   detailedCardPreset: 'Подробный карточки',
+  refresh: 'Обновить',
 }
 
 export default ru
diff --git a/src/i18n/zh.ts b/src/i18n/zh.ts
@@ -154,6 +154,7 @@ const zh: LANG_MESSAGE = {
   connectionIP: '连接IP',
   simpleCardPreset: '简洁预设',
   detailedCardPreset: '详细预设',
+  refresh: '刷新',
 }
 
 export default zh
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -87,6 +87,7 @@ import { useSettings } from '@/composables/settings'
 import { useSwipeRouter } from '@/composables/swipe'
 import { PROXY_TAB_TYPE, ROUTE_ICON_MAP, ROUTE_NAME, RULE_TAB_TYPE } from '@/constant'
 import { getUrlFromBackend, renderRoutes } from '@/helper'
+import { isPWA } from '@/helper/utils'
 import { fetchConfigs } from '@/store/config'
 import { initConnections } from '@/store/connections'
 import { initLogs } from '@/store/logs'
@@ -99,10 +100,6 @@ import { useDocumentVisibility } from '@vueuse/core'
 import { computed, ref, watch, type Component } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
-const isPWA = (() => {
-  return window.matchMedia('(display-mode: standalone)').matches || navigator.standalone
-})()
-
 const ctrlsMap: Record<string, Component> = {
   [ROUTE_NAME.connections]: ConnectionCtrl,
   [ROUTE_NAME.logs]: LogsCtrl,