Request the permissions for notifications via user interaction

Signed-off-by: Joas Schilling <coding@schilljs.com>

Author: nickvergessen

src/App.vue

@@ -1,9 +1,15 @@
 <template>
 	<div v-if="!shutdown" class="notifications">
-		<div ref="button" class="notifications-button menutoggle" :class="{ hasNotifications: notifications.length }"
-			tabindex="0" role="button"
+		<div ref="button"
+			class="notifications-button menutoggle"
+			:class="{ hasNotifications: notifications.length }"
+			tabindex="0"
+			role="button"
 			aria-label="t('notifications', 'Notifications')"
-			aria-haspopup="true" aria-controls="notification-container" aria-expanded="false">
+			aria-haspopup="true"
+			aria-controls="notification-container"
+			aria-expanded="false"
+			@click="requestWebNotificationPermissions">
 			<img ref="icon" class="svg" alt=""
 				:title="t('notifications', 'Notifications')" :src="iconPath">
 		</div>
@@ -29,7 +35,12 @@
 				</ul>
 				<div v-else class="emptycontent">
 					<div class="icon icon-notifications-dark" />
-					<h2>{{ t('notifications', 'No notifications') }}</h2>
+					<h2 v-if="webNotificationsGranted === null">
+						{{ t('notifications', 'Requesting browser permissions to show notifications') }}
+					</h2>
+					<h2 v-else>
+						{{ t('notifications', 'No notifications') }}
+					</h2>
 				</div>
 			</transition>
 		</div>
@@ -49,6 +60,7 @@ export default {
 
 	data: function() {
 		return {
+			webNotificationsGranted: null,
 			hadNotifications: false,
 			backgroundFetching: false,
 			shutdown: false,
@@ -68,7 +80,7 @@ export default {
 		iconPath: function() {
 			var iconPath = 'notifications'
 
-			if (this.notifications.length) {
+			if (this.webNotificationsGranted === null || this.notifications.length) {
 				if (this.isRedThemed()) {
 					iconPath += '-red'
 				}
@@ -89,6 +101,8 @@ export default {
 		// Bind the button click event
 		OC.registerMenu($(this.$refs.button), $(this.$refs.container), undefined, true)
 
+		this.checkWebNotificationPermissions()
+
 		// Initial call to the notification endpoint
 		this._fetch()
 
@@ -209,6 +223,46 @@ export default {
 		_shutDownNotifications: function() {
 			window.clearInterval(this.interval)
 			this.shutdown = true
+		},
+
+		/**
+		 * Check if we can do web notifications
+		 */
+		checkWebNotificationPermissions: function() {
+			if (!('Notification' in window)) {
+				console.info('Browser does not support notifications')
+				this.webNotificationsGranted = false
+
+			}
+
+			if (window.Notification.permission === 'granted') {
+				console.debug('Notifications permissions granted')
+				this.webNotificationsGranted = true
+				return
+			}
+
+			if (window.Notification.permission === 'denied') {
+				console.debug('Notifications permissions denied')
+				this.webNotificationsGranted = false
+				return
+			}
+
+			console.info('Notifications permissions not yet requested')
+		},
+
+		/**
+		 * Check if we can do web notifications
+		 */
+		requestWebNotificationPermissions: async function() {
+			if (this.webNotificationsGranted !== null) {
+				return
+			}
+
+			console.info('Requesting notifications permissions')
+			window.Notification.requestPermission()
+				.then((permissions) => {
+					this.webNotificationsGranted = permissions === 'granted'
+				})
 		}
 	}
 }

src/Components/Notification.vue

@@ -203,8 +203,9 @@ export default {
 		})
 
 		// Parents: TransitionGroup > NotificationsList
-		if (this.$parent.$parent.backgroundFetching) {
-			this._triggerWebNotification()
+		if (this.$parent.$parent.backgroundFetching
+			&& this.$parent.$parent.webNotificationsGranted) {
+			this._createWebNotification()
 		}
 	},
 
@@ -228,31 +229,9 @@ export default {
 		},
 
 		/**
-			 * Check if we do web notifications
-			 */
-		_triggerWebNotification: function() {
-			// Trigger browsers web notification
-			if ('Notification' in window) {
-				if (Notification.permission === 'granted') {
-					// If it's okay let's create a notification
-					this._createWebNotification()
-
-				// Otherwise, we need to ask the user for permission
-				} else if (Notification.permission !== 'denied') {
-					Notification.requestPermission(function(permission) {
-						// If the user accepts, let's create a notification
-						if (permission === 'granted') {
-							this._createWebNotification()
-						}
-					}.bind(this))
-				}
-			}
-		},
-
-		/**
-			 * Create a browser notification
-			 * @see https://developer.mozilla.org/en/docs/Web/API/notification
-			 */
+		 * Create a browser notification
+		 * @see https://developer.mozilla.org/en/docs/Web/API/notification
+		 */
 		_createWebNotification: function() {
 			var n = new Notification(this.subject, {
 				title: this.subject,