180 lines
4.9 KiB
HTML
180 lines
4.9 KiB
HTML
|
{% load static %}
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
|
|
<meta name="vapid-key" content="{{ vapid_key }}">
|
||
|
|
{% if user.id %}
|
||
|
|
<meta name="user_id" content="{{ user.id }}">
|
||
|
|
{% endif %}
|
||
|
|
<title>Web Push</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<form id="send-push__form">
|
||
|
|
<h3 class="header">Send a push notification</h3>
|
||
|
|
<p class="error"></p>
|
||
|
|
<input type="text" name="head" placeholder="Header: Your favorite airline 😍">
|
||
|
|
<textarea name="body" id="" cols="30" rows="10" placeholder="Body: Your flight has been cancelled 😱😱😱"></textarea>
|
||
|
|
<button>Send Me</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const registerSw = async () => {
|
||
|
|
if ('serviceWorker' in navigator) {
|
||
|
|
const reg = await navigator.serviceWorker.register('sw.js');
|
||
|
|
initialiseState(reg)
|
||
|
|
|
||
|
|
} else {
|
||
|
|
showNotAllowed("You can't send push notifications ☹️😢")
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const initialiseState = (reg) => {
|
||
|
|
if (!reg.showNotification) {
|
||
|
|
showNotAllowed('Showing notifications isn\'t supported ☹️😢');
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (Notification.permission === 'denied') {
|
||
|
|
showNotAllowed('You prevented us from showing notifications ☹️🤔');
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!'PushManager' in window) {
|
||
|
|
showNotAllowed("Push isn't allowed in your browser 🤔");
|
||
|
|
return
|
||
|
|
}
|
||
|
|
subscribe(reg);
|
||
|
|
}
|
||
|
|
|
||
|
|
const showNotAllowed = (message) => {
|
||
|
|
const button = document.querySelector('form>button');
|
||
|
|
button.innerHTML = `${message}`;
|
||
|
|
button.setAttribute('disabled', 'true');
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
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);
|
||
|
|
const outputData = outputArray.map((output, index) => rawData.charCodeAt(index));
|
||
|
|
|
||
|
|
return outputData;
|
||
|
|
}
|
||
|
|
|
||
|
|
const subscribe = async (reg) => {
|
||
|
|
const subscription = await reg.pushManager.getSubscription();
|
||
|
|
if (subscription) {
|
||
|
|
sendSubData(subscription);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const vapidMeta = document.querySelector('meta[name="vapid-key"]');
|
||
|
|
const key = vapidMeta.content;
|
||
|
|
const options = {
|
||
|
|
userVisibleOnly: true,
|
||
|
|
// if key exists, create applicationServerKey property
|
||
|
|
...(key && {applicationServerKey: urlB64ToUint8Array(key)})
|
||
|
|
};
|
||
|
|
|
||
|
|
const sub = await reg.pushManager.subscribe(options);
|
||
|
|
sendSubData(sub)
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const sendSubData = async (subscription) => {
|
||
|
|
const browser = navigator.userAgent.match(/(firefox|msie|chrome|safari|trident)/ig)[0].toLowerCase();
|
||
|
|
const data = {
|
||
|
|
status_type: 'subscribe',
|
||
|
|
subscription: subscription.toJSON(),
|
||
|
|
browser: browser,
|
||
|
|
};
|
||
|
|
|
||
|
|
const res = await fetch('/webpush/save_information', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify(data),
|
||
|
|
headers: {
|
||
|
|
'content-type': 'application/json'
|
||
|
|
},
|
||
|
|
credentials: "include"
|
||
|
|
});
|
||
|
|
|
||
|
|
handleResponse(res);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleResponse = (res) => {
|
||
|
|
console.log(res.status);
|
||
|
|
};
|
||
|
|
|
||
|
|
registerSw();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const pushForm = document.getElementById('send-push__form');
|
||
|
|
const errorMsg = document.querySelector('.error');
|
||
|
|
|
||
|
|
pushForm.addEventListener('submit', async function (e) {
|
||
|
|
e.preventDefault();
|
||
|
|
const input = this[0];
|
||
|
|
const textarea = this[1];
|
||
|
|
const button = this[2];
|
||
|
|
errorMsg.innerText = '';
|
||
|
|
|
||
|
|
const head = input.value;
|
||
|
|
const body = textarea.value;
|
||
|
|
const meta = document.querySelector('meta[name="user_id"]');
|
||
|
|
const id = meta ? meta.content : null;
|
||
|
|
|
||
|
|
if (head && body && id) {
|
||
|
|
button.innerText = 'Sending...';
|
||
|
|
button.disabled = true;
|
||
|
|
|
||
|
|
const res = await fetch('/send_push', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify({head, body, id}),
|
||
|
|
headers: {
|
||
|
|
'content-type': 'application/json'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (res.status === 200) {
|
||
|
|
button.innerText = 'Send another 😃!';
|
||
|
|
button.disabled = false;
|
||
|
|
input.value = '';
|
||
|
|
textarea.value = '';
|
||
|
|
} else {
|
||
|
|
errorMsg.innerText = res.message;
|
||
|
|
button.innerText = 'Something broke 😢.. Try again?';
|
||
|
|
button.disabled = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
let error;
|
||
|
|
if (!head || !body){
|
||
|
|
error = 'Please ensure you complete the form 🙏🏾'
|
||
|
|
}
|
||
|
|
else if (!id){
|
||
|
|
error = "Are you sure you're logged in? 🤔. Make sure! 👍🏼"
|
||
|
|
}
|
||
|
|
errorMsg.innerText = error;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|