dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve notification permission handling and enhance test notification logic in Permissions.vue

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-26 19:29:09 +07:00
parent 1f92b662af
commit 7ceaf883ae
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/pages/admin/account/Permissions.vue
View File

@ -12,8 +12,8 @@ import { onMounted, ref, watch } from 'vue';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card'; import { Card, CardContent } from '@/components/ui/card';
import AccountLayout from '@/layouts/AccountLayout.vue';
import { usePushNotification } from '@/composables/usePushNotification'; import { usePushNotification } from '@/composables/usePushNotification';
import AccountLayout from '@/layouts/AccountLayout.vue';
type PermissionState = 'granted' | 'denied' | 'prompt' | 'unsupported'; type PermissionState = 'granted' | 'denied' | 'prompt' | 'unsupported';
@ -32,7 +32,10 @@ const { isSupported, isSubscribed, isLoading, subscribe, unsubscribe } =
watch(isSubscribed, (subscribed) => { watch(isSubscribed, (subscribed) => {
const notif = permissions.value.find((p) => p.key === 'notification'); const notif = permissions.value.find((p) => p.key === 'notification');
if (!notif) return;
if (!notif) {
return;
}
if (subscribed) { if (subscribed) {
notif.state = 'granted'; notif.state = 'granted';
@ -117,14 +120,16 @@ async function requestPermission(perm: PermissionItem) {
perm.requesting || perm.requesting ||
perm.state === 'denied' || perm.state === 'denied' ||
perm.state === 'unsupported' perm.state === 'unsupported'
) ) {
return; return;
}
perm.requesting = true; perm.requesting = true;
try { try {
if (perm.key === 'notification') { if (perm.key === 'notification') {
const result = await Notification.requestPermission(); const result = await Notification.requestPermission();
if (result === 'denied') { if (result === 'denied') {
perm.state = 'denied'; perm.state = 'denied';
} else if (result === 'granted') { } else if (result === 'granted') {
@ -155,6 +160,7 @@ async function requestPermission(perm: PermissionItem) {
async function handleUnsubscribeNotification(perm: PermissionItem) { async function handleUnsubscribeNotification(perm: PermissionItem) {
perm.requesting = true; perm.requesting = true;
try { try {
await unsubscribe(); await unsubscribe();
perm.state = 'prompt'; perm.state = 'prompt';
@ -167,12 +173,22 @@ async function handleUnsubscribeNotification(perm: PermissionItem) {
async function testPermission(perm: PermissionItem) { async function testPermission(perm: PermissionItem) {
perm.testing = true; perm.testing = true;
try { try {
if (perm.key === 'notification') { if (perm.key === 'notification') {
new Notification('Tes Notifikasi', { if ('serviceWorker' in navigator) {
body: 'Notifikasi berhasil diterima oleh perangkat Anda.', const registration = await navigator.serviceWorker.ready;
icon: '/favicon.ico', await registration.showNotification('Tes Notifikasi', {
}); body: 'Notifikasi berhasil diterima oleh perangkat Anda.',
icon: '/favicon.ico',
});
} else {
new Notification('Tes Notifikasi', {
body: 'Notifikasi berhasil diterima oleh perangkat Anda.',
icon: '/favicon.ico',
});
}
toast.success('Notifikasi tes berhasil dikirim.'); toast.success('Notifikasi tes berhasil dikirim.');
} else if (perm.key === 'camera') { } else if (perm.key === 'camera') {
const stream = await navigator.mediaDevices.getUserMedia({ const stream = await navigator.mediaDevices.getUserMedia({