[stable18] Request the permissions for notifications via user interaction

src/App.vue

@@ -5,10 +5,11 @@
 			:class="{ hasNotifications: notifications.length }"
 			tabindex="0"
 			role="button"
-			aria-label="t('notifications', 'Notifications')"
+			:aria-label="t('notifications', 'Notifications')"
 			aria-haspopup="true"
 			aria-controls="notification-container"
-			aria-expanded="false">
+			aria-expanded="false"
+			@click="requestWebNotificationPermissions">
 			<img ref="icon"
 				class="svg"
 				alt=""
@@ -37,7 +38,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>
@@ -57,6 +63,7 @@ export default {
 
 	data: function() {
 		return {
+			webNotificationsGranted: null,
 			hadNotifications: false,
 			backgroundFetching: false,
 			shutdown: false,
@@ -76,7 +83,7 @@ export default {
 		iconPath: function() {
 			let iconPath = 'notifications'
 
-			if (this.notifications.length) {
+			if (this.webNotificationsGranted === null || this.notifications.length) {
 				if (this.isRedThemed()) {
 					iconPath += '-red'
 				}
@@ -97,6 +104,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()
 
@@ -218,7 +227,47 @@ export default {
 			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'
+				})
+		}
+	}
 }
 </script>
 

src/Components/Notification.vue

@@ -199,8 +199,9 @@ export default {
 		})
 
 		// Parents: TransitionGroup > NotificationsList
-		if (this.$parent.$parent.backgroundFetching) {
-			this._triggerWebNotification()
+		if (this.$parent.$parent.backgroundFetching
+			&& this.$parent.$parent.webNotificationsGranted) {
+			this._createWebNotification()
 		}
 	},
 
@@ -224,31 +225,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() {
 			const n = new Notification(this.subject, {
 				title: this.subject,