141 lines
4.0 KiB
JavaScript
141 lines
4.0 KiB
JavaScript
//Service Worker Registration
|
|
let isSubscribed = false;
|
|
let swRegistration = null;
|
|
const applicationServerPublicKey = 'BHTLd76Yura3OIkZ52f4qh3G_i8RY3kvyOooVJXFVGle04JNW4d3JvwYQJ1JOZ9Y_uuZFsB_URqrlHQFhQ01V6M';
|
|
/*
|
|
Make sure that we support service worker :)
|
|
*/
|
|
|
|
|
|
if('serviceWorker' in navigator){
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker
|
|
.register('/serviceWorkerCachedWebpags.js')
|
|
.then(reg => {
|
|
console.log("Service Worker registered")
|
|
swRegistration = reg;
|
|
|
|
var serviceworker;
|
|
|
|
if (reg.installing)
|
|
serviceworker = reg.installing;
|
|
else if (reg.waiting)
|
|
serviceworker = reg.waiting;
|
|
else if (reg.active)
|
|
serviceworker = reg.active;
|
|
|
|
initializeUI();
|
|
|
|
if (serviceworker) {
|
|
console.log("sw current state", serviceworker.state);
|
|
if (serviceworker.state == "activated") {
|
|
subscribeUser();
|
|
}
|
|
else {
|
|
serviceworker.addEventListener("statechange", function (e) {
|
|
console.log("service worker statechange: ", e.target.state);
|
|
if (e.target.state == "activated") {
|
|
subscribeUser(reg);
|
|
initializeUI();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch(err => console.log(`Service Worker error: ${err}`))
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
Notification.requestPermission().then(function(permission){
|
|
console.log('Notification ', permission)
|
|
});
|
|
|
|
|
|
if('caches' in window){
|
|
console.log("The browser supports caching ")
|
|
}else {
|
|
console.log("This browser is some junk, it dosen't support caching :(")
|
|
}
|
|
|
|
|
|
|
|
//Push Notifications
|
|
const urlB64ToUint8Array = base64String => {
|
|
const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
|
|
const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
|
|
const rawData = atob(base64)
|
|
const outputArray = new Uint8Array(rawData.length)
|
|
for (let i = 0; i < rawData.length; ++i) {
|
|
outputArray[i] = rawData.charCodeAt(i)
|
|
}
|
|
return outputArray
|
|
}
|
|
|
|
function subscribeUser(reg) {
|
|
const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
|
|
reg.pushManager.subscribe({
|
|
userVisibleOnly: true,
|
|
applicationServerKey: applicationServerKey
|
|
})
|
|
.then(function(subscription) {
|
|
console.log('User is subscribed.');
|
|
|
|
updateSubscriptionOnServer(subscription);
|
|
|
|
isSubscribed = true;
|
|
|
|
})
|
|
.catch(function(err) {
|
|
console.log('Failed to subscribe the user: ', err);
|
|
});
|
|
}
|
|
|
|
|
|
function updateSubscriptionOnServer(subscription) {
|
|
storePushSubscription(subscription);
|
|
console.log(JSON.stringify(subscription));
|
|
}
|
|
|
|
|
|
function initializeUI() {
|
|
// Set the initial subscription value
|
|
swRegistration.pushManager.getSubscription()
|
|
.then(function(subscription) {
|
|
isSubscribed = !(subscription === null);
|
|
|
|
if (isSubscribed) {
|
|
console.log('User IS subscribed.');
|
|
} else {
|
|
console.log('User is NOT subscribed.');
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
|
|
function storePushSubscription(pushSubscription) {
|
|
const token = document.querySelector('meta[name=csrf-token]').getAttribute('content');
|
|
|
|
fetch('/push', {
|
|
method: 'POST',
|
|
body: JSON.stringify(pushSubscription),
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-Token': token
|
|
}
|
|
})
|
|
.then((res) => {
|
|
return res.json();
|
|
})
|
|
.then((res) => {
|
|
console.log(res)
|
|
})
|
|
.catch((err) => {
|
|
console.log(err)
|
|
});
|
|
}
|