@ -69,12 +69,34 @@
< h2 class = "text-xl font-semibold" > Auto - detection < / h2 >
< p > Show results of auto - detection whether they ' re turned on < / p >
< button
@ click = "alertWebPushSubscription()"
class = "block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
Show Subscription from Web Push Server
< / button >
< button
@ click = "sendTestWebPushMessage()"
class = "block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
>
Send Myself a Test Web Push Message
< / button >
< / div >
< / section >
< / template >
< script lang = "ts" >
import axios from "axios" ;
import { Component , Vue } from "vue-facing-decorator" ;
import QuickNav from "@/components/QuickNav.vue" ;
import { db } from "@/db/index" ;
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings" ;
import { DEFAULT_PUSH_SERVER } from "@/constants/app" ;
/ / e s l i n t - d i s a b l e - n e x t - l i n e @ t y p e s c r i p t - e s l i n t / n o - v a r - r e q u i r e s
const Buffer = require ( "buffer/" ) . Buffer ;
interface Notification {
group : string ;
@ -86,5 +108,108 @@ interface Notification {
@ Component ( { components : { QuickNav } } )
export default class HelpNotificationsView extends Vue {
$notify ! : ( notification : Notification , timeout ? : number ) => void ;
subscription : PushSubscription | null = null ;
async mounted ( ) {
try {
const registration = await navigator . serviceWorker . ready ;
this . subscription = await registration . pushManager . getSubscription ( ) ;
} catch ( error ) {
console . error ( "Mount error:" , error ) ;
}
}
alertWebPushSubscription ( ) {
console . log (
"Web push subscription:" ,
JSON . parse ( JSON . stringify ( this . subscription ) ) , / / g i v e s m o r e i n f o t h a n p l a i n c o n s o l e l o g g i n g
) ;
alert ( JSON . stringify ( this . subscription ) ) ;
}
async sendTestWebPushMessage ( ) {
if ( ! this . subscription ) {
this . $notify (
{
group : "alert" ,
type : "danger" ,
title : "Not Subscribed" ,
text : "You must enable notifications before testing the web push." ,
} ,
- 1 ,
) ;
return ;
}
try {
await db . open ( ) ;
const settings = await db . settings . get ( MASTER_SETTINGS_KEY ) ;
let pushUrl : string = DEFAULT_PUSH_SERVER as string ;
if ( settings ? . webPushServer ) {
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
/ / 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" ;
const auth = Buffer . from ( this . subscription . getKey ( "auth" ) ) ;
const authB64 = auth
. toString ( "base64" )
. replace ( /\+/g , "-" )
. replace ( /\//g , "_" )
. replace ( /=+$/ , "" ) ;
const p256dh = Buffer . from ( this . subscription . getKey ( "p256dh" ) ) ;
const p256dhB64 = p256dh
. toString ( "base64" )
. replace ( /\+/g , "-" )
. replace ( /\//g , "_" )
. replace ( /=+$/ , "" ) ;
const newPayload = {
endpoint : this . subscription . endpoint ,
keys : {
auth : authB64 ,
p256dh : p256dhB64 ,
} ,
message : "This is a test message, hopefully triggered by you." ,
title : DIRECT_PUSH_TITLE ,
} ;
console . log ( "Sending a test web push message:" , newPayload ) ;
const payloadStr = JSON . stringify ( newPayload ) ;
const response = await axios . post (
pushUrl + "/web-push/send-test" ,
payloadStr ,
{
headers : {
"Content-Type" : "application/json" ,
} ,
} ,
) ;
console . log ( "Got response from web push server:" , response ) ;
this . $notify (
{
group : "alert" ,
type : "success" ,
title : "Test Web Push Sent" ,
text : "Check your device for the test web push message." ,
} ,
- 1 ,
) ;
} catch ( error ) {
console . error ( "Got an error sending test notification:" , error ) ;
this . $notify (
{
group : "alert" ,
type : "danger" ,
title : "Error Sending Test" ,
text : "Got an error sending the test web push notification." ,
} ,
- 1 ,
) ;
}
}
}
< / script >
