Notification API - Versionsgeschichte

37.49.72.8 am 27. Januar 2020 um 10:29 Uhr

2020-01-27T10:29:15Z

37.49.72.8: /* Gut zu wissen */

2020-01-27T10:26:24Z

Gut zu wissen

37.49.72.8: /* Subscription auf eigenem Server speichern */

2020-01-27T10:26:14Z

Subscription auf eigenem Server speichern

37.49.72.8: /* Subscription auf eigenem Server speichern */

2020-01-27T10:20:51Z

Subscription auf eigenem Server speichern

37.49.72.8 am 27. Januar 2020 um 10:17 Uhr

2020-01-27T10:17:53Z

37.49.72.8: /* Subscribe mit dem PushManager */

2020-01-27T10:03:01Z

Subscribe mit dem PushManager

37.49.72.8: /* Subscribe mit dem PushManager */

2020-01-27T07:38:49Z

Subscribe mit dem PushManager

37.49.72.8 am 27. Januar 2020 um 07:35 Uhr

2020-01-27T07:35:49Z

37.49.72.8: /* Subscription in Detail */

2020-01-27T07:33:44Z

Subscription in Detail

37.49.72.8 am 24. Januar 2020 um 13:27 Uhr

2020-01-24T13:27:45Z

@@ Zeile 8: / Zeile 8: @@
   https://github.com/Minishlink/web-push-php-example/tree/master/src // Beispiel (ungetestet)
   https://github.com/web-push-libs/web-push-php // Web-Push Lib für PHP (senden von Notifications)
 == Stichworte ==
@@ Zeile 13: / Zeile 14: @@
 == Übersicht ==
 Schritte in der Übersicht
 # Subscription

@@ Zeile 265: / Zeile 265: @@
 == Gut zu wissen ==
 * Die Notifications sind fest mit dem Browser verbunden. Nachrichten kommen also auch immer nur über den Browser an, mit dem der User den Service abonniert hat.
-* Der PushService wird vom Browser vorgegeben. Jeder Browser hat andere Enpoints.
+* Der PushService wird vom Browser vorgegeben. Jeder Browser hat andere Endpoints.

← Nächstältere Version		Version vom 27. Januar 2020, 10:26 Uhr
Zeile 262:		Zeile 262:
	});		});
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	== Gut zu wissen ==
		+	* Die Notifications sind fest mit dem Browser verbunden. Nachrichten kommen also auch immer nur über den Browser an, mit dem der User den Service abonniert hat.
		+	* Der PushService wird vom Browser vorgegeben. Jeder Browser hat andere Enpoints.

← Nächstältere Version		Version vom 27. Januar 2020, 10:20 Uhr
Zeile 211:		Zeile 211:

	const subscriptionObjectToo = JSON.stringify(pushSubscription);		const subscriptionObjectToo = JSON.stringify(pushSubscription);
		+	</syntaxhighlight>
		+
		+	Den String übermitteln wir einfach als POST Request:
		+	<syntaxhighlight lang="javascript">
		+	function sendSubscriptionToBackEnd(subscription) {
		+	return fetch('/api/save-subscription/', {
		+	method: 'POST',
		+	headers: {
		+	'Content-Type': 'application/json'
		+	},
		+	body: JSON.stringify(subscription)
		+	})
		+	.then(function(response) {
		+	if (!response.ok) {
		+	throw new Error('Bad status code from server.');
		+	}
		+
		+	return response.json();
		+	})
		+	.then(function(responseData) {
		+	if (!(responseData.data && responseData.data.success)) {
		+	throw new Error('Bad response from server.');
		+	}
		+	});
		+	}
		+	</syntaxhighlight>
		+
		+	Der Server speichert den Datensatz, um ihn später für Notifications zu Nutzen. Bei einem Node.js Server könnte das so aussehen:
		+	<syntaxhighlight lang="javascript">
		+	app.post('/api/save-subscription/', function (req, res) {
		+	if (!isValidSaveRequest(req, res)) {
		+	return;
		+	}
		+
		+	return saveSubscriptionToDatabase(req.body)
		+	.then(function(subscriptionId) {
		+	res.setHeader('Content-Type', 'application/json');
		+	res.send(JSON.stringify({ data: { success: true } }));
		+	})
		+	.catch(function(err) {
		+	res.status(500);
		+	res.setHeader('Content-Type', 'application/json');
		+	res.send(JSON.stringify({
		+	error: {
		+	id: 'unable-to-save-subscription',
		+	message: 'The subscription was received but we were unable to save it to our database.'
		+	}
		+	}));
		+	});
		+	});
	</syntaxhighlight>		</syntaxhighlight>

@@ Zeile 5: / Zeile 5: @@
   https://webdamn.com/build-push-notification-system-with-php-mysql/
   https://web-push-book.gauntface.com/ // must read
 == Stichworte ==
@@ Zeile 159: / Zeile 162: @@
 === Nachteile von subscribe() als permission request ===
 Wenn man subscribe() aufruft und der Browser noch keine Erlaubnis hat, fragt der Browser direkt den User. Das kann ein Nachteil sein, wenn man selbst die Kontrolle über die Anfrage haben möchte. Mit '''Notification.requestPermission()''' geht das.

@@ Zeile 143: / Zeile 143: @@
 </syntaxhighlight>
 Über die subscribe Methode gibt man ein Options Objekt mit.
-  userVisibleOnly erlaubt im Moment nur true (für Hintergrund Aktivitäten ohne Nachricht
+  * '''userVisibleOnly''' erlaubt im Moment nur true (für Hintergrund Aktivitäten ohne Nachricht

← Nächstältere Version		Version vom 27. Januar 2020, 07:38 Uhr
Zeile 142:		Zeile 142:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
		+	Über die subscribe Methode gibt man ein Options Objekt mit.
		+	userVisibleOnly erlaubt im Moment nur true (für Hintergrund Aktivitäten ohne Nachricht

@@ Zeile 118: / Zeile 118: @@
    return new Promise((resolve) => {
      resolve(Notification.permission);
    });
+}
 </syntaxhighlight>

@@ Zeile 48: / Zeile 48: @@
 ## Check for serviceWoker on navigator
 ## Check for PushManager on window
-#Register Service Worker
+# Register Service Worker
-#Request Permission
+# Request Permission

← Nächstältere Version		Version vom 24. Januar 2020, 13:27 Uhr
Zeile 1:		Zeile 1:
	Mit der Notification API kann eine Webseite Nachrichten auf Systemebene versenden.		Mit der Notification API kann eine Webseite Nachrichten auf Systemebene versenden.
		+
		+	== Links ==
		+	https://stackoverflow.com/questions/32717824/notification-system-using-php-and-mysql Allgmeine Überlegungen kein Push
		+	https://webdamn.com/build-push-notification-system-with-php-mysql/
		+	https://web-push-book.gauntface.com/ // must read
		+
		+	== Stichworte ==
		+	Observer Design Pattern
		+
		+	== Übersicht ==
		+	Schritte in der Übersicht
		+	# Subscription
		+	# Send Push Message
		+	# Handle Push Event
		+	=== Schritt 1: Subscription ===
		+
		+	# Get permission
		+	# Get PushSubscription
		+	# Send PushSubscription to Server
		+	# Store PushSubscription Details
		+	=> JavaScript PushAPI
		+	https://developer.mozilla.org/en-US/docs/Web/API/Push_API
		+	==== Aplication Server Keys ====
		+	Der VAPID Key verifiziert den Server, so dass der Browser später weiß, dass es sich um den echten Server handelt. Eigentlich wird ein Schlüsselpaar generiert s.u.
		+
		+	=== Schritt 2: Push Message senden ===
		+	Server -> WebPush Protocol Request -> PushService -> End Device
		+	* Der Server der eine Nachrichtschicken will schickt diese Standartisiert an einen Push Service.
		+	* Welche URL dieser hat teilt der Browser im Schritt eins mit.
		+	* Der PushService schickt diese dann wenn der Browser des Nutzers Online ist an den Nutzer.
		+	* Der PushService kann Instruktionen entgegennehmen:
		+	** Lebensdauer einer Push Nachricht - danach wird sie verworfen.
		+	** Dringlichkeit (der Service entscheidet z.B. bei geringer Batteriekapazität nur Prio-Nachrichten durchzulassen)
		+	** Topic - Eine Nachricht mit dem selben Topic wie eine alte ersetzt die Alte.
		+
		+	=== Schritt 3: Push Events auf dem Endgerät ===
		+	https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
		+
		+	Message kommt an -> Browser spricht mit Service Worker -> Push Event wird aufgelöst.
		+	* Wenn die Nachricht abgeliefert wurde wird dies dem Service Worker mitgeteilt. Der Service Worker ist eine JavaScript Datei, die der Browser aufrufen und ausführen kann, ohne dass die Webseite aufgerufen werden muss.
		+	* Innerhalb des Service Workers kann man eine spezielle API aufrufen. Diese ist nur im Service Worker verfügbar.
		+	* Der ServiceWorker kann ausgeführt werden wenn der Browser geschlossen ist.
		+	* Im Push Event des Service Worker kann man Hintergrundaufgaben erledigen (Analytics, Seiten Offline Cachen...)
		+
		+	== Subscription in Detail ==
		+	# Feature Detection
		+	## Check for serviceWoker on navigator
		+	## Check for PushManager on window
		+	#Register Service Worker
		+	#Request Permission