61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import { useState } from 'react';
|
||
import { useRegisterSW } from 'virtual:pwa-register/react';
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardFooter,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from '@/components/ui/card';
|
||
|
||
function PWAUpdate() {
|
||
const {
|
||
needRefresh: [needRefresh, setNeedRefresh],
|
||
updateServiceWorker,
|
||
} = useRegisterSW({
|
||
onNeedRefresh() {
|
||
setNeedRefresh(true);
|
||
},
|
||
});
|
||
|
||
const [isLoading, setIsLoading] = useState(false);
|
||
|
||
const handleUpdate = async () => {
|
||
setIsLoading(true);
|
||
await updateServiceWorker(true);
|
||
setIsLoading(false);
|
||
};
|
||
|
||
const handleDismiss = () => {
|
||
setNeedRefresh(false);
|
||
};
|
||
|
||
if (!needRefresh) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="fixed bottom-4 right-4 z-50">
|
||
<Card className="w-80 shadow-lg">
|
||
<CardHeader className="pb-3">
|
||
<CardTitle>发现新版本</CardTitle>
|
||
<CardDescription>有新版本可用，点击立即更新</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="pt-0" />
|
||
<CardFooter className="gap-2">
|
||
<Button variant="outline" size="sm" onClick={handleDismiss}>
|
||
稍后
|
||
</Button>
|
||
<Button size="sm" onClick={handleUpdate} disabled={isLoading}>
|
||
{isLoading ? '更新中...' : '立即更新'}
|
||
</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default PWAUpdate;
|