-
Notifications
You must be signed in to change notification settings - Fork 103
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Auto Subscription #69
Comments
Try this modified webpush.js file, which just puts the click code in the window load event, and sets the display of the button set as none. Just put the django template code for the button in some partially hidden place, such as a drop-down menu, to allow for the button to be properly hidden. Certainly not the best or most elegant solution, but a quick solution for your needs. // Based On https://github.com/chrisdavidmills/push-api-demo/blob/283df97baf49a9e67705ed08354238b83ba7e9d3/main.js
var isPushEnabled = false,
subBtn,
messageBox,
registration;
window.addEventListener('load', function() {
subBtn = document.getElementById('webpush-subscribe-button');
messageBox = document.getElementById('webpush-message');
subBtn.style.display = 'none';
subBtn.disabled = true;
if (isPushEnabled) {
return unsubscribe()
}
// Do everything if the Browser Supports Service Worker
if ('serviceWorker' in navigator) {
var serviceWorker = document.querySelector('meta[name="service-worker-js"]').content;
navigator.serviceWorker.register(serviceWorker)
.then(
function(reg) {
subBtn.textContent = 'Loading....';
registration = reg;
initialiseState(reg);
}
);
}
// If service worker not supported, show warning to the message box
else {
messageBox.textContent = 'Service Worker is not supported in your Browser!';
messageBox.style.display = 'block';
}
// Once the service worker is registered set the initial state
function initialiseState(reg) {
// Are Notifications supported in the service worker?
if (!(reg.showNotification)) {
// Show a message and activate the button
messageBox.textContent = 'Showing Notification is not suppoted in your browser';
subBtn.textContent = 'Subscribe to Push Messaging';
messageBox.style.display = 'block';
return;
}
// Check the current Notification permission.
// If its denied, it's a permanent block until the
// user changes the permission
if (Notification.permission === 'denied') {
// Show a message and activate the button
messageBox.textContent = 'The Push Notification is blocked from your browser.';
subBtn.textContent = 'Subscribe to Push Messaging';
subBtn.disabled = false;
messageBox.style.display = 'block';
return;
}
// Check if push messaging is supported
if (!('PushManager' in window)) {
// Show a message and activate the button
messageBox.textContent = 'Push Notification is not available in the browser';
subBtn.textContent = 'Subscribe to Push Messaging';
subBtn.disabled = false;
messageBox.style.display = 'block';
return;
}
// We need to subscribe for push notification and send the information to server
subscribe(reg)
}
}
);
function subscribe(reg) {
// Get the Subscription or register one
getSubscription(reg).then(
function(subscription) {
postSubscribeObj('subscribe',subscription);
}
)
.catch(
function(error) {
console.log('Subscription error.', error)
}
)
}
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
function getSubscription(reg) {
return reg.pushManager.getSubscription().then(
function(subscription) {
var metaObj, applicationServerKey, options;
// Check if Subscription is available
if (subscription) {
return subscription;
}
metaObj = document.querySelector('meta[name="django-webpush-vapid-key"]');
applicationServerKey = metaObj.content;
options = {
userVisibleOnly: true
};
if (applicationServerKey){
options.applicationServerKey = urlB64ToUint8Array(applicationServerKey)
}
// If not, register one
return registration.pushManager.subscribe(options)
}
)
}
function unsubscribe() {
// Get the Subscription to unregister
registration.pushManager.getSubscription()
.then(
function(subscription) {
// Check we have a subscription to unsubscribe
if (!subscription) {
// No subscription object, so set the state
// to allow the user to subscribe to push
subBtn.disabled = false;
messageBox.textContent = 'Subscription is not available';
messageBox.style.display = 'block';
return;
}
postSubscribeObj('unsubscribe', subscription);
}
)
}
function postSubscribeObj(statusType, subscription) {
// Send the information to the server with fetch API.
// the type of the request, the name of the user subscribing,
// and the push subscription endpoint + key the server needs
// to send push messages
var browser = navigator.userAgent.match(/(firefox|msie|chrome|safari|trident)/ig)[0].toLowerCase(),
data = { status_type: statusType,
subscription: subscription.toJSON(),
browser: browser,
group: subBtn.dataset.group
};
fetch(subBtn.dataset.url, {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data),
credentials: 'include'
})
.then(
function(response) {
// Check the information is saved successfully into server
if ((response.status == 201) && (statusType == 'subscribe')) {
// Show unsubscribe button instead
subBtn.textContent = 'Unsubscribe to Push Messaging';
subBtn.disabled = false;
isPushEnabled = true;
messageBox.textContent = 'Successfully subscribed for Push Notification';
messageBox.style.display = 'block';
}
// Check if the information is deleted from server
if ((response.status == 202) && (statusType == 'unsubscribe')) {
// Get the Subscription
getSubscription(registration)
.then(
function(subscription) {
// Remove the subscription
subscription.unsubscribe()
.then(
function(successful) {
subBtn.textContent = 'Subscribe to Push Messaging';
messageBox.textContent = 'Successfully unsubscribed for Push Notification';
messageBox.style.display = 'block';
isPushEnabled = false;
subBtn.disabled = false;
}
)
}
)
.catch(
function(error) {
subBtn.textContent = 'Unsubscribe to Push Messaging';
messageBox.textContent = 'Error during unsubscribe from Push Notification';
messageBox.style.display = 'block';
subBtn.disabled = false;
}
);
}
}
)
} |
this one is the modified
|
How to subscribe every user automatically without clicking the subscribe button and need to disable the button
The text was updated successfully, but these errors were encountered: