Push Notifications (Mobile and PC) (#13277)

* Update manifest and add service worker
cleanup icons a bit

* Push notifications WIP

* navigate working

* cleanup

* acknowledge wired up

* Set VAPID keys on composer install

* Component to control notification permissions.

* Allow all user option to validate

* Enable on browser load if transport exists.

* Check for transport before showing user permissions
translations

* Documentation

* style fixes

* access via the attribute model

* fix alerting test

* update schema

* cleanup subscription on disable

* non-configurable db and table for webpush subscriptions (respect system connection)

* revert AlertTransport change
hopefully phpstan can figure it out

* phpstan fixes

* Support custom details display

* Match transport names to brand's preferred display

* less duplicate id errors

* Tests are done in Laravel code now so
remove legacy function usage... could be better, but ok

* Style fixes

* Style fixes 2

* Fix alert test

* Doc updates requires HTTPS and GMP

* unregister subscription when permission is set to denied

* cleanup after user deletion

* delete the right thing

* fix whitespace

* update install docs to include php-gmp

* suggest ext-gmp

* update javascript

* Update functions.php

Co-authored-by: Jellyfrog <Jellyfrog@users.noreply.github.com>
This commit is contained in:
Tony Murray
2021-10-06 07:29:47 -05:00
committed by GitHub
parent 83f847d92d
commit 0b8b97bb68
102 changed files with 1993 additions and 448 deletions

View File

@@ -0,0 +1,64 @@
<div<div x-data="notificationSubscriptionStatus()">
<div x-show="! supported">@lang('components.notification-subscription-status.no-support')</div>
@if($userHasTransport)
<div x-show="supported">
<div>
<span x-text="enabled ? '@lang('components.notification-subscription-status.enabled')' : '@lang('components.notification-subscription-status.disabled')'"></span>
<button x-on:click="toggle()" type="button" class="tw-float-right tw-border tw-border-gray-500 tw-text-gray-500 hover:tw-bg-gray-500 hover:tw-text-gray-100 tw-rounded tw-px-4 tw-py-2" x-text="enabled ? '@lang('components.notification-subscription-status.disable')' : '@lang('components.notification-subscription-status.enable')'"></button>
</div>
</div>
@else
<div x-show="supported">
@admin
<a href="{{ url('alert-transports') }}">
@lang('components.notification-subscription-status.no-transport')
</a>
@else
@lang('components.notification-subscription-status.no-transport')
@endadmin
</div>
@endif
<script>
function notificationSubscriptionStatus() {
return {
supported: 'Notification' in window,
enabled: 'Notification' in window && Notification.permission === 'granted' && localStorage.getItem('notifications') !== 'disabled',
toggle() {
if (this.enabled) {
localStorage.setItem('notifications', 'disabled');
this.enabled = false;
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
subscription.unsubscribe().then(function(success) {
if (success) {
fetch('./push/unregister', {
method: 'post',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': '{{ csrf_token() }}'
},
body: JSON.stringify({
endpoint: subscription.endpoint
}),
});
}
})
}
})
})
} else if (Notification.permission === 'granted') {
localStorage.setItem('notifications', 'enabled');
this.enabled = true;
} else {
Notification.requestPermission().then((permission) => {
localStorage.setItem('notifications', 'enabled');
this.enabled = permission === 'granted';
});
}
}
}
}
</script>
</di</div>