mirror of
https://github.com/CorentinTh/it-tools.git
synced 2024-09-11 05:15:44 +03:00
refactor(pwa): prompt for pwa update
This commit is contained in:
parent
a771346250
commit
53ce079dff
@ -32,5 +32,6 @@ module.exports = {
|
||||
tsx: 'never',
|
||||
},
|
||||
],
|
||||
'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
|
||||
},
|
||||
};
|
||||
|
33
env.d.ts
vendored
33
env.d.ts
vendored
@ -1,5 +1,38 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-svg-loader" />
|
||||
/// <reference types="vite-plugin-pwa/client" />
|
||||
|
||||
declare module 'virtual:pwa-register/vue' {
|
||||
// @ts-expect-error ignore when vue is not installed
|
||||
import type { Ref } from 'vue';
|
||||
|
||||
export interface RegisterSWOptions {
|
||||
immediate?: boolean;
|
||||
onNeedRefresh?: () => void;
|
||||
onOfflineReady?: () => void;
|
||||
/**
|
||||
* Called only if `onRegisteredSW` is not provided.
|
||||
*
|
||||
* @deprecated Use `onRegisteredSW` instead.
|
||||
* @param registration The service worker registration if available.
|
||||
*/
|
||||
onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void;
|
||||
/**
|
||||
* Called once the service worker is registered (requires version `0.12.8+`).
|
||||
*
|
||||
* @param swScriptUrl The service worker script url.
|
||||
* @param registration The service worker registration if available.
|
||||
*/
|
||||
onRegisteredSW?: (swScriptUrl: string, registration: ServiceWorkerRegistration | undefined) => void;
|
||||
onRegisterError?: (error: any) => void;
|
||||
}
|
||||
|
||||
export function useRegisterSW(options?: RegisterSWOptions): {
|
||||
needRefresh: Ref<boolean>;
|
||||
offlineReady: Ref<boolean>;
|
||||
updateServiceWorker: (reloadPage?: boolean) => Promise<void>;
|
||||
};
|
||||
}
|
||||
|
||||
interface ImportMetaEnv {
|
||||
VITE_PLAUSIBLE_API_HOST: string;
|
||||
|
12
src/App.vue
12
src/App.vue
@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRoute, RouterView } from 'vue-router';
|
||||
import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
|
||||
import { darkTheme, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui';
|
||||
import { darkThemeOverrides, lightThemeOverrides } from './themes';
|
||||
import { layouts } from './layouts';
|
||||
import { useStyleStore } from './stores/style.store';
|
||||
import ReloadPrompt from './components/ReloadPrompt';
|
||||
|
||||
const route = useRoute();
|
||||
const layout = computed(() => route?.meta?.layout ?? layouts.base);
|
||||
@ -18,9 +19,12 @@ const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrid
|
||||
<n-config-provider :theme="theme" :theme-overrides="themeOverrides">
|
||||
<n-global-style />
|
||||
<n-message-provider placement="bottom">
|
||||
<component :is="layout">
|
||||
<router-view />
|
||||
</component>
|
||||
<n-notification-provider placement="bottom-right">
|
||||
<reload-prompt />
|
||||
<component :is="layout">
|
||||
<router-view />
|
||||
</component>
|
||||
</n-notification-provider>
|
||||
</n-message-provider>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
32
src/components/ReloadPrompt.tsx
Normal file
32
src/components/ReloadPrompt.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import { useRegisterSW } from 'virtual:pwa-register/vue';
|
||||
import { NButton, useNotification } from 'naive-ui';
|
||||
import { h, type Component } from 'vue';
|
||||
import { whenever } from '@vueuse/core';
|
||||
|
||||
export default function () {
|
||||
const notification = useNotification();
|
||||
|
||||
const { needRefresh, updateServiceWorker } = useRegisterSW();
|
||||
|
||||
whenever(
|
||||
needRefresh,
|
||||
() => {
|
||||
notification.create({
|
||||
title: 'A new version is out!',
|
||||
content: 'Reload the page to refresh the cache and get the newest version of it-tools',
|
||||
closable: true,
|
||||
onClose: () => {
|
||||
needRefresh.value = false;
|
||||
return true;
|
||||
},
|
||||
action: () =>
|
||||
h(
|
||||
NButton as Component,
|
||||
{ onClick: updateServiceWorker, type: 'primary', secondary: true },
|
||||
{ default: () => 'Reload' },
|
||||
),
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
}
|
@ -22,6 +22,10 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
|
||||
primaryColorSuppl: '#36AD6AFF',
|
||||
},
|
||||
|
||||
Notification: {
|
||||
color: '#333333',
|
||||
},
|
||||
|
||||
AutoComplete: {
|
||||
peers: {
|
||||
InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
|
||||
|
@ -9,6 +9,6 @@
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
"types": ["naive-ui/volar"]
|
||||
"types": ["naive-ui/volar", "vite-plugin-pwa/client"]
|
||||
}
|
||||
}
|
||||
|
@ -17,7 +17,7 @@ export default defineConfig({
|
||||
markdown(),
|
||||
svgLoader(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
registerType: 'prompt',
|
||||
strategies: 'generateSW',
|
||||
manifest: {
|
||||
name: 'IT Tools',
|
||||
|
Loading…
Reference in New Issue
Block a user