Regatten.net/RegattenApp
1
0
Fork 0
Code Issues 40 Pull Requests Actions Packages Projects Releases Wiki Activity

Can subscribe to pushes

Browse Source
This commit is contained in:
Timon Ostertun
2020-09-27 14:35:25 +02:00
parent 2bf623733d
commit a92dc45bb7
4 changed files with 262 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/scripts/pwa.js.php
View File

@@ -7,9 +7,11 @@
?> ?>
//Loading the Service Worker //Loading the Service Worker
var swRegistration = null;
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', function() { window.addEventListener('load', async function() {
navigator.serviceWorker.register('<?php echo SERVER_ADDR; ?>/service-worker.js.php'); swRegistration = await navigator.serviceWorker.register('<?php echo SERVER_ADDR; ?>/service-worker.js.php');
if (typeof onServiceWorkerLoaded === 'function') onServiceWorkerLoaded();
}); });
} }

175
client/scripts/regatten.js.php
View File

@@ -11,6 +11,7 @@ const BOATCLASS = '<?php echo BOATCLASS; ?>';
const LINK_PRE = '<?php echo SERVER_ADDR; ?>/'; const LINK_PRE = '<?php echo SERVER_ADDR; ?>/';
const YOUTH_AGE = '<?php echo $_CLASS['youth-age']; ?>'; const YOUTH_AGE = '<?php echo $_CLASS['youth-age']; ?>';
const YOUTH_GERMAN_NAME = '<?php echo $_CLASS['youth-german-name']; ?>'; const YOUTH_GERMAN_NAME = '<?php echo $_CLASS['youth-german-name']; ?>';
const PUSH_SERVER_KEY = '<?php echo PUSH_SERVER_KEY; ?>';
var randomId = function() { return '_' + Math.random().toString(36).substr(2, 9); } var randomId = function() { return '_' + Math.random().toString(36).substr(2, 9); }
@@ -219,6 +220,166 @@ function resetCache() {
toastInfo('The serviceWorker and the cache were deleted. A new serviceWorker will be generated on the next refresh.'); toastInfo('The serviceWorker and the cache were deleted. A new serviceWorker will be generated on the next refresh.');
} }
var pushesPossible = false;
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 (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
function pushesSubscribe() {
console.log('Subscribing');
const applicationServerKey = urlB64ToUint8Array(PUSH_SERVER_KEY);
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerKey
})
.then(function(subscription) {
pushesUpdateServerSubscription(subscription, true);
updatePushSwitches();
updatePushBadge();
})
.catch(function(err) {
console.log('Failed to subscribe the user: ', err);
toastError('Da ist leider etwas schief gelaufen. Bitte stelle sicher, dass Du mit dem Internet verbunden bist und versuche es erneut.', 5000);
pushesUnSubscribe(true);
});
}
function pushesUnSubscribe(silent = false) {
console.log('Unsubscribing');
swRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
pushesUpdateServerSubscription(subscription, false);
subscription.unsubscribe();
$('#menu-pushes').hideMenu();
updatePushBadge();
hideLoader();
}
})
.catch(function(error) {
console.log('Error unsubscribing', error);
$('#menu-pushes').hideMenu();
if (!silent) toastError('Da ist leider etwas schief gelaufen. Bitte versuche es erneut oder wende Dich an unseren Support.', 5000);
updatePushBadge();
hideLoader();
});
}
function pushesUpdateServerSubscription(subscription, enabled) {
console.log('updateServer', enabled, subscription);
$.ajax({
url: QUERY_URL + (enabled ? 'add' : 'remove') + '_subscription',
type: 'POST',
data: { subscription: JSON.stringify(subscription) },
success: function (data, textStatus, jqXHR) {
if (!enabled) {
toastOk('Du erhältst ab sofort keine Benachrichtigungen mehr von uns.');
}
hideLoader();
},
error: function (jqXHR, textStatus, errorThrown) {
throw 'Cannot update server subscription';
}
});
}
function initPushSettings() {
var items = [
['regatten_app_' + BOATCLASS + '_notify_channel_news', true],
['regatten_app_' + BOATCLASS + '_notify_channel_regatta_changed_my', true],
['regatten_app_' + BOATCLASS + '_notify_channel_regatta_changed_all', false],
['regatten_app_' + BOATCLASS + '_notify_channel_result_ready_my', true],
['regatten_app_' + BOATCLASS + '_notify_channel_result_ready_all', true],
['regatten_app_' + BOATCLASS + '_notify_channel_meldeschluss', true]
];
for (var i in items) {
var item = items[i];
if (localStorage.getItem(item[0]) === null) localStorage.setItem(item[0], item[1]);
}
}
function updatePushSwitches() {
$('#switch-pushes-news').prop('checked', 'true' == localStorage.getItem('regatten_app_' + BOATCLASS + '_notify_channel_news'));
$('#switch-pushes-regatta-changed-my').prop('checked', 'true' == localStorage.getItem('regatten_app_' + BOATCLASS + '_notify_channel_regatta_changed_my'));
$('#switch-pushes-regatta-changed-all').prop('checked', 'true' == localStorage.getItem('regatten_app_' + BOATCLASS + '_notify_channel_regatta_changed_all'));
$('#switch-pushes-result-ready-my').prop('checked', 'true' == localStorage.getItem('regatten_app_' + BOATCLASS + '_notify_channel_result_ready_my'));
$('#switch-pushes-result-ready-all').prop('checked', 'true' == localStorage.getItem('regatten_app_' + BOATCLASS + '_notify_channel_result_ready_all'));
$('#switch-pushes-meldeschluss').prop('checked', 'true' == localStorage.getItem('regatten_app_' + BOATCLASS + '_notify_channel_meldeschluss'));
if ($('#switch-pushes').prop('checked')) {
$('#p-pushes-info').show();
$('.a-switch-pushes-channel').show();
} else {
$('#p-pushes-info').hide();
$('.a-switch-pushes-channel').hide();
}
}
function pushesSubscribeClicked() {
showLoader();
if ($('#switch-pushes').prop('checked')) {
pushesSubscribe();
} else {
pushesUnSubscribe();
}
}
function pushesChannelClicked() {
localStorage.setItem('regatten_app_' + BOATCLASS + '_notify_channel_news', $('#switch-pushes-news').prop('checked'));
localStorage.setItem('regatten_app_' + BOATCLASS + '_notify_channel_regatta_changed_my', $('#switch-pushes-regatta-changed-my').prop('checked'));
localStorage.setItem('regatten_app_' + BOATCLASS + '_notify_channel_regatta_changed_all', $('#switch-pushes-regatta-changed-all').prop('checked'));
localStorage.setItem('regatten_app_' + BOATCLASS + '_notify_channel_result_ready_my', $('#switch-pushes-result-ready-my').prop('checked'));
localStorage.setItem('regatten_app_' + BOATCLASS + '_notify_channel_result_ready_all', $('#switch-pushes-result-ready-all').prop('checked'));
localStorage.setItem('regatten_app_' + BOATCLASS + '_notify_channel_meldeschluss', $('#switch-pushes-meldeschluss').prop('checked'));
}
function pushesOpenMenu() {
$('#menu-settings').hideMenu();
if (!pushesPossible) {
toastWarn('Dein Browser unterst&uuml;tzt leider keine Benachrichtigungen.', 5000);
return;
}
if (Notification.permission == 'denied') {
toastWarn('Benachrichtigungen werden von Deinem Browser blockiert.', 5000);
return;
}
swRegistration.pushManager.getSubscription().then(function(subscription) {
var isSub = (subscription !== null);
$('#switch-pushes').prop('checked', isSub);
updatePushSwitches();
$('#menu-pushes').showMenu();
});
}
function updatePushBadge() {
if (!pushesPossible) return;
if (Notification.permission == 'denied') {
$('#badge-pushes').removeClass('bg-green2-dark').addClass('bg-red2-dark').text('BLOCKED');
return;
}
swRegistration.pushManager.getSubscription().then(function(subscription) {
var isSub = (subscription !== null);
if (isSub) {
$('#badge-pushes').removeClass('bg-red2-dark').addClass('bg-green2-dark').text('AN');
} else {
$('#badge-pushes').removeClass('bg-green2-dark').addClass('bg-red2-dark').text('AUS');
}
});
}
var initRegatten = function() { var initRegatten = function() {
showLoader(); showLoader();
@@ -235,4 +396,18 @@ var initRegatten = function() {
$('.show-loggedin').hide(); $('.show-loggedin').hide();
$('.show-notloggedin').show(); $('.show-notloggedin').show();
} }
// Pushes
initPushSettings();
$('#a-switch-pushes').click(pushesSubscribeClicked);
$('.a-switch-pushes-channel').click(pushesChannelClicked);
}
var onServiceWorkerLoaded = function() {
if (swRegistration !== null) {
pushesPossible = true;
updatePushBadge();
} else {
$('#badge-pushes').removeClass('bg-green2-dark').addClass('bg-red2-dark').text('NOT SUPPORTED');
}
} }

3
server/config_example.php
View File

@@ -12,6 +12,9 @@
define('QUERY_URL', 'http://' . $_SERVER['SERVER_NAME'] . '/api/' . BOATCLASS . '/'); // url to api backend define('QUERY_URL', 'http://' . $_SERVER['SERVER_NAME'] . '/api/' . BOATCLASS . '/'); // url to api backend
define('LOGGING_APIKEY', 'xxx'); // Apikey for Logging API -> get from ostertun.net/logging define('LOGGING_APIKEY', 'xxx'); // Apikey for Logging API -> get from ostertun.net/logging
// PUSH
define('PUSH_SERVER_KEY', '');
// BOAT CLASS // BOAT CLASS
$_CLASS = array( $_CLASS = array(
'name' => 'Pirat', 'name' => 'Pirat',

83
server/page/menus.php
View File

@@ -92,7 +92,7 @@
</div> </div>
</div> </div>
<div id="menu-settings" class="menu menu-box-bottom menu-box-detached rounded-m" data-menu-height="270"> <div id="menu-settings" class="menu menu-box-bottom menu-box-detached rounded-m" data-menu-height="310">
<div class="menu-title"><h1>Einstellungen</h1><p class="color-highlight">&nbsp;</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div> <div class="menu-title"><h1>Einstellungen</h1><p class="color-highlight">&nbsp;</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
<div class="divider divider-margins mb-n2"></div> <div class="divider divider-margins mb-n2"></div>
<div class="content"> <div class="content">
@@ -110,7 +110,7 @@
<span>Login</span> <span>Login</span>
<i class="fa fa-angle-right"></i> <i class="fa fa-angle-right"></i>
</a> </a>
<a href="#" data-menu="menu-signup" class="show-notloggedin border-0"> <a href="#" data-menu="menu-signup" class="show-notloggedin">
<i class="fa font-14 fa-user-plus rounded-s bg-highlight color-white"></i> <i class="fa font-14 fa-user-plus rounded-s bg-highlight color-white"></i>
<span>Registrieren</span> <span>Registrieren</span>
<span class="badge bg-red2-dark color-white">FREE</span> <span class="badge bg-red2-dark color-white">FREE</span>
@@ -120,11 +120,88 @@
<span>Account</span> <span>Account</span>
<i class="fa fa-angle-right"></i> <i class="fa fa-angle-right"></i>
</a> </a>
<a href="#" onclick="logout();" class="show-loggedin border-0"> <a href="#" onclick="logout();" class="show-loggedin">
<i class="fa font-14 fa-sign-out-alt rounded-s bg-highlight color-white"></i> <i class="fa font-14 fa-sign-out-alt rounded-s bg-highlight color-white"></i>
<span>Logout</span> <span>Logout</span>
<i class="fa fa-angle-right"></i> <i class="fa fa-angle-right"></i>
</a> </a>
<a href="#" onclick="pushesOpenMenu()" class="border-0">
<i class="fa font-14 fa-bell rounded-s bg-highlight color-white"></i>
<span>Benachrichtigungen</span>
<span id="badge-pushes" class="badge color-white"></span>
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
<div id="menu-pushes" class="menu menu-box-bottom menu-box-detached rounded-m" data-menu-height="500">
<div class="menu-title"><h1>Benachrichtigungen</h1><p class="color-highlight">Bleibe immer auf dem aktuellen Stand</p><a href="#" class="close-menu"><i class="fa fa-times"></i></a></div>
<div class="divider divider-margins mb-n2"></div>
<div class="content">
<div class="list-group list-custom-small">
<a id="a-switch-pushes" href="#" data-trigger-switch="switch-pushes" class="pb-2">
<i class="fa font-14 fa-bell rounded-s bg-highlight color-white"></i>
<span>Benachrichtigungen aktivieren</span>
<div class="custom-control scale-switch ios-switch">
<input type="checkbox" class="ios-input" id="switch-pushes">
<label class="custom-control-label" for="switch-pushes"></label>
</div>
</a>
<div class="divider"></div>
<p style="line-height: 1.5em;" id="p-pushes-info">
W&auml;hle hier, &uuml;ber was Du informiert werden m&ouml;chtest.<br>
(meine) bezieht sich auf die Regatten, die in Deiner Saison-Planung sind,<br>
(alle) informiert Dich &uuml;ber alle Regatten
</p>
<a href="#" data-trigger-switch="switch-pushes-news" class="pb-2 a-switch-pushes-channel">
<i class="fa font-14 fa-newspaper rounded-s bg-highlight color-white"></i>
<span>Neuigkeiten</span>
<div class="custom-control scale-switch ios-switch">
<input type="checkbox" class="ios-input" id="switch-pushes-news">
<label class="custom-control-label" for="switch-pushes-news"></label>
</div>
</a>
<a href="#" data-trigger-switch="switch-pushes-regatta-changed-my" class="pb-2 a-switch-pushes-channel">
<i class="fa font-14 fa-calendar-check rounded-s bg-highlight color-white"></i>
<span>Regatta verschoben (meine)</span>
<div class="custom-control scale-switch ios-switch">
<input type="checkbox" class="ios-input" id="switch-pushes-regatta-changed-my">
<label class="custom-control-label" for="switch-pushes-regatta-changed-my"></label>
</div>
</a>
<a href="#" data-trigger-switch="switch-pushes-regatta-changed-all" class="pb-2 a-switch-pushes-channel">
<i class="fa font-14 fa-calendar-check rounded-s bg-highlight color-white"></i>
<span>Regatta verschoben (alle)</span>
<div class="custom-control scale-switch ios-switch">
<input type="checkbox" class="ios-input" id="switch-pushes-regatta-changed-all">
<label class="custom-control-label" for="switch-pushes-regatta-changed-all"></label>
</div>
</a>
<a href="#" data-trigger-switch="switch-pushes-result-ready-my" class="pb-2 a-switch-pushes-channel">
<i class="fa font-14 fa-poll rounded-s bg-highlight color-white"></i>
<span>Ergebnisse verf&uuml;gbar (meine)</span>
<div class="custom-control scale-switch ios-switch">
<input type="checkbox" class="ios-input" id="switch-pushes-result-ready-my">
<label class="custom-control-label" for="switch-pushes-result-ready-my"></label>
</div>
</a>
<a href="#" data-trigger-switch="switch-pushes-result-ready-all" class="pb-2 a-switch-pushes-channel">
<i class="fa font-14 fa-poll rounded-s bg-highlight color-white"></i>
<span>Ergebnisse verf&uuml;gbar (alle)</span>
<div class="custom-control scale-switch ios-switch">
<input type="checkbox" class="ios-input" id="switch-pushes-result-ready-all">
<label class="custom-control-label" for="switch-pushes-result-ready-all"></label>
</div>
</a>
<a href="#" data-trigger-switch="switch-pushes-meldeschluss" class="pb-2 a-switch-pushes-channel">
<i class="fa font-14 fa-file-signature rounded-s bg-highlight color-white"></i>
<span>Melde-Erinnerungen</span>
<div class="custom-control scale-switch ios-switch">
<input type="checkbox" class="ios-input" id="switch-pushes-meldeschluss">
<label class="custom-control-label" for="switch-pushes-meldeschluss"></label>
</div>
</a>
</div> </div>
</div> </div>
</div> </div>