@ -22,10 +22,16 @@
< / div >
< div >
< p > Here are thing s to get notifications working . < / p >
< p > Here are way s to get notifications working . < / p >
< h2 class = "text-xl font-semibold" > Test < / h2 >
< p > Somehow call the service - worker self . showNotification < / p >
< button
@ click = "showTestNotification()"
class = "block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
See a Test Notification
< / button >
< h2 class = "text-xl font-semibold" > Check OS - level permissions < / h2 >
< div >
@ -150,7 +156,7 @@ export default class HelpNotificationsView extends Vue {
pushUrl = settings . webPushServer ;
}
/ / T h i s s h o u l d b e a c o n s t a n t s h a r e d w i t h t h e s e r v i c e w o r k e r . S e e T E S T _ P U S H _ T I T L E i n a d d i t i o n a l - s c r i p t s . j s
/ / T h i s i s s h a r e d w i t h t h e s e r v i c e w o r k e r a n d s h o u l d b e a c o n s t a n t . L o o k f o r t h e s a m e n a m e i n a d d i t i o n a l - s c r i p t s . j s
/ / U s e s o m e t h i n g o t h e r t h a n " D a i l y U p d a t e " h t t p s : / / g i t e a . a n o m a l i s t d e s i g n . c o m / t r e n t _ l a r s o n / p y - p u s h - s e r v e r / s r c / c o m m i t / 3 c 0 e 1 9 6 c 1 1 b c 9 8 0 6 0 e c 5 9 3 4 e 9 9 e 7 d b d 5 9 1 b 5 d a 4 d / a p p . p y # L 2 1 3
const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION" ;
@ -172,7 +178,7 @@ export default class HelpNotificationsView extends Vue {
auth : authB64 ,
p256dh : p256dhB64 ,
} ,
message : "This is a test message, hopefully triggered by you." ,
message : "This is a test message, triggered by you." ,
title : DIRECT_PUSH_TITLE ,
} ;
console . log ( "Sending a test web push message:" , newPayload ) ;
@ -211,5 +217,37 @@ export default class HelpNotificationsView extends Vue {
) ;
}
}
showTestNotification ( ) {
navigator . serviceWorker . ready
. then ( ( registration ) => {
return registration . showNotification ( "It Worked" , {
body : "This is your test notification." ,
} ) ;
} )
. then ( ( ) => {
this . $notify (
{
group : "alert" ,
type : "success" ,
title : "Sent" ,
text : "A notification was triggered, so one should show on your device soon." ,
} ,
5000 ,
) ;
} )
. catch ( ( error ) => {
console . error ( "Got a notification error:" , error ) ;
this . $notify (
{
group : "alert" ,
type : "danger" ,
title : "Failed" ,
text : "Got an error sending a notification." ,
} ,
- 1 ,
) ;
} ) ;
}
}
< / script >