204 lines
6.1 KiB
TypeScript
204 lines
6.1 KiB
TypeScript
var isPushEnabled = false
|
|
|
|
declare var ServiceWorkerRegistration: any
|
|
declare var Notification: any
|
|
interface Navigator {
|
|
serviceWorker: any
|
|
}
|
|
|
|
function subscribeOnServer(subscription) {
|
|
console.log('Send subscription to server...')
|
|
console.log(subscription)
|
|
|
|
$.post('/api/notifications/subscribe', subscription).then(function(response) {
|
|
console.log(response)
|
|
})
|
|
}
|
|
|
|
function unsubscribeOnServer(subscription) {
|
|
console.log('Send unsubscription to server...')
|
|
console.log(subscription)
|
|
|
|
$.post('/api/notifications/unsubscribe', subscription).then(function(response) {
|
|
console.log(response)
|
|
})
|
|
}
|
|
|
|
function sendTestNotification() {
|
|
console.log('Sending test notification...')
|
|
|
|
$.get('/api/notifications/test').then(function(response) {
|
|
// ...
|
|
})
|
|
}
|
|
|
|
function subscribe() {
|
|
// Disable the button so it can't be changed while
|
|
// we process the permission request
|
|
let pushButton = <HTMLButtonElement> document.querySelector('.push-button')
|
|
|
|
if(pushButton)
|
|
pushButton.disabled = true
|
|
|
|
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
|
|
serviceWorkerRegistration.pushManager.subscribe({
|
|
userVisibleOnly: true
|
|
// applicationServerKey: new TextEncoder('binary').encode('BLxjquZGLvRnYGkV_xlkuAIilZzHJLDdGUZAmvq4pqev5uQHBmYRxJqfbFQFQn2kYfe5SRBwiNfuiakHn-3KR_k')
|
|
}).then(function(subscription) {
|
|
// The subscription was successful
|
|
isPushEnabled = true
|
|
if(pushButton) {
|
|
pushButton.textContent = 'Disable Notifications'
|
|
pushButton.disabled = false
|
|
}
|
|
|
|
let testButton = <HTMLButtonElement> document.querySelector('.test-notification')
|
|
|
|
if(testButton)
|
|
testButton.disabled = false
|
|
|
|
// TODO: Send the subscription.endpoint to your server
|
|
// and save it to send a push message at a later date
|
|
return subscribeOnServer(subscription)
|
|
}).catch(function(e) {
|
|
if(Notification.permission === 'denied') {
|
|
// The user denied the notification permission which
|
|
// means we failed to subscribe and the user will need
|
|
// to manually change the notification permission to
|
|
// subscribe to push messages
|
|
console.warn('Permission for Notifications was denied')
|
|
if(pushButton)
|
|
pushButton.disabled = true
|
|
} else {
|
|
// A problem occurred with the subscription common reasons
|
|
// include network errors, and lacking gcm_sender_id and/or
|
|
// gcm_user_visible_only in the manifest.
|
|
console.error('Unable to subscribe to push.', e)
|
|
if(pushButton) {
|
|
pushButton.disabled = false
|
|
pushButton.textContent = 'Enable Notifications'
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
function unsubscribe() {
|
|
let pushButton = <HTMLButtonElement> document.querySelector('.push-button')
|
|
|
|
if(pushButton)
|
|
pushButton.disabled = true
|
|
|
|
let testButton = <HTMLButtonElement> document.querySelector('.test-notification')
|
|
|
|
if(testButton)
|
|
testButton.disabled = true
|
|
|
|
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
|
|
// To unsubscribe from push messaging, you need get the
|
|
// subscription object, which you can call unsubscribe() on.
|
|
serviceWorkerRegistration.pushManager.getSubscription().then(function(pushSubscription) {
|
|
// Check we have a subscription to unsubscribe
|
|
if(!pushSubscription) {
|
|
// No subscription object, so set the state
|
|
// to allow the user to subscribe to push
|
|
isPushEnabled = false
|
|
if(pushButton) {
|
|
pushButton.disabled = false
|
|
pushButton.textContent = 'Enable Notifications'
|
|
}
|
|
return
|
|
}
|
|
|
|
unsubscribeOnServer(pushSubscription)
|
|
|
|
// We have a subscription, so call unsubscribe on it
|
|
pushSubscription.unsubscribe().then(function(successful) {
|
|
if(pushButton) {
|
|
pushButton.disabled = false
|
|
pushButton.textContent = 'Enable Notifications'
|
|
}
|
|
isPushEnabled = false
|
|
}).catch(function(e) {
|
|
// We failed to unsubscribe, this can lead to
|
|
// an unusual state, so may be best to remove
|
|
// the users data from your data store and
|
|
// inform the user that you have done so
|
|
|
|
console.log('Unsubscription error: ', e)
|
|
if(pushButton) {
|
|
pushButton.disabled = false
|
|
pushButton.textContent = 'Enable Notifications'
|
|
}
|
|
})
|
|
}).catch(function(e) {
|
|
console.error('Error thrown while unsubscribing from push messaging.', e)
|
|
})
|
|
})
|
|
}
|
|
|
|
// Once the service worker is registered set the initial state
|
|
function initialiseState(registration) {
|
|
console.log('Initialise state...')
|
|
console.log('Scope:', registration.scope)
|
|
|
|
// Are Notifications supported in the service worker?
|
|
if(!('showNotification' in ServiceWorkerRegistration.prototype)) {
|
|
console.warn('Notifications aren\'t supported.')
|
|
return
|
|
}
|
|
|
|
// Check the current Notification permission.
|
|
// If its denied, it's a permanent block until the
|
|
// user changes the permission
|
|
if(Notification.permission === 'denied') {
|
|
console.warn('The user has blocked notifications.')
|
|
return
|
|
}
|
|
|
|
// Check if push messaging is supported
|
|
if(!('PushManager' in window)) {
|
|
console.warn('Push messaging isn\'t supported.')
|
|
return
|
|
}
|
|
|
|
// We need the service worker registration to check for a subscription
|
|
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
|
|
console.log('Get subscription...')
|
|
|
|
// Do we already have a push message subscription?
|
|
serviceWorkerRegistration.pushManager.getSubscription().then(function(subscription) {
|
|
console.log('Enable Push UI...')
|
|
|
|
// Enable any UI which subscribes / unsubscribes from
|
|
// push messages.
|
|
let pushButton = <HTMLButtonElement> document.querySelector('.push-button')
|
|
|
|
if(pushButton)
|
|
pushButton.disabled = false
|
|
|
|
if(!subscription) {
|
|
// We aren't subscribed to push, so set UI
|
|
// to allow the user to enable push
|
|
return
|
|
}
|
|
|
|
// Keep your server in sync with the latest subscriptionId
|
|
subscribeOnServer(subscription)
|
|
|
|
// Set your UI to show they have subscribed for
|
|
// push messages
|
|
if(pushButton)
|
|
pushButton.textContent = 'Disable Notifications'
|
|
isPushEnabled = true
|
|
|
|
// Enable test notifications
|
|
let testButton = <HTMLButtonElement> document.querySelector('.test-notification')
|
|
|
|
if(testButton)
|
|
testButton.disabled = false
|
|
}).catch(function(err) {
|
|
console.warn('Error during getSubscription()', err)
|
|
})
|
|
})
|
|
} |