You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
6.7 KiB
159 lines
6.7 KiB
let isPushEnabled = false;
|
|
let registration;
|
|
let pushButton;
|
|
window.addEventListener('load', function() {
|
|
pushButton = document.querySelector('.js-push-toggle');
|
|
if(pushButton !== undefined){
|
|
pushButton.addEventListener('change', function() {
|
|
document.querySelector('.label-text').textContent = this.checked ? 'Disable Push Messages' : 'Enable Push Messages';
|
|
if (isPushEnabled) {
|
|
unsubscribe();
|
|
} else {
|
|
subscribe();
|
|
}
|
|
});
|
|
}
|
|
// Check that service workers are supported, if so, progressively
|
|
// enhance and add push messaging support, otherwise continue without it.
|
|
if ('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/service-worker.js')
|
|
.then(initialiseState);
|
|
} else {
|
|
console.warn('Service workers aren\'t supported in this browser.');
|
|
}
|
|
});
|
|
|
|
function initialiseState() {
|
|
// 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) {
|
|
// Do we already have a push message subscription?
|
|
registration = serviceWorkerRegistration;
|
|
serviceWorkerRegistration.pushManager.getSubscription()
|
|
.then(function(subscription) {
|
|
// Enable any UI which subscribes / unsubscribes from
|
|
// push messages.
|
|
//var pushButton = document.querySelector('.js-push-toggle');
|
|
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
|
|
//sendSubscriptionToServer(subscription);
|
|
|
|
// Set your UI to show they have subscribed for
|
|
// push messages
|
|
document.querySelector('.label-text').text = 'Disable Push Messages';
|
|
isPushEnabled = true;
|
|
})
|
|
.catch(function(err) {
|
|
console.warn('Error during getSubscription()', err);
|
|
});
|
|
});
|
|
}
|
|
|
|
function subscribe() {
|
|
// Disable the button so it can't be changed while
|
|
// we process the permission request
|
|
var pushButton = document.querySelector('.js-push-toggle');
|
|
pushButton.disabled = true;
|
|
|
|
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
|
|
serviceWorkerRegistration.pushManager.subscribe()
|
|
.then(function(subscription) {
|
|
// The subscription was successful
|
|
isPushEnabled = true;
|
|
pushButton.textContent = 'Disable Push Messages';
|
|
pushButton.disabled = false;
|
|
|
|
// TODO: Send the subscription.endpoint to your server
|
|
// and save it to send a push message at a later date
|
|
return sendSubscriptionToServer(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');
|
|
//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);
|
|
pushButton.disabled = false;
|
|
document.querySelector('.label-text').text = 'Enable Push Messages';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function unsubscribe() {
|
|
var pushButton = document.querySelector('.js-push-toggle');
|
|
pushButton.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;
|
|
pushButton.disabled = false;
|
|
document.querySelector('.label-text').text = 'Enable Push Messages';
|
|
return;
|
|
}
|
|
|
|
var subscriptionId = pushSubscription.subscriptionId;
|
|
// TODO: Make a request to your server to remove
|
|
// the subscriptionId from your data store so you
|
|
// don't attempt to send them push messages anymore
|
|
|
|
// We have a subscription, so call unsubscribe on it
|
|
pushSubscription.unsubscribe().then(function(successful) {
|
|
pushButton.disabled = false;
|
|
document.querySelector('.label-text').text = 'Enable Push Messages';
|
|
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);
|
|
pushButton.disabled = false;
|
|
document.querySelector('.label-text').text = 'Enable Push Messages';
|
|
});
|
|
}).catch(function(e) {
|
|
console.error('Error thrown while unsubscribing from push messaging.', e);
|
|
});
|
|
});
|
|
}
|